SearcjGal-frontend/.eslintrc.md

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: 单引号

🚀 使用方法

检查代码

pnpm lint

自动修复

pnpm lint:fix

在编辑器中集成

VS Code

安装 ESLint 扩展：

dbaeumer.vscode-eslint

在 .vscode/settings.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 官方文档
• ESLint Flat Config 迁移指南
• typescript-eslint 文档
• eslint-plugin-vue 文档