vite+vue3+eslint+prettier配置后eslint不生效的解决办法

在配置 Vite、Vue 3、ESLint 和 Prettier 后，如果发现 ESLint 不生效，通常是因为配置不正确、插件冲突或 ESLint 规则未正确应用导致的。下面是几个常见的解决办法，可以帮助你排查并解决问题。

1. 确保依赖安装正确

首先，确保所有相关的依赖已经正确安装。你可以检查项目的 package.json 中是否包含以下依赖：

{
  "devDependencies": {
    "vite": "^4.x.x",
    "eslint": "^8.x.x",
    "eslint-plugin-vue": "^9.x.x",
    "prettier": "^2.x.x",
    "eslint-config-prettier": "^9.x.x",
    "eslint-plugin-prettier": "^4.x.x",
    "@vue/eslint-config-prettier": "^9.x.x",
    "@vitejs/plugin-vue": "^4.x.x"
  }
}

确保安装以下依赖：

npm install eslint eslint-plugin-vue prettier eslint-config-prettier eslint-plugin-prettier @vue/eslint-config-prettier --save-dev

2. 配置 ESLint

在项目根目录下，确保存在 .eslintrc.js（或 .eslintrc.json 等）配置文件，并正确配置 ESLint。以下是一个基本的 .eslintrc.js 配置，适用于 Vue 3 + ESLint + Prettier 项目：

module.exports = {
  root: true,
  env: {
    node: true,
    browser: true,
    es2021: true
  },
  extends: [
    'eslint:recommended',
    'plugin:vue/vue3-recommended',
    'plugin:prettier/recommended'
  ],
  parserOptions: {
    ecmaVersion: 2021,
    sourceType: 'module'
  },
  rules: {
    // 在这里添加你的 ESLint 规则
    'vue/multi-word-component-names': 'off',
    'prettier/prettier': ['error', { singleQuote: true, semi: false }]
  }
}

• extends: 这里引入了 eslint:recommended、plugin:vue/vue3-recommended、plugin:prettier/recommended 以支持 Vue 3 相关的规则和 Prettier 的格式化规则。
• rules: 可以根据需求调整 ESLint 的具体规则。

3. 配置 Prettier

同样，在项目根目录下创建一个 .prettierrc 文件来配置 Prettier。确保 Prettier 的配置与 ESLint 一致：

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

4. 配置 Vite 插件

为了确保 ESLint 在开发时能够及时生效，可以在 Vite 配置中引入 vite-plugin-eslint 插件。确保 vite.config.js 中正确配置：

import { defineConfig } from 'vite'
import vue from '@vitejs/plugin-vue'
import eslintPlugin from 'vite-plugin-eslint'

export default defineConfig({
  plugins: [
    vue(),
    eslintPlugin({
      cache: false // 禁用缓存，以确保每次修改后都能及时生效
    })
  ]
})

5. 编辑器集成

确保你的编辑器正确配置了 ESLint 和 Prettier 插件：

• VS Code 用户需要确保安装以下扩展：

  • ESLint
  • Prettier - Code formatter

• 在 VS Code 设置中，启用 ESLint 自动修复：

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

6. 检查 ESLint 是否正确运行

运行以下命令，检查 ESLint 是否在项目中正常工作：

npx eslint src --ext .js,.vue

如果 ESLint 生效，会输出警告或错误。如果没有输出，可以尝试通过 --debug 选项进一步排查：

npx eslint src --ext .js,.vue --debug

7. 检查文件忽略配置

检查项目根目录中的 .eslintignore 文件，确保你没有无意中忽略了某些文件或文件夹。如果文件或文件夹被忽略，ESLint 不会对它们生效。

8. 修复依赖冲突

eslint-plugin-prettier 和 eslint-config-prettier 可能会引发冲突。eslint-plugin-prettier 将 Prettier 规则作为 ESLint 规则引入，而 eslint-config-prettier 则禁用 ESLint 中与 Prettier 冲突的规则。

如果 Prettier 和 ESLint 冲突较多，可以考虑仅使用 eslint-config-prettier，这样 ESLint 的规则会与 Prettier 保持一致。

总结

通过以上步骤，你可以排查 Vite + Vue 3 + ESLint + Prettier 配置后 ESLint 不生效的问题。确保依赖安装正确，ESLint 配置文件和编辑器设置正确，并检查是否存在依赖冲突或其他配置问题。