NuxtJS上的ESLint&amp；更漂亮的冲突 [英] ESLint & Prettier conflict on NuxtJS

问题描述

当我创建新的Nuxt.js项目时，我在使用ESLint和更漂亮时遇到了非常麻烦的问题。

如果我保存在此.vue文件上，SPECTER会尝试修复它，但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: {},
}

我的.paytierrc

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

我的settings.json

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

我不修改生成的ESLint和更漂亮的文件。

我想问题出在我的VS代码设置、ESLint设置或更漂亮的设置上。我尝试了一些解决方案，但都不管用。

编辑

如果您遇到此问题，我建议您卸载Visual Studio代码并缓存.若要使用全新安装重新安装它，请执行以下操作。

推荐答案

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

VSCode扩展

• ESLint on VSCode
• Prettier on 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,
  // ...
}

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代码设置与一些ESLint冲突时会出现问题。这不是解决方案，这只是一个解决方案。如果你还有其他的建议，我真的很感兴趣。

这篇关于NuxtJS上的ESLint&amp；更漂亮的冲突的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！