vite5+eslint踩坑

Configure File

使用 eslintrc.cjs 替代 eslintrc.js

由于 vite 中 package.json 声明了 "type": "module"，即表明项目下所有 js 遵循 ES Module 模块规范，那么你的 eslintrc.js 要求ESM方式配置，而不是下面的CommonJs

js 复制代码

module.exports = {
  ...
}

如果可以，你可以修改为ESM 规范，但大多数情况你的eslint依赖遵循CommonJs，所以最佳处理：使用 eslintrc.cjs 替代 eslintrc.js，明确告知此文件遵循commonJs模块规范

vite-plugin-eslint

使用 vite-plugin-eslint 替代 @rollup/plugin-eslint

即使 vite 支持 rollup 插件，但部分vite特性的规则可能导致 rollup 插件无法理解；

如项目中添加windiCSS 支持，会有如下代码

js 复制代码

import "virtual:windi.css";

此时 @rollup/plugin-eslint 报错：无法找到No configuration file in @windi.css

因为 virtual: 是vite规定的虚拟模块规则，@rollup/plugin-eslint 没有对此进行正确处理，采用专为 vite 支持的 vite-plugin-eslint 即可解决

GitHub - gxmari007/vite-plugin-eslint: 🚨 ESLint plugin for vite

Vue3 setup

在SFC的vue3单文件组件组件中，使用 setup 语法糖编写代码：

vue 复制代码

<script setup>
  ...
</script>

eslint报错：

css 复制代码

[plugin:vite-plugin-eslint] 
error  Parsing error: This experimental syntax requires enabling one of the following parser plugin(s): 
"jsx", "flow", "typescript". (1:0)

eslint 默认检查规则不包含 Vue3 SFC 单文件组件语法，无法对.vue文件进行检验

为你的 eslint 新增 extend：@vitejs/plugin-vue

js 复制代码

extends: [
  "eslint:recommended",
  "plugin:vue/vue3-recommended", // 此处使用推荐rules,还可选 plugin:vue/vue3-essential
  "plugin:prettier/recommended",
],

使用说明：User Guide | eslint-plugin-vue

eslint parser 冲突

如果你使用 eslint-plugin-vue，但你的 eslintrc.js 中自定义了eslint parser

js 复制代码

module.exports = {
  root: true,
  parser: "@babel/eslint-parser", // 指定了 parser
  parserOptions: {
    ...
  }
}

这依旧会报错，因为你的parser配置覆盖了eslint-plugin-vue 的parser配置：@typescript-eslint/parser

你需要调整为

js 复制代码

parserOptions: {
  parser: "@babel/eslint-parser", // 在parserOptions内指定 parser
},

更多细节详见 User Guide | eslint-plugin-vue How to use a custom parser? 章节

示例

最后贴下我的 eslintrc.cjs 配置供参考，都是基础规则支持，可根据实际改用其它eslint extend或自定义 rules

js 复制代码

module.exports = {
  root: true,
  parserOptions: {
    parser: "@babel/eslint-parser",
    ecmaVersion: 2019,
    sourceType: "module",
    ecmaFeatures: {
      globalReturn: false,
      impliedStrict: true,
      jsx: true,
    },
    requireConfigFile: false,
    allowImportExportEverywhere: false,
  },
  env: {
    browser: true,
    node: true,
    commonjs: true,
    es6: true,
    jquery: true,
  },
  extends: [
    "eslint:recommended",
    "plugin:vue/vue3-recommended",
    "plugin:prettier/recommended",
  ],
  rules: {
    "prettier/prettier": "warn",
  },
};