Why
团队开发中，每个人的编码风俗差别，代码格式差别。这就会导致代码丢脸，难以维护。同一代码风格可以：
- 增强代码的可读性，降低维护本钱
- 有利于代码查察
- 养成规范代码的风俗，有利于自身发展
How
保举利用 eslint + prettier 来举行代码格式化。
通过 git hook 调用来实当代码的主动格式化，git hooks 工具保举 husky。
既然用到了 git hook，趁便把提交信息规范也做一下，这里保举 commitlint。
用到的插件
- eslint: js/jsx 语法查抄插件
按照已有设置查抄 js/jsx 语法，能抛出错误、告诫，而且能修复一部分错误
- stylelint: css样式格式化工具
- prettier: 代码格式化插件
按照已有设置举行代码格式化
- husky: git hooks 工具
对 git 实行的一些下令，通过对应的 hooks 触发，实行自界说的脚本步调。
好比，我们可以界说pre-commit钩子的脚本为npm run test。如许在代码提交前就会实行npm run test
- lint-staged: 在 git 暂存区运行 linters 的工具
只查抄暂存区内容，制止每次 lint 实行都针对所有代码
相当于每次只对修改的内容实行 eslint + prettier 格式化
- commitlint: 提交信息查抄工具
查抄提交信息是否符合规范
eslint 7.x
1. 安装
cnpm install eslint -D2. 利用
- 设置 eslint
eslint --init添加 eslint 设置文件。然后修改设置，详细设置如下：
module.exports = { // 特定项目下，不再检索上级目录 root: true, env: { browser: true, es6: true, node: true, amd: true }, extends: [ 'eslint:recommended', 'plugin:react/recommended', // eslint-config-prettier的缩写 'prettier' ], plugins: ['react'], // 分析器选项 parserOptions: { sourceType: 'module', ecmaFeatures: { jsx: true } }, settings: { react: { version: 'detect' } }, rules: { 'no-unused-expressions': 'off', 'no-unused-vars': 'warn', 'no-debugger': 'error', 'no-unreachable': 'warn', 'react/prop-types': 'off' }};这里，我们用到了几个 eslint 的插件，须要安装：
cnpm install eslint-config-prettier eslint-plugin-react -Deslint-config-prettier 的作用是利用 Prettier 默认保举设置，而且关闭 eslint 自身的格式化功能，防止 Prettier 和 ESLint 的主动格式化的辩论
在 package.json 的 scripts 里添加 eslint 脚本下令，如下：
"scripts": { // ... "eslint": "eslint --ext js,jsx src --fix",},值得留意的是，这里我们指定了 src 目录，以是没须要再加.eslintignore文件了。
npm run eslint即可举行 eslint 查抄和修复（只能修复部分格式的题目）。
stylelint14.x
1. 安装
cnpm install stylelint -D2. 设置
创建.stylelintrc.js,增长以下设置：
module.exports = { extends: ["stylelint-config-standard-scss", "stylelint-config-prettier"], plugins: ["stylelint-order"], defaultSeverity: "warning", overrides: [], rules: { "color-no-invalid-hex": true, "annotation-no-unknown": true, "function-calc-no-unspaced-operator": true, "function-no-unknown": true, "block-no-empty": true, "unit-allowed-list": ["em", "rem", "s", "%", "px", "vw", "vh"], "no-duplicate-selectors": true, "selector-class-pattern": null, "order/properties-order": [ "position", "top", "right", "bottom", "left", "z-index", "display", "justify-content", "align-items", "float", "clear", "overflow", "overflow-x", "overflow-y", "margin", "margin-top", "margin-right", "margin-bottom", "margin-left", "border", "border-style", "border-width", "border-color", "border-top", "border-top-style", "border-top-width", "border-top-color", "border-right", "border-right-style", "border-right-width", "border-right-color", "border-bottom", "border-bottom-style", "border-bottom-width", "border-bottom-color", "border-left", "border-left-style", "border-left-width", "border-left-color", "border-radius", "padding", "padding-top", "padding-right", "padding-bottom", "padding-left", "width", "min-width", "max-width", "height", "min-height", "max-height", "font-size", "font-family", "font-weight", "text-align", "text-justify", "text-indent", "text-overflow", "text-decoration", "white-space", "color", "background", "background-position", "background-repeat", "background-size", "background-color", "background-clip", "opacity", "filter", "list-style", "outline", "visibility", "box-shadow", "text-shadow", "resize", "transition" ] }};这里, 我们用到了几个插件：
stylelint-config-standard-scss: stylelint默认规则只能格式化css，这里我们利用该插件的规则来格式化scss。
stylelint-config-prettier: 制止stylelint与prettier辩论的插件。
stylelint-order: 给属性排序的插件。属性会按照rules里 order/properties-order 所界说的序次排序。
别的，我们还要安装stylelint-scss，因为stylelint默认是没有格式化scss的本领的。
安装：
cnpm install stylelint-scss stylelint-config-standard-scss stylelint-config-prettier stylelint-order -D在 package.json 的 scripts 里添加 stylelint 脚本下令，如下：
"scripts": { // ... "stylelint": "stylelint src/**/*.{less,scss,css} --fix",},利用npm run stylelint即可对src下的样式文件举行格式化。
prettier
1. 安装
cnpm install prettier -D2. 利用
- 设置 prettier
创建 prettierrc.js 文件：
echo module.exports = {}>.prettierrc.js添加设置，这里可以根据本身须要调解风格。好比：
module.exports = { printWidth: 120, tabWidth: 2, useTabs: false, semi: true, singleQuote: false, jsxSingleQuote: true, jsxBracketSameLine: true, trailingComma: "none", bracketSpacing: true};最好再加上.prettierignore文件，制止把不须要的文件也举行格式化。
#ignorenode_modules.DS_Storeyarn**-lock*dist*public/prettier --write即可举行 prettier 格式化。
lint-stated 13.x
1. 安装
cnpm install lint-staged -D2. 利用
- 在 package.json 里添加 lint-staged 选项
"lint-staged": { "**/*.{js,jsx,ts,tsx}": [ "eslint --fix" ], "**/*.{js,jsx,ts,tsx,cjs,json,less,scss,css,md}": [ "prettier --write" ], "**/*.{less,scss,css}": [ "stylelint --fix" ]},
- 在 package.json 的 scripts 里添加 lint-staged 脚本下令
"scripts": { // ... "lint-staged": "lint-staged"},如许，当我们利用npm run lint-staged的时间，就会主动调用 eslint+prettier 格式化。
commitlint
1. 安装
cnpm install --save-dev @commitlint/config-conventional @commitlint/cli2. 利用
echo "module.exports = {extends: ['@commitlint/config-conventional']}" > commitlint.config.js
- 设置 commitlint
- 提交信息结构
通常 commitlint 以为我们提交信息格式如下：
type(scope?): subjectbody?footer?其中, scope/body/footer 这三个无关紧急。
- 校验规则
一样平常的校验规则格式如下：
[规则名称]: [level, when, value]
level: 有三个参数。0 代表禁用， 1 代表告诫， 2 代表错误
when: 有两个参数。always 代表总是， never 代表从不
value: 参数值
好比：
"subject-empty": [2, "never"],"body-empty": [2, "always"],"type-enum": [2, "always", ['feat', 'fix', 'docs', 'style', 'refactor', 'test', 'revert']]就是欺压 body 必须为空，subject 不可为空，type 必须是上面数组里的其中一个。否则就报错。
git commit -m "feat: 增长了新功能"git commit -m "fea: 增长了新功能" // 报错，type 必须为'feat', 'fix', 'docs', 'style', 'refactor', 'test', 'revert'中的一个更多规则参考官网
https://commitlint.js.org/#/reference-rules
- 自界说校验规则
如果已有的规则满足不了需求，我们还可以自界说校验规则。自界说校验规则写在 plugins 属性中。
module.exports = { extends: ["@commitlint/config-conventional"], rules: { "type-empty": [2, "always"], "scope-empty": [2, "always"], "subject-empty": [2, "always"], "header-max-length": [2, "always", 100], "body-empty": [2, "always"], "footer-empty": [2, "always"], "action-enum": [ 2, "always", ["Fixed", "Feature", "Add", "Modify", "Update", "Delete"] ], "issue-rule": [2, "always", ["TMP", "TTT"]] // 根据本身须要输入即可 }, plugins: [ { rules: { "action-enum": ({ raw }, when = "always", value = []) => { return [ value.includes(raw.split(" ")[0]), `提交信息不合规范! {Action}错误! 必须以 "{Action}{空格}#{标号}{空格}" 开头。 {Action}可选：${value.join("|")} 好比: Fixed #TMP-111 修复接口传参错误的题目 ${when === "never" ? "别的: action-enum规则第二个参数必须是always, 发起修改" : ""}...` ]; }, "issue-rule": ({ raw }, when, value = []) => { const issueStr = `^([A-Z][a-z]*\\s#(${value.join("|")})\\-[1-9][0-9]*)`; const issueReg = new RegExp(issueStr, "g"); return [ issueReg.test(raw), `提交信息不合规范! {标号}错误! 必须以 "{Action}{空格}#{标号}{空格}" 开头。 {标号}可选: ${value.join("|")} 好比: Fixed #TMP-111 修复接口传参错误的题目 ${when === "never" ? "别的: action-enum规则第二个参数必须是always, 发起修改" : ""}...` ]; } } } ]};这里，我把 type, scope, subject, body, footer 都欺压为空，然后自界说了两个规则action-enum和issue-rule。
提交代码的时间，如果不符合'必须以 "{Action}{空格}#{标号}{空格}" 开头'的规则，就会报错，提交失败。比方：
git commit -m "Fixed #TMO-222 修复了传参错误的bug"由于我们界说的标号前缀里面没有TMO，因此会报错：
husky 8.x
1. 安装
cnpm install husky -D2. 利用
npm set-script prepare "husky install"npm run prepare这里我们在 scripts 加了一个 prepare 下令，这个下令会在实行 npm install 时主动实行。
npx husky add .husky/pre-commit "npm run lint-staged"npx husky add .husky/commit-msg 'npx --no-install commitlint --edit "$1"'这里我们添加了两个钩子，pre-commit 与 commit-msg。
pre-commit 会在提交前实行npm run lint-staged下令
commit-msg 会在提交时实行npx --no-install commitlint --edit "$1"
至此，我们的设置完成。代码提交的时间会主动对修改的代码举行格式化，同时会按照 commitlint 里的设置来举行提交信息校验。
如果有题目，则会报错，且代码会提交失败。
vscode 插件
1. eslint 和 prettier 插件
保举利用 vscode 插件 eslint 和 prettier，可以在 settings.json 中设置：
"editor.formatOnSave": true,"eslint.run": "onSave"当我们生存的时间，会主动举行格式化, 会主动把 eslint 的错误语法用波浪线标出来。
2. 把 eslint 和 prettier 插件设置加到项目目录
vscode 的设置分两类，工作区和用户区。工作区的优先级高于用户区。
在项目根目录加上.vscode 文件夹，里面是 settings.json 文件。
那么我们的项目就是一个工作区了。
修改 settings.json 设置如下:
{ "[javascriptreact]": { "editor.defaultFormatter": "esbenp.prettier-vscode" }, "[javascript]": { "editor.defaultFormatter": "esbenp.prettier-vscode" }, "[json]": { "editor.defaultFormatter": "esbenp.prettier-vscode" }, "editor.formatOnSave": true, "eslint.run": "onSave"}如许就完成了 vscode 设置的共享。
参考资料：
husky官方文档
lint-staged官方文档
commitlint官方网站
commitlint 从0到1 (git commit 校验工具)
前端架构师神技，三招同一代码风格（一文讲透） |
