🎉
版本：1.0 | 专为 JavaScript/TypeScript 开发者打造
—— 让规范成为本能，让代码自带美感
📌 使用说明：
本手册适合打印成 A5 小册子、贴在工位旁，或导入 Anki 进行记忆训练。
共分五大篇章：心法口诀、避坑指南、工具配置、每日自查、成长路径。
🧘♂️ 第一章：心法口诀（背下来，写出来）
| 心法 | 口诀 |
|---|---|
🚫 不用 var | “var 已淘汰，let/const 才现代” |
| ✅ 严格相等 | “== 会骗人，=== 才安稳” |
| 🔒 类型安全 | “能写类型就不猜，any 是漏洞” |
| 🧱 块级作用域 | “大括号内是结界，外面看不见” |
| 🕹 异步处理 | “Promise 嵌套深，async/await 平又稳” |
| 🧩 解构赋值 | “取你需要的，别拿全家桶” |
| 📦 模块导入 | “先内置，再三方，最后本地路径” |
| 💬 提交信息 | “feat 新功能，fix 修 Bug，docs 改文档” |
🧠 记忆建议：每天早会默念一遍，30 天后自动入脑。
⚠️ 第二章：避坑指南（血泪换来的经验）
❌ 坑 #1：滥用 any
// 错误示范
let result: any = api.getData();
console.log(result.username.toUpperCase()); // ❌ 运行时报错：undefined is not a function
✅ 正确做法：
interface User {
username: string;
}
const result: User = api.getData(); // 编译时报错 → 提前发现！
🎯 心法： “any 是关闭了 TypeScript 的雷达”
❌ 坑 #2：浮点数计算不精确
0.1 + 0.2 === 0.3; // false!
✅ 解决方案：
// 方法 1：toFixed 后转数字
parseFloat((0.1 + 0.2).toFixed(10)) === 0.3;
// 方法 2：使用库（如 decimal.js）
🎯 心法： “金钱计算不用 float，精度问题要警惕”
❌ 坑 #3：this 指向丢失
const user = {
name: "Alice",
greet: function() {
setTimeout(function() {
console.log(this.name); // undefined！
}, 100);
}
};
✅ 正确做法：
greet: function() {
setTimeout(() => {
console.log(this.name); // "Alice"
}, 100);
}
🎯 心法： “普通函数看调用，箭头函数看外层”
❌ 坑 #4：循环中使用 var
for (var i = 0; i < 3; i++) {
setTimeout(() => console.log(i), 100); // 输出：3, 3, 3
}
✅ 正确做法：
for (let i = 0; i < 3; i++) {
setTimeout(() => console.log(i), 100); // 输出：0, 1, 2
}
🎯 心法： “用 let，闭包才正常”
⚙️ 第三章：工具配置（让环境替你记住）
✅ VS Code 推荐设置（.vscode/settings.json）
{
"editor.formatOnSave": true,
"editor.codeActionsOnSave": {
"source.fixAll.eslint": true
},
"files.autoSave": "onFocusChange",
"typescript.validate.enable": true
}
👉 效果：保存即格式化 + 自动修复 ESLint 问题！
✅ Git 提交拦截（Husky + Lint-Staged）
# 初始化
npx husky-init
npm install --save-dev lint-staged
// package.json
"lint-staged": {
"*.{js,ts,tsx}": [
"eslint --fix",
"prettier --write"
]
}
👉 效果：写 var 或 any？git commit 直接被拒！
✅ ESLint + Prettier 快速集成
// .eslintrc.js
module.exports = {
env: { browser: true, es2021: true },
extends: [
'eslint:recommended',
'plugin:@typescript-eslint/recommended',
'prettier'
],
parser: '@typescript-eslint/parser',
rules: {
'@typescript-eslint/no-explicit-any': 'error',
'@typescript-eslint/explicit-function-return-type': 'warn',
'eqeqeq': ['error', 'always']
}
};
✅ 第四章：每日自查清单（Code Review 前必看）
每次提交代码前，默念并勾选：
- 没有用
var，全部替换为let/const - 没有随意使用
any，必要时用unknown - 函数有明确返回类型（尤其是公共 API）
- 使用
===而不是== - 对象解构只取所需字段
- 异步函数用
async/await包裹try/catch - 提交信息符合格式：
feat(login): add social buttons - 代码已通过
npm run lint和npm run test
📌 建议：将此清单设为 PR 模板的一部分。
🌱 第五章：成长路径（从新手到大师）
| 阶段 | 行为特征 | 达标标志 |
|---|---|---|
| 🟢 入门 | 知道规则但常忘 | 能写出无 ESLint 报警的代码 |
| 🟡 成长 | 主动查文档 | 能指出队友的类型错误 |
| 🔵 熟练 | 写代码前先想类型 | 接口设计清晰，复用性强 |
| 🟣 大师 | 规范即本能 | 看到 var 觉得“丑”，想改掉 |
🎯 终极目标：
“你不是在遵守规范，你是在守护代码的尊严。”
📎 附录：可操作资源包
你可以立即使用的资源：
1. 📄 PDF 下载版
👉 [点击生成《前端开发心法手册》PDF]（当前为文本版，可复制保存为 .pdf）
2. 🧩 Anki 记忆卡片模板（建议导入）
| 问题 | 答案 |
|---|---|
为什么不能用 var？ | 因为它没有块级作用域，容易导致变量提升和闭包问题 |
| 如何正确判断数组？ | 使用 Array.isArray(arr)，而不是 typeof arr === 'object' |
| 提交信息应该以什么开头？ | feat, fix, docs, style, refactor, perf, test, chore |
工具推荐：Anki（记忆神器）
3. 📁 项目初始化脚本（一键配置）
# 初始化项目规范工具链
npm init -y
npm install --save-dev eslint @typescript-eslint/parser @typescript-eslint/eslint-plugin prettier eslint-config-prettier
npx husky-init
npm pkg set "lint-staged.*[].0=eslint" "lint-staged.*[].1=prettier --write"
💌 结语
“优秀的程序员不是不会犯错，而是建立了不让错误发生的系统。”
这本小册子不是为了约束你，而是为了解放你——
当你不再纠结“该怎么写”，你就能专注于“做什么更有价值”。
📥 下一步建议：
我可以为你：
- 生成一份 PDF 版《前端开发心法手册》 （带排版、封面、二维码链接）
- 创建一个 GitHub 模板仓库，包含所有配置文件
- 定制你的 团队专属版本（加入公司 Logo、技术栈要求等）
只需告诉我：
- 你用的是 React / Vue / Node？
- 是否启用 TypeScript？
- 团队规模？
我就能帮你一键生成完整解决方案。🚀
