5

I'm working on a Angular project on Visual Studio Code and I getting one annoying format document setting on Typescript files where it breaks parameters to a new line:

Before formatting (alt+shift+f):

this.opportunityId = this.route.snapshot.paramMap.get('opportunityid');
this.opportunityTermVendorId = this.route.snapshot.paramMap.get('vendorid');
this.opportunityTermVendorAssetId = this.route.snapshot.paramMap.get('assetid');
this.opportunityTermCollateralId = this.route.snapshot.paramMap.get('collateralid');

After formatting (alt+shift+f):

this.opportunityId = this.route.snapshot.paramMap.get('opportunityid');
this.opportunityTermVendorId = this.route.snapshot.paramMap.get('vendorid');
this.opportunityTermVendorAssetId = this.route.snapshot.paramMap.get(
  'assetid'
);
this.opportunityTermCollateralId = this.route.snapshot.paramMap.get(
  'collateralid'
);

I have word wrap turned off but I still tried to set it to a bigger word wrap column value. See my current settings override

{
   "git.confirmSync": false,
   "terminal.integrated.shell.windows": "C:\\Windows\\System32\\cmd.exe",
   "workbench.iconTheme": "material-icon-theme",
   "editor.formatOnSave": true,
   "prettier.singleQuote": true,
   "editor.wordWrapColumn": 180
 }

3 Answers 3

6

For me "prettier.printWidth": 180 didn't work, but it turns out the latest version of prettier doesn't have the "prettier" part at the beginning of each property.

So in .prettierrc I now have "printWidth": 180 which fixed this issue.

Sign up to request clarification or add additional context in comments.

Comments

2

According to this

editor.wordWrap: "off" - Lines will never wrap.
editor.wordWrap: "on" - Lines will wrap at viewport width.
editor.wordWrap: "wordWrapColumn" - Lines will wrap at the value of editor.wordWrapColumn. editor.wordWrap: "bounded" - Lines will wrap at the minimum of viewport width and the value of editor.wordWrapColumn.

you should set:

"editor.wordWrap": "bounded",
"editor.wordWrapColumn": 180

2 Comments

Hi thank you for the help, after messing around a little more I figured out that the extension called "Prettier" that comes with "Angular Essentials" was causing the issue. I just had to add "prettier.printWidth": 160
Not working for me as of the current version. By default, its set to off - and still i see the same behavior. Even after i override dafult behavior with the settings you provided - i still see the same weird new lines after formatting. If you have updated info - please, take a look at stackoverflow.com/questions/47209641/…
0

I figured out that the extension called "Prettier" that comes with "Angular Essentials" was causing the issue. I just had to add "prettier.printWidth": 160 to the settings.

1 Comment

I've end up with the same. However, placing "prettier.printWidth": 160 to the settings give no effect on the behavior.

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Start asking to get answers

Find the answer to your question by asking.

Ask question

Explore related questions

See similar questions with these tags.