ESLint + Prettier 配置说明

✅ 已安装的包

{
  "devDependencies": {
    "eslint": "^9.39.2",
    "eslint-plugin-vue": "^10.7.0",
    "eslint-config-prettier": "^10.1.8",
    "@vue/eslint-config-prettier": "^10.2.0",
    "prettier": "^3.8.1",
    "prettier-plugin-tailwindcss": "^0.7.2"
  }
}

📁 配置文件

ESLint 配置

文件: eslint.config.js (ESLint 9 扁平配置格式)

核心规则:

• Vue 3 规则（组件命名、props 检查、模板规范）
• JavaScript 规则（no-var、prefer-const、箭头函数）
• 代码质量（===、错误处理、安全）
• 性能优化（避免循环中的函数、禁止 eval）

忽略文件:

ignores: [
  'node_modules/**',
  'dist/**',
  'dist.*',
  'build/**',
  '*.min.js',
  'public/**',
  'VITE*.md',
  '.cursor/**',
  '.history/**',
  'coverage/**',
  '.nyc_output/**',
  'src/auto-imports.d.ts',
  'src/components.d.ts',
  'mlaj/**',
]

Prettier 配置

文件: .prettierrc

核心配置:

{
  "semi": false, // 不使用分号
  "singleQuote": true, // 使用单引号
  "trailingComma": "es5", // ES5 尾部逗号
  "printWidth": 100, // 每行最大 100 字符
  "tabWidth": 2, // 2 空格缩进
  "useTabs": false, // 使用空格而非 tab
  "endOfLine": "lf" // LF 换行符
}

忽略文件:

• node_modules/
• dist/
• build/
• public/
• coverage/
• *.min.js
• package-lock.json
• pnpm-lock.yaml

VS Code 配置

文件: .vscode/settings.json

自动格式化:

{
  "editor.formatOnSave": true,
  "editor.codeActionsOnSave": {
    "source.fixAll.eslint": "explicit"
  },
  "editor.defaultFormatter": "esbenp.prettier-vscode"
}

推荐扩展 (.vscode/extensions.json):

• Vue.volar - Vue 3 语言支持
• dbaeumer.vscode-eslint - ESLint 集成
• esbenp.prettier-vscode - Prettier 格式化
• bradlc.vscode-tailwindcss - TailwindCSS 智能提示
• formulahendry.auto-rename-tag - 自动重命名标签
• christian-kohler.path-intellisense - 路径智能提示

🚀 使用命令

Lint（代码检查）

# 检查但不修复
pnpm lint:check

# 检查并自动修复
pnpm lint

Format（代码格式化）

# 检查格式（不修改文件）
pnpm format:check

# 格式化代码
pnpm format

组合使用

# 先格式化，再 lint
pnpm format && pnpm lint

# 提交前检查
pnpm format:check && pnpm lint:check && pnpm test

📋 ESLint 核心规则

Vue 3 规则

规则	级别	说明
vue/multi-word-component-names	off	允许单词组件名
vue/no-v-html	warn	警告使用 v-html
vue/require-prop-types	error	props 必须有类型
vue/no-mutating-props	error	禁止直接修改 props
vue/component-definition-name-casing	error	组件名 PascalCase

JavaScript 规则

规则	级别	说明
no-console	warn	禁止 console.log（允许 warn/error）
no-debugger	error	禁止 debugger
no-var	error	禁止 var，使用 const/let
prefer-const	error	优先使用 const
eqeqeq	error	强制使用 ===
no-eval	error	禁止 eval
no-throw-literal	error	throw 必须是 Error 对象

🔧 常见问题

1. ESLint 报错但不显示具体规则

解决: 确保 eslint.config.js 配置正确

2. Prettier 与 ESLint 冲突

解决: eslint-config-prettier 已禁用所有与 Prettier 冲突的规则

3. VS Code 不自动格式化

解决:

1. 确保安装了 Prettier - Code formatter 扩展
2. 检查 .vscode/settings.json 中的配置
3. 重启 VS Code

4. 忽略特定文件

ESLint 9: 在 eslint.config.js 的 ignores 中添加

Prettier: 在 .prettierignore 中添加

📝 提交前检查

在提交代码前，请运行：

# 1. 格式化代码
pnpm format

# 2. 检查代码规范
pnpm lint:check

# 3. 运行测试
pnpm test

# 4. 检查测试覆盖率
pnpm test:coverage

🎯 最佳实践

1. 开发流程

# 1. 编写代码
# 2. 保存时自动格式化（VS Code 自动）
# 3. 手动运行 lint 检查
pnpm lint:check

# 4. 修复错误
pnpm lint

# 5. 提交代码
git add .
git commit -m "feat: xxx"

2. Git Hooks（可选）

使用 husky 和 lint-staged 自动化：

# 安装
pnpm add -D husky lint-staged

# 配置
npx husky install
npx husky add .husky/pre-commit "pnpm lint-staged"

package.json:

{
  "lint-staged": {
    "*.{js,vue}": ["eslint --fix", "prettier --write"]
  }
}

3. CI/CD 集成

在 CI 中运行：

# .github/workflows/ci.yml
- name: Lint
  run: pnpm lint:check

- name: Format check
  run: pnpm format:check

- name: Test
  run: pnpm test

📊 规则优先级

ESLint 规则 > Prettier 规则

1. Prettier 负责格式化（空格、引号、换行）
2. ESLint 负责代码质量（未使用变量、潜在错误）
3. eslint-config-prettier 禁用冲突的 ESLint 规则

🔄 迁移指南

从旧版 ESLint 迁移

如果你之前使用 .eslintrc.js：

# 1. 删除旧配置
rm .eslintrc.js

# 2. 使用新的 eslint.config.js（已配置）
# 3. 删除 .eslintignore（ESLint 9 不再使用）

从旧版 Prettier 迁移

如果你之前使用 .prettierrc.js：

# 1. 转换为 .prettierrc（JSON 格式）
# 2. 确保 prettier-plugin-tailwindcss 已安装

🚨 注意事项

1. 不要修改 node_modules/ 中的文件 - ESLint 会忽略它们
2. 不要提交格式化后的构建产物 - dist/、build/ 已被忽略
3. 团队统一配置 - 确保所有成员使用相同的配置文件
4. 定期更新依赖 - ESLint 和 Prettier 会定期更新

📚 参考资源

• ESLint 9 文档
• Vue 3 官方 ESLint 插件
• Prettier 文档
• Prettier TailwindCSS 插件

🎉 完成

你的项目现在已经配置了完整的 ESLint 和 Prettier！

下一步:

• 添加 Husky + lint-staged（Git Hooks）
• 添加 Vitest Coverage（测试覆盖率）
• 添加 Playwright（E2E 测试）