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

Question

我非常喜欢自动格式化代码的想法。你可以使用 eslint 规则来配置你喜欢的代码风格。但是一些隐藏的规则使我不喜欢:内联文档销毁 Prop 或 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 属性 here

{
  "prettier.printWidth": 80
}