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",
  },
};
相关推荐
WujieLi2 天前
初识 Vite+:一文了解 Rust 驱动的新一代前端工具链
javascript·rust·vite
却尘2 天前
Vite 炸裂快,Webpack 稳如山,Turbopack 想两头要:谁才是下一个王?
前端·面试·vite
NicolasCage2 天前
Eslint v9 扁平化配置学习
前端·eslint
东东2333 天前
前端规范工具之husky与lint-staged
前端·javascript·eslint
萌萌哒草头将军3 天前
尤雨溪宣布 oxfmt 即将发布!比 Prettier 快45倍 🚀🚀🚀
前端·webpack·vite
晓得迷路了3 天前
栗子前端技术周刊第 102 期 - Vite+ 正式发布、React Native 0.82、Nitro v3 alpha 版...
前端·javascript·vite
jason_yang6 天前
vue3中使用auto-import与cdn插件冲突问题
vue.js·vite·cdn
进阶的鱼6 天前
React+ts+vite脚手架搭建(五)【规范篇】
前端·react.js·vite
午安~婉7 天前
ESLint
前端·eslint·检查
啥也不会的码农7 天前
Eslint9发布都一年了,你确定还不了解下?
前端·eslint