前端工程化 词条目录
前端Wiki/前端工程化/基础/认识前端工程化

规范化与自动化

规范化把“个人风格”变成“团队约定”:命名规则、文件结构、提交信息、代码格式全部统一,代码评审不再争论缩进和引号。落地工具是 ESLint(规则检查)+ Prettier(纯格式化)+ 提交规范(Conventional Commits)。

自动化把“手动操作”变成“脚本流水线”:保存文件时自动格式化、提交时自动跑 Lint、推代码时自动构建部署。凡是需要“记住要做”的事,都应该交给自动化——人总会忘,机器不会。

  • 规范化三件套:ESLint 管规则、Prettier 管格式、commitlint 管提交信息
  • 自动化覆盖率越高,低级错误越少:pre-commit 挡住不合规代码,CI 挡住构建失败
  • 规范的最高境界是“无痛”:配好编辑器与 hooks,开发者按习惯写代码即可
配置
// .prettierrc —— 团队格式约定(配编辑器保存自动格式化)
{
  "semi": true,                 // 语句分号
  "singleQuote": true,          // 单引号
  "printWidth": 100,            // 每行最大宽度
  "trailingComma": "es5"        // 尾随逗号
}

// package.json —— 把检查挂到 Git 钩子上
{
  "scripts": { "lint": "eslint src --fix" },
  "lint-staged": {
    "*.{js,vue,ts}": ["eslint --fix", "prettier --write"]
  },
  "husky": { "hooks": { "pre-commit": "lint-staged" } }
}
本节要点规范化统一风格、自动化堵住人为疏漏;二者结合让团队代码“看起来像一个人写的”。