文章目录
- 前言
- ✅ 1. ESLint 限制
- 🔧 配置位置：
- ✅ 启用了哪些规则（核心）：
- 📦 使用的插件和标准：
- ✅ 2. TSC 编译限制
- 关键选项：
- ✅ 3. Git Hook 校验工具链
- 配置例子（`package.json`）：
- ✅ 总结
前言
Vue 3 官方项目对 eslint 和 tsc 的严格限制，主要是通过 集中统一的配置文件 + Git Hook 工具链（如 lint-staged、simple-git-hooks、husky） 实现的，具体如下：
✅ 1. ESLint 限制
🔧 配置位置：
.eslintrc.cjs
✅ 启用了哪些规则（核心）：
rules: {'no-console': ['error', { allow: ['warn', 'error', 'info'] }],'no-debugger': 'error',...
}
解释：
- 禁止所有
console.*，仅保留warn,error,info - 提交前如果不符合规则，Git 会拒绝提交（通过 pre-commit hook）
📦 使用的插件和标准：
eslint
eslint-plugin-vue
@vue/eslint-config-prettier
@vue/eslint-config-typescript
✅ 2. TSC 编译限制
Vue 项目结构严格使用了：
tsconfig.json
tsconfig.base.json
tsconfig.config.json
关键选项：
{"compilerOptions": {"strict": true,"declaration": true,"isolatedModules": true,"noImplicitAny": true,"noUnusedLocals": true,"noEmitOnError": true}
}
isolatedModules: true：必须为所有export function添加返回类型（你遇到的）noEmitOnError: true：类型报错时拒绝生成.d.ts文件declaration: true：生成.d.ts，用于包发布和 IDE 智能提示
✅ 3. Git Hook 校验工具链
官方用的通常是：
simple-git-hooks
lint-staged
配置例子（package.json）：
"simple-git-hooks": {"pre-commit": "lint-staged"
},
"lint-staged": {"*.{ts,js,json}": ["eslint --fix","prettier --write"]
}
🔁 你执行 git commit 时，它自动执行：
eslint --fixprettier --write- 拒绝不符合标准的代码提交（你看到的就是这个）
✅ 总结
| 限制机制 | 实现方式 | 示例 |
|---|---|---|
| ESLint | .eslintrc.cjs 中的规则设置 | no-console, no-debugger 等 |
| TypeScript | tsconfig.json 严格模式 | isolatedModules, noEmitOnError |
| Git 钩子 | simple-git-hooks + lint-staged | 阻止格式错误代码提交 |
