VSCode 将多行代码自动格式化为一行代码

Question

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.org" 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.org" >

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

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

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.

Answer 1

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

{
  "prettier.printWidth": 80
}