使用ESLint和Prettier在Visual Studio代码中保存时无法获得正确的autoformat

Question

在处理.vue文件时使用ESLint和Prettier的Visual Studio代码中,我似乎无法正确地自动修复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 Code工作区设置:

{
  "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

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

我终于找到了神奇的设置组合,感谢Wes Bos在推特上发布的这个帖子.我怀疑我似乎有多个冲突的格式化程序.虽然我不确定它们到底是什么,但我能够关闭以下所有内容:

在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中,我可以使用原始帖子中的设置,然后根据需要更改"vue/max-attributes-per-line".然后,VS Code的ESLint插件将在每次保存时一步一步地格式化代码,就像kenjiru写的那样.最后一个障碍:HMR不会接受这些更改,因此从头开始重建.

Answer 2

随着'vue/max-attributes-per-line': 'off'该规则被禁用等等VSCode不尝试修复上自动保存长线。如预期的那样，将应用其他eslint修复程序。

使用'vue/max-attributes-per-line': 1VSCode修复，每次保存仅修复一个错误。这是vscode-eslint的已知限制

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

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

eslint --fix循环运行所有规则，直到没有其他掉毛错误为止。我认为它最多有10次迭代的限制。

有关更多详细信息，请参见以下链接：

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

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

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