NuxtJS 上的 ESLint 和 Prettier 冲突答案

【问题标题】：ESLint & Prettier conflict on NuxtJSNuxtJS 上的 ESLint 和 Prettier 冲突
【发布时间】：2021-08-21 07:01:12
【问题描述】：

当我创建一个新的 Nuxt.js 项目时，我在使用 ESLint 和 Prettier 时遇到了一个非常令人筋疲力尽的问题。

如果我保存在这个.vue 文件上，Prettier 会尝试修复它，但 ESLint 会阻止它这样做。所以，我无法消除这方面的错误。

我的 eslintrc.js

module.exports = {
  root: true,
  env: {
    browser: true,
    node: true,
  },
  parserOptions: {
    parser: 'babel-eslint',
  },
  extends: [
    '@nuxtjs',
    'plugin:prettier/recommended',
    'plugin:nuxt/recommended',
  ],
  plugins: [],
  // add your custom rules here
  rules: {},
}

我的 .prettierrc

{
  "semi": false,
  "singleQuote": true
}

我的 settings.json

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

我不修改生成的 ESLint 和 Prettier 文件。

我想问题出在我的 VS Code 设置、ESLint 设置或 Prettier 上。我尝试了一些解决方案，但没有任何效果。

编辑

如果您遇到此问题，我建议您卸载 Visual Studio Code 并缓存...以全新安装重新安装。

【问题讨论】：

标签： visual-studio-code eslint prettier nuxtjs

【解决方案1】：

ESLint 规则有时与 prettier 规则冲突。尝试在 .eslintrc.js 中的 'plugin:nuxt/recommended' 之后移动 'plugin:prettier/recommended' 以覆盖 nuxt 提供的 ESLint 规则。

根据eslint-config-prettier's doc：

然后，将“prettier”添加到 .eslintrc.* 文件中的“extends”数组中。确保把它放在最后，这样它就有机会覆盖其他配置。

而 eslint-config-prettier 被 eslint-plugin-prettier 使用：

此插件附带一个 plugin:prettier/recommended 配置，可以一次性设置插件和 eslint-config-prettier。

【讨论】：

谢谢，我试了一下，还是不行，我也遇到了同样的问题。我发现的唯一解决方案并不正确，我在 .eslintrc.js 中添加了rules: {'prettier/prettier': ['error', { printWidth: 1000 }],} 这可行，但它可以防止更漂亮地限制行长。

【解决方案2】：

我找到了一个解决方案，虽然不完美，但很有效：

VSCode 扩展

.eslintrc.js

module.exports = {
  root: true,
  env: {
    browser: true,
    node: true
  },
  extends: [
    '@nuxtjs',
    'plugin:nuxt/recommended',
    'eslint:recommended' // <- add this line
    // 'plugin:prettier/recommended', <- remove this line
  ],
  parserOptions: {
    parser: 'babel-eslint'
  },
  rules: {},
  plugins: [
    'prettier'
  ]
}

settings.json 进入 VS Code

{
  "editor.defaultFormatter": "esbenp.prettier-vscode",
  "eslint.probe": [
    "javascript",
    "javascriptreact",
    "vue"
  ],
  "editor.formatOnSave": false,
  "editor.codeActionsOnSave": [
    "source.formatDocument",
    "source.fixAll.eslint"
  ],
  "vetur.validation.template": false,
  // ...
}

package.json

{
    // ...
    "devDependencies": {
      "@nuxtjs/eslint-config": "^6.0.0",
      "@nuxtjs/eslint-module": "^3.0.2",
      "@nuxtjs/tailwindcss": "^4.0.1",
      "babel-eslint": "^10.1.0",
      "eslint": "^7.28.0",
      "eslint-config-prettier": "^8.1.0",
      "eslint-plugin-nuxt": "^2.0.0",
      "eslint-plugin-prettier": "^3.3.1",
      "eslint-plugin-vue": "^7.7.0",
      "postcss": "^8.2.8",
      "prettier": "^2.2.1"
    }
}

关闭并再次打开 VS Code 以重新加载规则或重新加载您的窗口

我认为问题在于 VS Code 设置与 Prettier 的一些 ESLint 冲突。这不是解决方案，它只是一个解决方案。如果您还有其他要提供的，我真的很感兴趣。

【讨论】：