且构网

分享程序员开发的那些事...
且构网 - 分享程序员编程开发的那些事

使用ESLint和Prettier保存在Visual Studio Code中时无法获得正确的自动格式设置

更新时间:2022-05-24 22:07:59

简短的答案:我需要: 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.