前端项目规范配置指南：一文搞定 Git、ESLint、Stylelint 和注释

好的代码总有好的规范，规范使你的代码更易于维护和协作。前端项目中涉及到的规范配置包括 Git 提交配置、ESLint、Stylelint 和注释配置。本文将详细介绍这些配置，帮助你构建一个规范统一、易于维护的前端项目。

Git 提交规范配置

Git 提交规范是约束开发者提交代码时提交信息的格式，保证提交信息清晰易懂，便于日后的代码维护。这里推荐使用 commitlint，它是一个对提交信息进行验证的工具，可以按照自定义规则检查提交信息是否符合规范。

# 安装 commitlint
npm install --save-dev commitlint

通过配置文件 .commitlintrc.js 设置提交规范规则：

// .commitlintrc.js
module.exports = {
  rules: {
    "type-enum": [2, "always", ["feat", "fix", "refactor", "docs", "style", "test", "chore"]],
    "type-case": [2, "always", "lower-case"],
    "subject-empty": [2, "never"],
    "subject-case": [2, "always", "sentence-case"],
    "header-max-length": [2, "always", 72],
    "scope-case": [2, "always", "lower-case"],
    "body-leading-blank": [1, "always"],
    "footer-leading-blank": [1, "always"]
  }
};

设置 lint-staged，在提交代码时只针对暂存区文件进行代码检查，确保代码符合规范再提交：

# 安装 lint-staged
npm install --save-dev lint-staged

在项目根目录创建 .lintstagedrc.js 文件：

// .lintstagedrc.js
module.exports = {
  "*.{js,jsx,ts,tsx}": ["eslint --fix", "git add"]
};

ESLint 配置

ESLint 是一个用于检查 JavaScript 代码质量的工具，它可以通过一系列规则来确保代码符合特定的编码规范。推荐使用 eslint-config-airbnb 来配置 ESLint 规则，它提供了严格且全面的代码风格指南。

# 安装 eslint-config-airbnb
npm install --save-dev eslint-config-airbnb

在项目根目录创建 .eslintrc.js 文件：

// .eslintrc.js
module.exports = {
  extends: "airbnb",
  env: {
    browser: true,
    node: true
  },
  rules: {
    // 自定义规则
  }
};

Stylelint 配置

Stylelint 是一个用于检查 CSS 代码质量的工具，它可以帮助你确保代码符合特定的样式指南。这里推荐使用 stylelint-config-standard 来配置 Stylelint 规则，它提供了一组通用的、易于遵循的样式规则。

# 安装 stylelint-config-standard
npm install --save-dev stylelint-config-standard

在项目根目录创建 .stylelintrc.js 文件：

// .stylelintrc.js
module.exports = {
  extends: "standard"
};

注释配置

注释是代码中不可或缺的一部分，它可以帮助开发者理解代码的意图和用法。为了保证注释的一致性和规范性，这里推荐使用 jsdoc 注释风格。

使用 jsdoc 需要安装 jsdoc 工具：

# 安装 jsdoc
npm install --save-dev jsdoc

在项目根目录创建 jsdoc.conf.json 文件：

// jsdoc.conf.json
{
  "source": {
    "include": ["src"]
  },
  "opts": {
    "destination": "docs"
  }
}

# 生成注释文档
jsdoc -c jsdoc.conf.json

总结

通过以上配置，你可以建立一个规范统一、易于维护的前端项目。这些规范可以确保代码质量，提高代码可读性和可维护性，让你的前端项目更加专业和高效。