时间戳

首页 > 解决方案 > NuxtJS 上的 ESLint 和 Prettier 冲突

visual-studio-code - 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
}

我的 settings.json

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

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

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

编辑

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

标签： visual-studio-codeeslintprettiernuxtjs

解决方案

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

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 代码中

{
  "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 以重新加载规则或重新加载您的窗口

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

推荐阅读