代码规范｜Prettier + husky

接手老项目的时候，总希望做出一些改变

当然，屎山代码，慎动

使用 prettier 规范代码风格

安装依赖

• prettier: "^2.8.3"
• eslint-config-prettier: "^8.6.0"
• eslint-plugin-prettier: "^4.2.1"

在 .eslintrc.js 中添加 plugin:prettier/recommended

module.exports = {
  env: {
    browser: true,
    es2021: true,
  },
  extends: [
    'eslint:recommended',
    'plugin:react/recommended',
    'plugin:@typescript-eslint/recommended',
    'plugin:prettier/recommended',
  ],
  overrides: [],
  parser: '@typescript-eslint/parser',
  parserOptions: {
    ecmaVersion: 'latest',
    sourceType: 'module',
  },
  plugins: ['react', '@typescript-eslint'],
  rules: {},
}

vscode 中安装 Prettier 插件

此时，页面中的代码应该会出现提示

在 package.json 中添加命令

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

终端中执行这个命令

npm run format

根目录下新建 .vscode 文件夹，新文件 settings.json

{
  "editor.codeActionsOnSave": {
    "source.fixAll.eslint": true
  }
}

根目录下新建 .prettierrc.js，可以配置自己的 prettier

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: false,
  // 使用单引号
  singleQuote: true,
  // 缩进
  tabWidth: 2,
  // 使用 tab 缩进
  useTabs: false,
  // 后置逗号，多行对象、数组在最后一行增加逗号
  trailingComma: 'es5',
  parser: 'typescript',
}

温馨提示🔔：可以关闭 vscode，重新打开，效果更好

git hook husky

安装 husky

npm install husky -D

终端中执行：

npx husky add .husky/pre-commit "npm test"
git add .husky/pre-commit

添加钩子

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

这个时候，我们去执行 commit 命令，husky 就会被执行。如果不规范， commit 就会失败。

使用 commit-lint 规范 commit 提交格式

安装

npm install --save-dev @commitlint/{config-conventional,cli}

终端执行

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

添加 hook

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

在 husky 文件夹下可以看到 commit-msg 文件

每次提交，Commit message 都包括三个部分：header，body 和 footer。其中，header 是必需的，body 和 footer 可以省略。header部分只有一行，包括三个字段：type（必需）、scope（可选）和subject（必需）。

type

用于说明 commit 的类别，只允许使用下面7个标识

• feat：新功能（feature）
• fix：修补bug
• docs：文档（documentation）
• style： 格式（不影响代码运行的变动）
• refactor：重构（即不是新增功能，也不是修改bug的代码变动）
• test：增加测试
• chore：构建过程或辅助工具的变动