我无法在我的 vue / nuxt 项目中变得更漂亮和 eslint 很好地发挥

Question

我一直对 ESLint 和 prettier 有疑问。现在发生了好几次，他们有冲突的规则，一个保存时的自动格式会在另一个上抛出错误。

我现在的问题是这一行，它已经被 ESLint 格式化：

<v-card outlined min-width="105" :style="{ backgroundColor: cCodeWaterTemp }">

然后 prettier 抛出这个错误：

  88:16  error  Replace `·outlined·min-width="105"·:style="{·backgroundColor:·cCodeWaterTemp·}"` with `⏎··········outlined⏎··········min-width="105"⏎··········:style="{·backgroundColor:·cCodeWaterTemp·}"⏎········`  prettier/prettier

基本上说我应该把它改成这种格式

    <v-card 
    outlined 
    min-width="105" 
    :style="{ backgroundColor: cCodeWaterTemp }"
    >

哪个 ESLint 将在保存时再次更改。我如何配置它们以具有一致的、不冲突的规则？我浏览了一些教程，目前我的配置文件看起来像这样

Settings.json:

{
"window.zoomLevel": 0,
"vetur.validation.template": false,
"editor.codeActionsOnSave": {
    "source.fixAll.eslint": true
},
"editor.formatOnSave": true,
"vetur.completion.scaffoldSnippetSources": {
    "workspace": "",
    "user": "",
    "vetur": ""
},
"prettier.useTabs": true,
"prettier.tabWidth": 4,
"git.autofetch": true,
"[json]": {
    "editor.defaultFormatter": "vscode.json-language-features"
},
"[javascript]": {
    "editor.defaultFormatter": "esbenp.prettier-vscode",
    "editor.formatOnSave": true
},
"[jsonc]": {
    "editor.defaultFormatter": "vscode.json-language-features"
}

eslintrc.js:

module.exports = {
    root: true,
    env: {
      node: true,
      browser: true,
    },
    rules: {
      'vue/component-name-in-template-casing': ['error', 'PascalCase'],
      'no-console': process.env.NODE_ENV === 'production' ? 'error' : 'off',
      'no-debugger': process.env.NODE_ENV === 'production' ? 'error' : 'off',
    },
    globals: {
      $nuxt: true,
    },
    parserOptions: {
      parser: 'babel-eslint',
    },
    extends: [
      'plugin:vue/recommended',
      'eslint:recommended',
      'prettier/vue',
      'plugin:prettier/recommended',
      'prettier',
    ],
  }},
  parserOptions: {
    parser: 'babel-eslint',
  },
  extends: [
    'plugin:vue/recommended',
    'eslint:recommended',
    'prettier/vue',
    'plugin:prettier/recommended',
    'prettier',
  ],
}

和编辑器配置

root = true

[*]
indent_style = space
indent_size = 2
end_of_line = lf
charset = utf-8
trim_trailing_whitespace = true
insert_final_newline = true

[*.md]
trim_trailing_whitespace = false

{
  "editor.formatOnSave": false,
  "editor.codeActionsOnSave": {
    "source.fixAll.eslint": false
  }
}

欢迎任何帮助！干杯

Answer 1

万一有人在寻找答案时遇到这个问题，我现在已经想通了。我读到 eslint 中的“扩展”部分应该放在最后，因此其中的任何规则都不会被覆盖。此外，我需要教 eslint 一些关于 vue 和 prettier 的技巧，这导致了这个 eslint 文件：

module.exports = {
root: true,
env: {
  node: true,
  browser: true,
},
rules: {
  'vue/component-name-in-template-casing': ['error', 'PascalCase'],
  'no-console': process.env.NODE_ENV === 'production' ? 'error' : 'off',
  'no-debugger': process.env.NODE_ENV === 'production' ? 'error' : 'off',
},
globals: {
  $nuxt: true,
},
parserOptions: {
  parser: 'babel-eslint',
},
extends: [
  'plugin:vue/recommended',
  'eslint:recommended',
  'prettier/vue',
  'plugin:prettier/recommended',
  'prettier',
  'plugin:vue/base',
],
}

现在我只需要告诉编辑器他可以在保存时更正代码 (.editorconfig):

  {
  "editor.formatOnSave": false,
  "editor.codeActionsOnSave": {
    "source.fixAll.eslint": true
  }
  }

我们开始吧。他们现在打得很好。我发现这些页面很有帮助：

Style Guide to find what's wrong

Code page to enable the given set of rules in ESLint

Answer 2

这对我来说是最好的方法。这也适用于热重载。

在nuxt.config.js中添加

buildModules: [
  ...,
  ['@nuxtjs/eslint-module', {fix: true}]
],

我无法在我的 vue / nuxt 项目中变得更漂亮和 eslint 很好地发挥

I can't get prettier and eslint to play nicely in my vue / nuxt project

eslint

vue.js

visual-studio-code

nuxt.js

prettier