我无法在我的 vue / nuxt 项目中变得更漂亮和更漂亮

Question

我一直有 ESLint 和更漂亮的问题。 现在发生了好几次，因为它们有冲突的规则，并且保存一个时的自动格式化会在另一个上抛出错误。

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

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

然后更漂亮抛出这个错误：

  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 将在保存时再次更改。 如何将它们配置为具有一致的、不冲突的规则？ 我经历了一些教程，目前我的配置文件看起来像这样

设置.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

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

在nuxt.config.js添加

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

Answer 2

万一有人偶然发现这个寻找答案，我现在已经想通了。 我读到 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
  }
  }

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

风格指南找出问题所在

在 ESLint 中启用给定规则集的代码页