ESLint和Prettier在NuxtJS上发生冲突

Question

当我创建一个新的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并清除缓存……重新安装它。

- Ewilan R.

Answer 1

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

VSCode 扩展

• VSCode 上的 ESLint
• VSCode 上的 Prettier

.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冲突。这不是唯一的解决方案，只是其中一种。如果您有其他解决方案，请告诉我，我非常感兴趣。

- Ewilan R.

Answer 2

最适配Nuxtjs (2022)的.eslintrc.js

module.exports = {
  env: {
    browser: true,
    es2021: true,
  },
  extends: [
    'plugin:vue/essential',
    '@nuxtjs',
    'plugin:prettier/recommended',
    'prettier',
  ],
  parserOptions: {
    ecmaVersion: 12,
    parser: '@babel/eslint-parser',
    sourceType: 'module',
  },
  plugins: ['vue'],
  rules: {
    'vue/multi-word-component-names': 'warn',
    'no-unused-vars': 'warn',
    'space-in-parens': 'off',
    'computed-property-spacing': 'off',
    'max-len': 'warn',
  },
}

- Masoud

---

无法工作 - Sinneren

Answer 3

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

根据eslint-config-prettier文档：

然后，在您的.eslintrc.*文件的"extends"数组中添加"prettier"。确保将其放在最后，以便它有机会覆盖其他配置。

而eslint-config-prettier是由eslint-plugin-prettier使用的：

该插件附带一个plugin:prettier/recommended配置，一次设置了插件和eslint-config-prettier。

- Allan Chain

---

谢谢，我尝试了，但它不起作用，我有同样的问题。我找到的唯一解决方案并不是真正正确的，我在 .eslintrc.js 中添加了 rules: {'prettier/prettier': ['error', { printWidth: 1000 }],}这个解决方案可以工作，但它会防止 prettier 对行长度进行限制。 - Ewilan R.