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

Question

我非常喜欢自动格式化代码的想法。您可以使用 eslint 规则来配置您喜欢的代码风格。但一些隐藏规则导致了我不喜欢的情况：内联文档销毁道具或 jsx 模板元素属性。

示例（这就是我想要的）。

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

这是 VSCode 或其某些插件如何重新格式化它的方式（不确定）

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

当行长度超过某个指定限制时，将其重新格式化回多行是绝对可以的。

JSX 示例（尝试使用使用生成的新项目react-create-app）。

1. 好的，这行太长了，因此 VSCode 将其重新格式化为多行

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

2. 线条长度不会超过允许的长度，但我仍然喜欢这种风格

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

3. 但 VSCode/plugin 有不同的偏好，并将其重新格式化为

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

我试图找到一个特定的 eslint 规则来解释这种行为，但没有成功（未找到）。我尝试将默认的 vscode 格式化程序从 更改为prettier-null没有成功。

对我来说还有一件奇怪的事情：VSCode 不会突出显示它将重新格式化的代码片段。

那么如何解决呢？

更新

我希望 VSCode 在此类代码部分中做的唯一一件事就是将一行分成多行，以防该行超出eslint max-len值。

Answer 1

如果你已经prettier配置了。您尝试过这里的prettier.printWidth房产吗

{
  "prettier.printWidth": 80
}