开启掘金成长之旅！这是我参与「掘金日新计划 · 12 月更文挑战」的第2天，点击查看活动详情

前言：为了保证团队的代码质量，我给加了很多的限制。通过这些限制，可以自动根据某些规则，自动格式化不符合规范的代码。并对代码进行检测，以及为了未来更明确的git提交信息，还对git commit信息进行了格式限制。

为什么要这样子做

我理解的代码质量分为很多方面，比如代码可读性，代码健壮性（避免错误）以及代码风格。

代码健壮性方面，在写的时候，就尽可能的规避可能出现的错误，岂不美哉！！

代码风格方面，就像“一千个读者眼中就会有一千个哈姆雷特”一样，可能每个人写代码的风格都不一样。也难以说什么好与坏，毕竟代码能跑就行（🐶）。当然，如果这么想，可能会被你亲爱的同事们锤爆。在多人开发中，团队一般都会保证代码风格尽量一致。毕竟谁不喜欢好看且风格一致的代码呢？除非要自己写。

所以，为了规避这些问题，使用了一系列的工具来支持。

怎样做

这里介绍下，为了实现自己想要的功能，我是如何做的。

目标：

代码检查避免错误
保存代码自动格式化不规范代码
对commit信息进行规范限制

为了实现自己的功能，我使用ESLint并使用社区使用比较多的standard规则进行代码检查，避免报错，使用Prettier进行代码格式化。

搭配husky + lint-stage在git提交时，进行代码自动操作。

并使用commitlint对git提交信息进行规范限制。

包安装

// eslint
npm i -D eslint
// eslint-config-standard
npm i -D eslint-config-standard eslint-plugin-promise eslint-plugin-import eslint-plugin-n

// prettier
npm install --save-dev prettier eslint-plugin-prettier eslint-config-prettier

// husky + lint-staged
npx mrm@2 lint-staged

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

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

配置文件添加

eslint

// .eslintrc

// 使用standard规则进行代码检查
// 让eslint使用prettier规则进行格式化
{
    "parser": "@typescript-eslint/parser",
    "extends": [
        "standard",
        "prettier"
    ],
    "plugins": [
        "prettier"
    ],
    "rules": {
        // https://github.com/prettier/eslint-plugin-prettier#recommended-configuration
        // prettier配置，让eslint使用prettier的规则进行代码格式化
        // 将error改为off，无感使用prettier格式化，想看到，可以走官网推荐的error
        "prettier/prettier": "off",
        "arrow-body-style": "off",
        "prefer-arrow-callback": "off",
        // 未使用变量警告
        "no-unused-vars": "warn",
        // TODO:不允许在声明前使用，react引用会报错,先关闭
        "no-use-before-define": "off",
        // 关闭全局变量的显式声明
        "no-undef": "off"
    }
}

prettier

//.prettierrc
{
  "tabWidth": 2,
  "semi": true,
  "arrowParens": "avoid",
  "singleQuote": true,
  "trailingComma": "all",
  "bracketSpacing": true,
  "printWidth": 120,
  "bracketSameLine": true,
  "useTabs": false,
  "quoteProps": "preserve",
  "jsxSingleQuote": false
}

commitlint

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

package.json

{
"husky": {
    "hooks": {
      "pre-commit": "lint-staged",
      "commit-msg": "commitlint -e $HUSKY_GIT_PARAMS"
    }
  },
  "lint-staged": {
    "*.{js,css,json,md,jsx,ts,tsx}": [
      "prettier --write",
      "git add"
    ]
  }
}

搭配vscode

工作区文件添加

// .vscode/settings.json
{
  // 每次保存的时候自动格式化
  "editor.formatOnSave": true,
  //回车自动格式化
  "editor.formatOnType": true,
  // 自动调整 import 语句相关顺序，能够让你的 import 语句按照字母顺序进行排列
  "editor.codeActionsOnSave": {
    "source.organizeImports": true
  },
  // 整个编辑器默认使用prettier进行格式化代码
  "editor.defaultFormatter": "esbenp.prettier-vscode",
}

总结

这里仅仅提供了自己的解决方案，仅仅实现了功能。并没有对详细规则做具体描述，感兴趣的可以自行研究下，相关资源在最下面。

最后想说，适合自己的才是好规范，每个团队的规范可能都或多或少会不同，这里仅仅使用了standard的规则避免报错，然后搭配使用prettier格式化代码。亲们可以根据自己需求的不同，在extends添加eslint想要的规则,也可以直接在rules中添加或者修改自己想要的规则。

TODO

未来，进一步筛选规则，并将stylelint也加进来！

最后

如果有不对的地方，欢迎指正！同时欢迎一起讨论！

感谢老板.gif

项目开发时，我为保证团队代码质量做的那些事儿