使用ESLint和Prettier保存在Visual Studio Code中时无法获得正确的自动格式设置 [英] Can't get correct autoformat on save in Visual Studio Code with ESLint and Prettier

问题描述

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

in Visual Studio Code with ESLint and Prettier when working on .vue files, it seems I can't get vue/max-attributes-per-line to auto-fix correctly.

例如，将vue / max-attributes-per-line设置为 off，并且我尝试手动添加换行符，它会更正它，使每个元素始终不超过一行，无论是否宽度为81、120、200或更多个字符。 如何确定将标记元素强制移到一行上的原因？

For example, with vue/max-attributes-per-line set to 'off', and I try to add line breaks manually it corrects it to always have every element on no more than one line, no matter if it is 81, 120, 200, or more characters wide. How can I figure out what is forcing my markup elements onto exactly one line?

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

I am using ESLint version 5.1.0 and Visual Studio Code (without the Prettier Extension), with Prettier 1.14.2.

以下是.vue文件中的示例-当'vue / max时，无论如何我都无法在多行代码上进行操作-每行属性：关闭 。每次我保存时，都会强制将长行标记全部放在一行上。

Here's the example in a .vue file-- I cannot make this go on multiple lines no matter what I do, when 'vue/max-attributes-per-line': 'off'. Every time I save, it forces the long line of markup to be all on one line.

<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 ，它的格式像这样，只有一个换行符（这也是很错误的。）。

If I set 'vue/max-attributes-per-line': 2, it formats like so, with one line break(which is quite wrong as well).

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

如果我尝试手动重新格式化，则保存后它将恢复为上面的格式。

If I try to reformat it manually, it just reverts to the above when I save.

另外，当我按Ctrl + S时似乎重新格式化了两次：首先将其重新格式化以将它们全部放在一行上，然后半秒后重新格式化上面的结果。 有任何想法吗？是什么原因导致这种怪异-是否运行了多个重新格式化程序？如何找出第一个禁用它的东西？

Additionally, it seems to reformat twice when I hit Ctrl+S: first it reformats to put it all on one line, then a half-second later the formatting above results. Any ideas? What is causing this weirdness--are there multiple reformatters running? How do I figure out what the first one is to disable it?

VS Code工作区设置：

VS Code workspace settings:

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

.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成形吗？上述设置没有帮助，但我什至不知道如何干扰。有什么想法吗？

Without changing any settings, ESLint --fix does indeed format properly--breaking all my .vue template elements into many lines properly. So any ideas how I whip VS Code into shape? The above settings didn't help, but I am at a loss how as to even know what is interfering. Any ideas?

要强调一点，当我保存VS Code时，一个长HTML元素将折叠为一行，然后半秒后变为两行，所有一次保存操作。我希望它能分成许多行。可以进行多次保存，但是第一次保存会显示此行为以及以后的所有保存。

To emphasize, when I save in VS Code, a long HTML element will collapse to one line then break to two lines a half-second later, all from one save operation. I'm expecting it instead to break it up into many lines. It would be okay if it took several saves, but instead the first save shows this behavior as well as every subsequent save.

推荐答案

简短的答案：我需要： editor.formatOnSave：否， javascript.format.enable：否 。

Short answer: I needed: "editor.formatOnSave": false, "javascript.format.enable": false.

我终于找到了设置的神奇组合，这要归功于此来自Wes Bos在Twitter上的帖子。我猜对了，似乎有多个相互冲突的格式化程序，这是正确的。虽然我不确定它们到底是什么，但是我可以按如下所示关闭所有文件，但按以下步骤关闭：

I finally found the magical combination of settings, thanks to this thread from Wes Bos on Twitter. I was right in my suspicion that there seem to be multiple conflicting formatters. Though I'm not sure what they actually are, I was able to turn off all but eslint as follows:

在VS Code设置中，我需要：

In the VS Code settings, I need:

  "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-at-line-per-line。然后，就像kenjiru所写的那样，VS Code的ESLint插件将在每次保存时一次格式化代码。最后一个障碍：HMR无法接受这些更改，因此请从头进行重建。

In .eslintrc.js, then I can use the settings in my original post and then also change 'vue/max-attributes-per-line' as desired. Then VS Code's ESLint plugin will format code one step at a time on every save, much as kenjiru wrote. One last snag: HMR won't pick up these changes, so rebuild from scratch.

这篇关于使用ESLint和Prettier保存在Visual Studio Code中时无法获得正确的自动格式设置的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！