10

I'm trying to set different width of row for my VSCode prettier(extension) settings, but without any luck. Tried different variations with prefixes or without in ~root/.vscode/settings.json:

"max-len": 120,
"printWidth": 120
"editor.max-len": 120,
"editor.printWidth": 120
"prettier.max-len": 120,
"prettier.printWidth": 120

none of it respect rules.

How can I solve it?

WebArtisan
  • 3,996
  • 10
  • 42
  • 62
  • 1
    If you are using `prettier` I recommend use the `.pretierrc` file. – SnakeDrak Apr 27 '20 at 06:09
  • 2
    It is extension of VSCode, so all settings of extensions need to be in VSCode settings – WebArtisan Apr 27 '20 at 06:12
  • I use VSCode and the extension reads the `.pretierrc` file as well. Check [the documentation](https://marketplace.visualstudio.com/items?itemName=esbenp.prettier-vscode#user-content-settings) – SnakeDrak Apr 29 '20 at 05:47
  • 1
    .prettierrc has precedence over VSCode settings. But even setting "prettier.printWidth": 120 in .prettierrc, it still divides a line much smaller than 120 chars. The same code is not divided by Prettier when the same line is made smaller reducing a string for example. Think this may be a bug. – danb4r Jan 22 '22 at 18:23

5 Answers5

2
  • Did you consider the file extensions Prettier is actually supporting?
  • If yes, when you have the file opened, is "Prettier" selected in the status bar on the bottom right?
  • If yes, open the "Output" tab in VS Code and try to format the file. What do you see as output (you might need to select "Prettier" in the dropdown of the "Output" tab).
von_court
  • 152
  • 2
  • 10
  • Rechecking the supported file extensions made me realize my issue. Many places show examples of using prettier with nextjs setup, but prettier by default does not support .tsx files, only .jsx. https://stackoverflow.com/questions/61731587/prettier-doesnt-format-tsx-file – blapaz Dec 22 '21 at 14:39
1

Find .editorconfig file in your project. If exists, add max_line_length = 120 to it.

See "Print Width" in Prettier document https://prettier.io/docs/en/options.html for details

JL4405
  • 11
  • 1
0

I had to restart VS Code after changing the printWidth value in .prettierrc.js, in order for the plugin to pick it up.

blwinters
  • 1,911
  • 19
  • 40
0
  1. Open vscode
  2. ctrl + ,
  3. find Prettier: Print Width (you can use search)
  4. by default 80 - usually set 120
Fedor
  • 17,146
  • 13
  • 40
  • 131
Lelik
  • 11
  • 3
-1

You're missing trailing commas on line 2 and 4. Click on the "Prettier" link in the status bar and it will tell what to debug.

Mark Elton
  • 1