vite5+eslint踩坑

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",
  },
};
相关推荐
namehu8 小时前
从 ESLint 到 Oxlint:一次提速百倍的前端 Lint 工具链升级实战
前端·javascript·eslint
做梦都在学习前端3 天前
发布一个monaco-editor 汉化包
前端·npm·vite
前端进阶者3 天前
vite调试node_modules下面插件
前端·vite
天天鸭3 天前
写个vite插件自动处理系统权限,降低99%重复工作
前端·javascript·vite
charlee445 天前
nginx部署发布Vite项目
nginx·性能优化·https·部署·vite
微风好飞行16 天前
Vite 打包 vscode 扩展遇到的模块问题
javascript·vscode·vite
风吹一夏v19 天前
webpack到vite的改造之路
webpack·vue·vite
EndingCoder19 天前
性能优化中的工程化实践:从 Vite 到 Webpack 的最佳配置方案
webpack·性能优化·vite·devops·工程化实践
19组清风19 天前
深入解析 Vite 代码分割原理:从依赖入口点算法到动态导入优化
前端·vite·rollup.js
whyfail19 天前
Vite 的“心脏移植”:Rolldown
前端·vite