趣味前端

代码规范和git提交规范定制

一、代码规范和语法检查

  • prettier: 代码格式化工具
  • tslint: 语法检查，也可以做风格的格式化，但我们要用 prettier 进行代码格式化，tslint 主要做语法检查
  • tslint-plugin-prettier: 使用 prettier 代替 tslint 的风格的格式化工作

配置步骤：

1. 安装插件

npm install tslint prettier tslint-plugin-prettier --save-dev
1

2. 创建 prettier 规则配置文件

在根目录，或其他的放创建 prettier.config.js 文件，内容如下：


module.exports = {
  // 箭头函数只有一个参数的时候可以忽略括号
  arrowParens: "avoid",
  // 括号内部不要出现空格
  bracketSpacing: true,
  // 行结束符使用 Unix 格式
  endOfLine: "lf",
  // true: Put > on the last line instead of at a new line
  jsxBracketSameLine: false,
  // 行宽
  printWidth: 100,
  // 换行方式
  proseWrap: "preserve",
  // 分号
  semi: true,
  // 使用单引号
  singleQuote: true,
  // 缩进
  tabWidth: 2,
  // 使用 tab 缩进
  useTabs: false,
  // 后置逗号，多行对象、数组在最后一行增加逗号
  trailingComma: "es5",
};
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26

其他配置项在官网open in new window查看

2. 创建 tslint 规则配置文件

在根目录，或其他的放创建 tslint.json 文件，内容如下：

{
  "rulesDirectory": ["tslint-plugin-prettier"],
  "rules": {
    "prettier": [true, "./.prettier.config.js"]
  }
}
1
2
3
4
5
6

启用 prettier ，并指定其配置文件路径

3. 配置运行命令

在项目根目录中的 package.json 中 scripts 下添加运行的命令：

{
    "scripts": {
        "lint": "tslint \"src/**/*.ts\"",
        "lint:fix": "tslint \"src/**/*.ts\" --fix",
    }
}
1
2
3
4
5
6

4. vscode 使用 prettier

{

    // 保存是进行格式化
    "editor.formatOnSave": true,
    "editor.codeActionsOnSave": {
        "source.fixAll": true
    },
    // 启用 prettier，如果项目中有 prettier 配置文件，vscode 会使用配置文件中的规则进行格式化
    "editor.defaultFormatter": "esbenp.prettier-vscode",
    "[javascript]": {
        "editor.defaultFormatter": "esbenp.prettier-vscode"
    },
    "[typescript]": {
        "editor.defaultFormatter": "esbenp.prettier-vscode"
    },
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17

二、代码提交规范配置

  • husky: 一个 git hooks 工具，可以在提交代码时定义一些操作，如代码检查、代码提交规范约束
  • lint-staged: 由于老项目的存在，而且项目运行稳得一批，在进行代码检查和修复时，没必要扫描整个项目，该工具应运而生，它只对 staged 的文件（git 暂存区，即经过 git add 的文件）进行 lint
  • commitlint: git 提交信息检查工具，配个规则使用
  • @commitlint/config-conventional: 提交信息规则，commitlint 是检查工具，需要配规则进行使用，可以换成其他。

配置步骤：

1. huskey的安装和使用

（1）安装
npx husky-init
npm install
1
2

以上两个步骤，帮我们做了以下工作：

  1. 在当前目录自动生成 .husky 文件夹，里面有一个 pre-commit 文件，是 husky 初始化操作自动生成的一个 git hook，等下我们要在里面定义自己的行为
  2. 并在 package.json 的 scripts 中自动添加 prepare: husky install，
  3. 自动安装 husky 依赖，可以在 devDependenies 中看得见端倪。
（2）增加 git hook
npx husky add <.husky的路径>/<git hook> "<执行的命令>"
1

执行以上命令，会在 .husky 文件中自动生成配置脚本

2. commitlint安装和配置

（1）安装

安装 commitlint 和 @commitlint/config-conventional 依赖

npm install --save-dev @commitlint/config-conventional commitlint
1
（2）配置文件

在根目录创建 commitlint.config.js，内容如下：

module.exports = {
  extends: ["@commitlint/config-conventional"],
};
1
2
3
（3）配合 husky 使用

使用 husky 创建一个 commit-msg，让它执行 commitlint ，在提交代码时检查提交信息：

npx husky add .husky/commit-msg 'npx --no-install commitlint --edit "$1"'
1

3. lint-staged安装和配置

（1）安装

执行以下命令进行安装：

npx mrm@2 lint-staged
1

该命令帮我们进行了一些操作：

  1. 在 package.json 中自动添加：
{
  "lint-staged": {
    "*.{ts,js,css,md}": [
      // 替换自动生成的命令
      // 在这个地方要执行我们上面配置tslint时定义好的 lint 命令
      "npm run lint"
    ]
  },
}
1
2
3
4
5
6
7
8
9
  1. 在 .husky 中 pre-commit 添加了 npx lint-staged，即在提交代码前执行 lint-staged，最终执行的就是 npm run lint

注意： 如果以上过程出错，也可以通过 npm install lint-staged，并根据以上自动生成的内容进行手动配置。

至此，代码语法规范和提交规范定制就完成了