前端要做代码规范

源代码 · 2024-10-8 23:31:52

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 -D

eslint-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. 利用

初始化 commitlint 设置文件

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 校验工具)
前端架构师神技，三招同一代码风格（一文讲透）

前端要做代码规范

所属分类: 问答交流

新帖推荐: 30日

推荐作品