Vue3源码学习-提交限制

---

前言

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 时，它自动执行：

1. eslint --fix
2. prettier --write
3. 拒绝不符合标准的代码提交（你看到的就是这个）

---

✅ 总结

限制机制	实现方式	示例
ESLint	.eslintrc.cjs 中的规则设置	no-console, no-debugger 等
TypeScript	tsconfig.json 严格模式	isolatedModules, noEmitOnError
Git 钩子	simple-git-hooks + lint-staged	阻止格式错误代码提交