# vite集成eslint

# 为什么要集成

  • 统一代码风格
  • 提前发现潜在问题
  • 提升团队协作可读性

# 安装依赖

以 JS/TS 通用场景为例:

yarn add -D eslint
1

初始化配置:

npx eslint --init
1

# 增加 lint 脚本

package.json

{
  "scripts": {
    "lint": "eslint .",
    "lint:fix": "eslint . --fix"
  }
}
1
2
3
4
5
6

# 在开发中实时提示(可选)

安装插件:

yarn add -D vite-plugin-eslint
1

vite.config.js

import { defineConfig } from "vite";
import eslint from "vite-plugin-eslint";

export default defineConfig({
  plugins: [eslint()],
});
1
2
3
4
5
6

这样在 vite dev 过程中就能看到 ESLint 提示。

# 忽略文件

.eslintignore

dist
node_modules
1
2

# 小结

Vite 集成 ESLint 非常轻量。
建议最少做到两件事:lint 脚本 + 提交前自动检查(可配 husky/lint-staged)。