代码规范skill入门指南：从混乱到整洁的工程化实践

2次阅读

没有评论

共计 1250 个字符，预计需要花费 4 分钟才能阅读完成。

在团队协作中，没有统一的代码规范会导致许多问题。比如，我曾经参与过一个项目，由于缺乏规范，每次代码审查都要花费大量时间讨论格式问题，而不是关注业务逻辑。更糟糕的是，因为格式不一致，Git 合并时经常出现冲突，严重影响了开发效率。

代码审查时间增加 40%
Git 冲突率上升 25%
新成员上手时间延长 50%

这些数据告诉我们，建立统一的代码规范不是可有可无的，而是提高团队效率的必要措施。

ESLint：主要负责 JavaScript/TypeScript 代码质量检查
Prettier：专注于代码格式化
Stylelint：用于 CSS/SCSS 等样式文件检查

对于大多数前端项目，我推荐使用 ESLint+Prettier 的组合，它们互补且能覆盖大部分需求。

// .eslintrc.js
module.exports = {
  env: {
    browser: true,
    es2021: true,
  },
  extends: [
    'airbnb-base', // 使用 Airbnb 基础规则
    'plugin:@typescript-eslint/recommended', // TypeScript 推荐规则
    'prettier', // 必须放在最后，覆盖可能冲突的规则
  ],
  parser: '@typescript-eslint/parser',
  parserOptions: {
    ecmaVersion: 'latest',
    sourceType: 'module',
  },
  plugins: ['@typescript-eslint'],
  rules: {
    // 自定义规则可以在这里覆盖
    'import/extensions': 'off', // 关闭对文件扩展名的检查
    'import/prefer-default-export': 'off', // 允许单个导出
  },
};

使用 husky 和 lint-staged 可以确保每次提交前都自动检查代码：

// package.json
{
  "husky": {
    "hooks": {"pre-commit": "lint-staged"}
  },
  "lint-staged": {"*.{js,jsx,ts,tsx}": [
      "eslint --fix",
      "prettier --write",
      "git add"
    ],
    "*.{css,scss}": [
      "stylelint --fix",
      "prettier --write",
      "git add"
    ]
  }
}

对于已有项目，不要一次性启用所有规则：