代码规范

prettier

安装 prittier 及相关插件。

npm install prettier eslint-config-prettier eslint-plugin-prettier --D

配置 eslint。

/* .eslintrc.cjs */

module.exports = {
  // ...
  extends: [
    // ...
    "plugin:prettier/recommended"
  ]
}

配置命令。

/* package.json */

{
  // ...
  "scripts": {
    "format": "prettier --write 'src/**/*.+(js|ts|jsx|tsx)'"
  }
}

配置 prittier。

/* .prettierrc.js */

/**
 * @type {import("prettier").Config}
 */
const config = {
  // 箭头函数只有一个参数时，省略括号
  arrowParens: "avoid",
  // 括号内不出现空格
  bracketSameLine: false,
  // 对象中的空格 默认 true，true: { foo: bar }，false: {foo: bar}
  bracketSpacing: true,
  endOfLine: "auto",
  // 在jsx中把 '>' 是否单独放一行
  jsxBracketSameLine: false,
  printWidth: 240,
  // 换行方式
  proseWrap: "preserve",
  // 分号
  semi: false,
  // 单引号
  singleQuote: false,
  // 缩进
  tabWidth: 2,
  // 使用 tab 缩进
  useTabs: false,
  // 行尾逗号，默认 none，可选 (none | es5 | all)，es5 包括 es5 中的数组、对象，all 包括函数对象
  trailingComma: "none",
  parser: "typescript"
}

export default config

husky

在 git commit 之前执行自定义命令（hook）。

安装 husky。

npm install husky -D

配置命令。

/* package.json */

{
  // ...
  "scripts": {
    "prepare": "husky install"
  }
}

添加 husky hook，在 commit 前执行代码规范检查。

npx husky add .husky/pre-commit "npm run lint"
npx husky add .husky/pre-commit "npm run format"
npx husky add .husky/pre-commit "git add ."

commitlint

安装 commitlint。

npm install @commitlint/config-conventional @commitlint/cli -D

配置 commitlint。

/* commitlint.config.js */

module.exports = {
  extends: ["@commitlint/config-conventional"]
}

添加 husky hook，在 commit 前执行注释规范检查。

npx husky add .husky/commit-msg 'npx --no -- commitlint --edit ${1}'

commit 注释前缀：

• feat 新增功能

• chore 小改动

• fix 修复 bug

• release 发布版本

• style 调整代码（修改缩进、补全分号等）

• docs 更新文档

• build 构建工具或外部依赖的改动（webpack、npm）

• refactor 重构代码

• revert 版本回退

• perf 性能优化

• test 增加测试