首页 文章

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

提问于
浏览
5

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

例如,将vue / max-attributes-per-line设置为'off',并尝试手动添加换行符,将其更正为始终使每个元素不超过一行,无论它是否为81,120,200或更多字符宽 . How can I figure out what is forcing my markup elements onto exactly one line?

我正在使用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时,它似乎重新格式化了两次:首先它重新格式化以将其全部放在一行上,然后半秒后,上面的格式化结果 . Any ideas ?造成这种奇怪的原因是 - 有多个重组器正在运行吗?我怎么弄清楚第一个禁用它的是什么?

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模板元素分成多行 . So any ideas how I whip VS Code into shape? 以上设置没有帮助,但我不知道甚至知道什么是干扰 . 有任何想法吗?

要强调的是,当我在VS Code中保存时,一个长的HTML元素将折叠为一行,然后在半秒后分成两行,所有这些都来自一个保存操作 . 我期待它把它分解成许多行 . 如果它需要多次保存就可以,但是第一次保存会显示此行为以及每次后续保存 .

2 回答

  • 9

    简短的回答:我需要: "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不会接受这些更改,因此从头开始重建 .

  • 1

    使用 '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次迭代 .

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

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

相关问题