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",
  },
};
相关推荐
字节颤抖4 天前
vite+vue3开发uni-app时低版本浏览器不支持es6语法的问题排坑笔记
前端·uni-app·es6·vue3·vite·babel·兼容
engchina5 天前
使用 Vite + React 19 集成 Tailwind CSS 与 shadcn/ui 组件库完整指南
css·react.js·ui·vite·tailwind·react 19·shadcn
minko6 天前
这给我干哪儿来了,这还是react-router吗
react.js·vite
cs_dn_Jie11 天前
uniapp + vite + 使用多个 ui 库
vue.js·ui·uni-app·vite
gqkmiss13 天前
React Vite 项目增加 eslint 和 prettier
javascript·react.js·ecmascript·eslint·prettier
PBitW15 天前
vue3+vite+eslint|prettier+elementplus+国际化+axios封装+pinia
vue.js·vite·eslint·prettier·vue3+vite·eslint+prettier
程序猿000001号19 天前
Vite:现代前端开发的利器
前端·vite
漂流瓶jz1 个月前
谈一谈前端构建工具的本地代理配置(Webpack与Vite)
前端·webpack·node.js·vite·proxy·代理
柠檬豆腐脑1 个月前
前端构建工具的发展和现状:Webpack、Vite和其他
前端·webpack·vite
奇舞精选2 个月前
探索ESLint V8 到 V9
前端框架·eslint