I like auto-formatting code idea very much. You can use eslint rules to configure code style you like. But some hidden rule makes what I don't like: inlines document destruction props or jsx template element attributes.

Example (this is how I want it to be).

const {
  foo: 1,
  bar: 2,
  baz: 3,
} = require('qux')

And here is how it is reformatted by VSCode or some its plugin (not sure)

const { foo: 1, bar: 2, baz: 3 } = require('qux')

It is absolutely OK in case it is reformatted back to multiline when the line lenth exceeds some specified limit.

JSX examples (tried with a new project generated with use of react-create-app).

1. OK, it would be too long line, thus VSCode re-formats it to multiline

   <a
     className="App-link"
     href=""
     target="_blank"
     rel="noopener noreferrer"
   >
   

2. Line length wouldn't be longer than allowed, but I still love this style

   <a
     className="App-link"
     href=""
   >
   

3. But VSCode/plugin has a different preference and reformats it to

   <a className="App-link" href="">
   

I tried to find a specific eslint rule which would be responsible for this behavior, but with no luck (not found). I tried to change default vscode formatter from prettier to null - no luck.

One more strange thing for me: VSCode doesn't highlights such code snippets which it is going to reformat.

So how can it be fixed?

UPDATE

The only thing I want VSCode to do within such code parts, is just breaking one line to multiline in case the line exceeds eslint max-len value.

I like auto-formatting code idea very much. You can use eslint rules to configure code style you like. But some hidden rule makes what I don't like: inlines document destruction props or jsx template element attributes.

Example (this is how I want it to be).

const {
  foo: 1,
  bar: 2,
  baz: 3,
} = require('qux')

And here is how it is reformatted by VSCode or some its plugin (not sure)

const { foo: 1, bar: 2, baz: 3 } = require('qux')

It is absolutely OK in case it is reformatted back to multiline when the line lenth exceeds some specified limit.

JSX examples (tried with a new project generated with use of react-create-app).

1. OK, it would be too long line, thus VSCode re-formats it to multiline

   <a
     className="App-link"
     href="https://reactjs"
     target="_blank"
     rel="noopener noreferrer"
   >
   

2. Line length wouldn't be longer than allowed, but I still love this style

   <a
     className="App-link"
     href="https://reactjs"
   >
   

3. But VSCode/plugin has a different preference and reformats it to

   <a className="App-link" href="https://reactjs">
   

I tried to find a specific eslint rule which would be responsible for this behavior, but with no luck (not found). I tried to change default vscode formatter from prettier to null - no luck.

One more strange thing for me: VSCode doesn't highlights such code snippets which it is going to reformat.

So how can it be fixed?

UPDATE

The only thing I want VSCode to do within such code parts, is just breaking one line to multiline in case the line exceeds eslint max-len value.

• javascript
• visual-studio-code
• jsx
• code-formatting
• prettier

Share Improve this question Follow edited Mar 28, 2020 at 21:43 user13142267 asked Mar 27, 2020 at 14:27 humkinshumkins 10.8k1212 gold badges6464 silver badges7979 bronze badges

Add a ment  | 

1 Answer 1

Sorted by: Reset to default 5

If you have prettier configured. Did you try the prettier.printWidth property here

{
  "prettier.printWidth": 80
}