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

问题描述 投票：13回答：3

在处理.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元素将折叠为一行，然后在半秒后分成两行，全部来自一个保存操作。我期待它把它分解成许多行。如果它需要多次保存就可以了，但是第一次保存会显示此行为以及每次后续保存。

vue.js visual-studio-code eslint prettier
3个回答
33
投票

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

由于this thread from Wes Bos on Twitter，我终于找到了神奇的设置组合。我怀疑我似乎有多个冲突的格式化程序。虽然我不确定它们到底是什么，但我能够关闭以下所有内容：

在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不会接受这些更改，因此从头开始重建。

4
投票

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

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

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

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

eslint --fix在循环中运行所有规则，直到没有更多的linting错误。我认为它最多可以有10次迭代。

有关详细信息，请参阅以下链接

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

0
投票

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

  "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
    }
  ]

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

最新问题
© www.soinside.com 2019 - 2024. All rights reserved.