mirror of
https://github.com/Moe-Sakura/frontend.git
synced 2026-03-15 04:53:18 +08:00
125 lines
3.0 KiB
Markdown
125 lines
3.0 KiB
Markdown
# ESLint 配置说明
|
||
|
||
## 📋 概述
|
||
|
||
本项目使用 ESLint 9 的 Flat Config 格式进行代码质量检查和格式化。
|
||
|
||
## 🔧 已安装的包
|
||
|
||
- `eslint` - ESLint 核心
|
||
- `@eslint/js` - JavaScript 推荐规则
|
||
- `typescript-eslint` - TypeScript 支持
|
||
- `@typescript-eslint/parser` - TypeScript 解析器
|
||
- `@typescript-eslint/eslint-plugin` - TypeScript 规则插件
|
||
- `eslint-plugin-vue` - Vue 3 支持
|
||
|
||
## 📝 配置文件
|
||
|
||
### `eslint.config.js`
|
||
|
||
使用 ESLint 9 的 Flat Config 格式，包含：
|
||
|
||
1. **忽略规则**
|
||
- `dist/` - 构建输出
|
||
- `node_modules/` - 依赖包
|
||
- `.pnpm-store/` - pnpm 缓存
|
||
- `public/` - 静态资源
|
||
- `*.config.js` 和 `*.config.ts` - 配置文件
|
||
- `.vscode/`, `.idea/` - 编辑器配置
|
||
- `coverage/` - 测试覆盖率
|
||
|
||
2. **基础规则**
|
||
- JavaScript 推荐规则
|
||
- TypeScript 推荐规则
|
||
- Vue 3 推荐规则
|
||
|
||
3. **自定义规则**
|
||
- TypeScript:
|
||
- `@typescript-eslint/no-explicit-any`: 警告（允许但提示）
|
||
- `@typescript-eslint/no-unused-vars`: 警告（忽略 `_` 前缀和 catch 错误）
|
||
- `@typescript-eslint/no-non-null-assertion`: 关闭（IndexedDB 需要）
|
||
|
||
- Vue:
|
||
- `vue/multi-word-component-names`: 关闭（允许单词组件名）
|
||
- `vue/no-v-html`: 警告
|
||
- `vue/max-attributes-per-line`: 关闭
|
||
|
||
- 通用:
|
||
- `no-console`: 关闭（开发时有用）
|
||
- `no-debugger`: 警告
|
||
- `prefer-const`: 警告
|
||
- `no-var`: 错误
|
||
- `semi`: 不使用分号
|
||
- `quotes`: 单引号
|
||
|
||
## 🚀 使用方法
|
||
|
||
### 检查代码
|
||
|
||
```bash
|
||
pnpm lint
|
||
```
|
||
|
||
### 自动修复
|
||
|
||
```bash
|
||
pnpm lint:fix
|
||
```
|
||
|
||
### 在编辑器中集成
|
||
|
||
#### VS Code
|
||
|
||
安装 ESLint 扩展：
|
||
```
|
||
dbaeumer.vscode-eslint
|
||
```
|
||
|
||
在 `.vscode/settings.json` 中添加：
|
||
```json
|
||
{
|
||
"eslint.validate": [
|
||
"javascript",
|
||
"typescript",
|
||
"vue"
|
||
],
|
||
"editor.codeActionsOnSave": {
|
||
"source.fixAll.eslint": true
|
||
}
|
||
}
|
||
```
|
||
|
||
## 📊 当前状态
|
||
|
||
✅ **0 个错误**
|
||
⚠️ **16 个警告**（主要是 `any` 类型使用）
|
||
|
||
### 警告分布
|
||
|
||
- `src/api/search.ts`: 9 个 `any` 类型警告
|
||
- `src/components/CommentsModal.vue`: 2 个 `any` 类型警告
|
||
- `src/components/StatsCorner.vue`: 1 个 `any` 类型警告
|
||
- `src/stores/search.ts`: 2 个 `any` 类型警告
|
||
- `src/types/artalk.d.ts`: 2 个 `any` 类型警告
|
||
|
||
## 🎯 改进建议
|
||
|
||
1. **类型定义**: 为 API 响应和第三方库创建更精确的类型定义
|
||
2. **类型断言**: 使用类型断言替代 `any`
|
||
3. **泛型**: 在可能的地方使用泛型提高类型安全性
|
||
|
||
## 🔄 迁移说明
|
||
|
||
- ✅ 已从 `.eslintrc.*` 迁移到 `eslint.config.js`
|
||
- ✅ 已删除 `.eslintignore`（使用 config 中的 `ignores`）
|
||
- ✅ 已更新 package.json 脚本（移除 `--ext` 参数）
|
||
- ✅ 已配置适合 Vue 3 + TypeScript 项目的规则
|
||
|
||
## 📚 参考资料
|
||
|
||
- [ESLint 官方文档](https://eslint.org/)
|
||
- [ESLint Flat Config 迁移指南](https://eslint.org/docs/latest/use/configure/migration-guide)
|
||
- [typescript-eslint 文档](https://typescript-eslint.io/)
|
||
- [eslint-plugin-vue 文档](https://eslint.vuejs.org/)
|
||
|