NuxtJS 上的 ESLint 和 Prettier 冲突

当我创建一个新的 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
}

我的设置.json

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

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

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

EDIT

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

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

VSCode 扩展

• VSCode 上的 ESLint https://marketplace.visualstudio.com/items?itemName=dbaeumer.vscode-eslint
• VSCode 上更漂亮 https://marketplace.visualstudio.com/items?itemName=esbenp.prettier-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'
  ]
}

设置.json进入 VS 代码

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

包.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 以重新加载规则 or 重新加载你的窗口

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