React 代码规范和格式化

React 代码规范和格式化

https://juejin.cn/post/6844904056591220750

社区有很多的 lint 工具，例如 eslint, stylelint, tslint, htmllint, markdownlint 等， int 工具一方面可以帮助维护团队成员保持统一，良好的代码风格，另一面可以帮助我们检测出代码的坏味道，降低 bug 的产生的可能性，提高代码质量。需要指出的是：lint 工具有一定的格式化能力，但是主要功能不是负责格式化代码，格式化代码应该交给专门的格式化工具

最流行的支持 TypeScript 的 lint 工具有俩，tslint 和 eslint

安装 eslint：
-D 参数表示开发依赖
yarn add eslint -D
复制代码
调用 eslint 自带的配置生成器：
npx eslint --init

安装完之后，把 node_modules, package-lock.json, yarn.lock 都删掉，使用 yarn 重新安装依赖，再升级到最新版本：
#安装依赖
yarn
#升级到最新版本
yarn upgrade --latest
复制代码通过 eslint 自带的配置生成器我们生成了 .eslintrc.js

prettier

opinionated 可以理解为 独断专行，自以为是，其实就是说这个格式化器（formatter）不给用户做选择，就按照一套社区共识，最佳实践，最好看的的代码风格来格式化。具体表现就是提供的选项很少，我数了一下总共刚好 20 个选项。
首先我们得安装 prettier：
yarn add prettier -D

lint-staged

我们每次提交代码都要对代码先进行 lint 和格式化，确保团队的代码风格统一。为了达到每次 lint 和格式化时只处理我们修改了的代码，也就是保存在 git stage 区（暂存区）的代码

为了达到在我们每次 commit 的时候，都自动 lint 和格式化，我们需要给 git commit 挂个钩子，使用 husky 可以很轻松的给 git 配置钩子。
先安装 husky 和 lint-staged：
yarn add husky lint-staged -D
复制代码在 package.json 配置 git commit 时的钩子操作:
// package.json
{
“husky”: {
“hooks”: {
// 在执行 git commit 调用 lint-staged 命令，lint-staged 会读取 package.json 中 lint-staged 的配置
“pre-commit”: “lint-staged”
}
},
}

再在 package.json 中 “ling-staged” 字段配置 lint-staged：
// package.json
{
“lint-staged”: {
// 对于 ts,tsx,js 文件调用 eslint
“.{ts,tsx,js}": [
“eslint -c .eslintrc.js”
],
// 对于 css,less,scss 文件调用 stylelint
".{css,less,scss}”: [
“stylelint --config .stylelintrc.json”
],
// prettier 支持很多类型文件的格式化
“*.{ts,tsx,js,json,html,yml,css,less,scss,md}”: [
“prettier --write”
]
},
}

commitlint

我知道有些人提交代码喜欢直接来三个点 …，这是很不好的习惯，这样你就完全没有利用到 commit message，很不利于项目管理。规范化的编写 commit message 有很多好处，可以方便我们检索提交历史，配合 conventional-changelog 直接生成 changelog，关联 github issue 等。
我们可以通过 husky + commlint 实现在 commit 的时候先检查 commit message 的规范性，如果不符合规范直接终止 commit。