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

Posted 2023-02-21

【中文标题】VSCode 将多行代码自动格式化为一行代码

【英文标题】：VSCode is auto-formatting multiline to one line code

【发布时间】：2020-07-08 07:27:13

【问题描述】：

我非常喜欢自动格式化代码的想法。你可以使用 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 生成的新项目）。

好的，行太长了，VSCode 将其重新格式化为多行

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

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

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

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

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

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

对我来说还有一件奇怪的事情：VSCode 没有突出显示它将重新格式化的代码 sn-ps。

那么如何解决呢？

更新

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

【参考方案1】：

如果您配置了prettier。你试过prettier.printWidth属性here

  "prettier.printWidth": 80