在使用 ESLint 和 Prettier 的 Visual Studio 代码中保存时无法获得正确的自动套用格式

Question

在 Visual Studio 使用 ESLint 和 Prettier 处理 .vue 文件时，我似乎无法 vue/max-attributes-per-line 正确地自动修复代码。

例如，将 vue/max-attributes-per-line 设置为 'off'，然后我尝试手动添加换行符，它会将其更正为始终让每个元素不超过一行，无论它是否是81、120、200 或更多字符宽。 我怎样才能弄清楚是什么迫使我的标记元素恰好在一行上？

我正在使用 ESLint 版本 5.1.0 和 Visual Studio 代码（没有 Prettier 扩展）和 Prettier 1.14.2。

这是 .vue 文件中的示例——当 'vue/max-attributes-per-line': 'off' 时，无论我做什么，我都无法让它在多行上运行。每次保存时，它都会强制将长行标记全部放在一行上。

<template>
  <font-awesome-icon v-if="statusOptions.icon" :icon="statusOptions.icon" :spin="statusOptions.isIconSpin" :class="['saving-indicator', 'pl-1', 'pt-1', statusOptions.iconClasses]" />
</template>

如果我设置'vue/max-attributes-per-line': 2，它的格式就像这样，有一个换行符（这也是错误的）。

<font-awesome-icon
  v-if="statusOptions.icon" 
  :icon="statusOptions.icon"
  :spin="statusOptions.isIconSpin"
  :class="['saving-indicator', 'pl-1', 'pt-1', statusOptions.iconClasses]"
/>

如果我尝试手动重新格式化它，当我保存时它只会恢复到上面的状态。

此外，当我按下 Ctrl+S 时，它似乎重新格式化了两次：首先它重新格式化以将所有内容放在一行中，然后半秒后上面的格式化结果。 有什么想法？是什么导致了这种奇怪现象——是否有多个重新格式化程序运行？我如何找出第一个是什么来禁用它？

VS 代码工作区设置：

{
  "editor.formatOnType": false,
  "editor.formatOnPaste": false,
  "editor.formatOnSave": true,
  "[javascript]": {
    "editor.tabSize": 2
  },
  "[vue]": {
    "editor.tabSize": 2
  },
  "[csharp]": {
    "editor.tabSize": 4
  },
  "javascript.format.insertSpaceAfterFunctionKeywordForAnonymousFunctions": true,
  "javascript.referencesCodeLens.enabled": true,
  "vetur.validation.script": false,
  "vetur.validation.template": false,
  "eslint.autoFixOnSave": true,
  "eslint.alwaysShowStatus": true,
  "eslint.options": {
    "extensions": [
      ".html",
      ".js",
      ".vue",
      ".jsx"
    ]
  },
  "eslint.validate": [
    {
      "language": "html",
      "autoFix": true
    },
    {
      "language": "vue",
      "autoFix": true
    },
    "vue-html",
    {
      "language": "javascript",
      "autoFix": true
    },
    {
      "language": "javascriptreact",
      "autoFix": true
    }
  ],
  "editor.rulers": [
    80,
    100
  ]
}

.eslintrc.js:

module.exports = {
  parserOptions: {
    parser: 'babel-eslint'
  },
  env: {
    browser: true,
    node: true,
    jest: true
  },
  globals: {
    expect: true
  },
  extends: [
    'prettier',
    'plugin:vue/recommended',        // /base, /essential, /strongly-recommended, /recommended
    'plugin:prettier/recommended',   // turns off all ESLINT rules that are unnecessary due to Prettier or might conflict with Prettier. 
    'eslint:recommended'
  ],
  plugins: ['vue', 'prettier'],
  rules: {
    'vue/max-attributes-per-line': 'off',
    'prettier/prettier': [            // customizing prettier rules (not many of them are customizable)
      'error',
      {
        singleQuote: true,
        semi: false,
        tabWidth: 2
      },
    ],
    'no-console': 'off'
  }
}

在不更改任何设置的情况下，ESLint --fix 确实正确地格式化了——将我所有的 .vue 模板元素正确地分成多行。 那么我有什么想法可以让 VS Code 成型吗？ 上面的设置没有帮助，但我什至不知道是什么在干扰。有什么想法吗？

要强调的是，当我在 VS Code 中保存时，一个长的 HTML 元素将折叠成一行，然后在半秒后分成两行，所有这些都来自一次保存操作。我期待它而不是将它分成多行。如果需要多次保存就没问题，但第一次保存以及随后的每次保存都会显示此行为。

Answer 1

使用 'vue/max-attributes-per-line': 'off' 规则被禁用，因此 VSCode 不会尝试修复自动保存的长行。正如预期的那样应用了其他 eslint 修复程序。

使用'vue/max-attributes-per-line': 1 VSCode每次保存只修复一个错误。这是 vscode-eslint

的已知限制

vscode-eslint 只进行一次传递，以将插件生成的编辑量保持在最低限度。目标是在文件中保留尽可能多的标记（如断点）。

VSCode 对所有插件计算保存更改集的时间限制为 1 秒。如果其中一个插件连续3次导致其他插件无法运行，则该插件将被禁用。

eslint --fix 运行循环所有规则，直到不再有 linting 错误。我认为它最多有 10 次迭代的限制。

有关详细信息，请参阅这些链接：

https://github.com/Microsoft/vscode-eslint/issues/154

我创建了一个最小的设置来演示这个问题：

https://github.com/kenjiru/vscode-eslint-onsave-issue

Answer 2

简答：我需要："editor.formatOnSave": false, "javascript.format.enable": false.

感谢this thread from Wes Bos on Twitter，我终于找到了设置的神奇组合。我怀疑似乎有多个相互冲突的格式化程序是正确的。虽然我不确定它们到底是什么，但我能够关闭除 eslint 之外的所有功能，如下所示：

在VS Code设置中，我需要：

"editor.formatOnSave": false,
"javascript.format.enable": false,
"eslint.autoFixOnSave": true,
"eslint.alwaysShowStatus": true,
"eslint.options": {
  "extensions": [ ".html", ".js", ".vue", ".jsx" ]
},
"eslint.validate": [
  { "language": "html", "autoFix": true },
  { "language": "vue", "autoFix": true },
  { "language": "javascript", "autoFix": true },
  { "language": "javascriptreact", "autoFix": true }
]

在.eslintrc.js中，然后我可以使用我原来post中的设置，然后也可以根据需要更改'vue/max-attributes-per-line'。然后 VS Code 的 ESLint 插件将在每次保存时一次一步地格式化代码，就像 kenjiru 写的那样。最后一个障碍：HMR 不会接受这些更改，所以从头开始重建。

Answer 3

我遇到过类似的问题。不幸的是，我尝试了上面的解决方案，但对我没有用。我正在使用 eslint 和 Vetur，没有安装更漂亮的插件，而是通过 eslint 配置它并启用“eslint.autoFixOnSave”：true。通过删除 settings.json 中的以下配置，我终于在保存时获得了正确的自动套用格式。不知道为什么，但它对我有用。

"eslint.options": {
  "extensions": [".html", ".js", ".vue", ".jsx"]
},
"eslint.validate": [{
    "language": "html",
    "autoFix": true
  },
  {
    "language": "vue",
    "autoFix": true
  },
  {
    "language": "javascript",
    "autoFix": true
  },
  {
    "language": "javascriptreact",
    "autoFix": true
  }
]

如果我遇到与此相关的其他问题，将更新此答案。

Answer 4

我遇到了同样的问题，并且惊讶地发现prettier和vetur是冲突的。我不得不禁用 vetur 格式化程序，它现在可以正常工作了。

如果您的编辑器中有此部分 settings.json 并且您安装了 prettier，

{
 "[vue]": {
     "editor.defaultFormatter": "octref.vetur",
  },
}

很有可能，这两个格式化程序相互冲突，因此出现意外行为。

一个快速的解决方法是如下评论它，或者干脆永久删除它。

{
 "[vue]": {
     // "editor.defaultFormatter": "octref.vetur",
  },
}

Answer 5

我知道这已经过时了，但万一有人发现了这个但没有成功使用已发布的解决方案，我的解决方法是添加：

"editor.codeActionsOnSave": {
   "source.fixAll": true
}

出于某种原因我不需要 "editor.formatOnSave": true。我没有安装了 Prettier - 只有 ESLint - 但现在当我保存时它会自动执行任何修复。

Answer 6

我试过这个东西，但没用。

"typescript.format.insertSpaceAfterOpeningAndBeforeClosingNonemptyBraces": false,
"javascript.format.insertSpaceAfterOpeningAndBeforeClosingNonemptyBraces": false,
"typescript.format.insertSpaceAfterOpeningAndBeforeClosingEmptyBraces": false,

但我终于试过了。并工作 "diffEditor.wordWrap": "off",

Answer 7

这是我最终在 VSC settings.json 文件中使用的设置。

非常适合本地设置 eslint 禁用默认的 vetur 设置（如果安装了插件）。

"files.autoSave": "onFocusChange",
"editor.codeActionsOnSave": {
  "source.fixAll.eslint": true
},
"editor.formatOnSave": false,
"javascript.format.enable": false,
"eslint.alwaysShowStatus": true,
"eslint.options": {
  "extensions": [ ".html", ".js", ".vue", ".jsx" ]
},
"eslint.validate": [
  "html",
  "javascript",
  "vue"
],

在使用 ESLint 和 Prettier 的 Visual Studio 代码中保存时无法获得正确的自动套用格式

Can't get correct autoformat on save in Visual Studio Code with ESLint and Prettier

eslint

vue.js

visual-studio-code

prettier