Vue.js 我能'；在我的vue/nuxt项目中，我不会变得更漂亮，也不会让eslint玩得更好

我一直对ESLint和prettier有意见。现在已经发生了好几次了，因为它们有冲突的规则，其中一个的保存时自动格式化会在另一个上抛出错误

目前我的问题是这一行，它已由ESLint格式化：

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

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

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

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

欢迎任何帮助！

---

干杯

如果有人在这个问题上跌跌撞撞地寻找答案，我现在已经找到了答案。我读到eslint中的“extends”部分应该是最后一个，这样就不会覆盖其中的任何规则。此外，我还需要教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）：

我们开始吧。他们现在玩得很好。我发现这些页面帮了大忙：

---

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

在

numxt.config.js中添加

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

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

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',
],
}

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