关于前端:前端代码规范最佳实践

Why

团队开发中，每个人的编码习惯不同，代码格局不同。这就会导致代码难看，难以保护。对立代码格调能够：

1. 加强代码的可读性，升高保护老本
2. 有利于代码审查
3. 养成标准代码的习惯，有利于本身成长

How

举荐应用 eslint + prettier 来进行代码格式化。

通过 git hook 调用来实现代码的主动格式化，git hooks 工具举荐 husky。

既然用到了 git hook，顺便把提交信息标准也做一下，这里举荐 commitlint。

用到的插件

1. eslint: js/jsx 语法查看插件

   依照已有配置查看 js/jsx 语法，能抛出谬误、正告，并且能修复一部分谬误

2. stylelint: css 款式格式化工具
3. prettier: 代码格式化插件

   依照已有配置进行代码格式化

4. husky: git hooks 工具

   对 git 执行的一些命令，通过对应的 hooks 触发，执行自定义的脚本程序。

   比方，咱们能够定义 pre-commit 钩子的脚本为npm run test。这样在代码提交前就会执行npm run test

5. lint-staged: 在 git 暂存区运行 linters 的工具

   只查看暂存区内容，防止每次 lint 执行都针对所有代码

   相当于每次只对批改的内容执行 eslint + prettier 格式化

6. commitlint: 提交信息查看工具
   查看提交信息是否符合规范

eslint 7.x

1. 装置

cnpm install eslint -D

2. 应用

• 配置 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 -D

2. 配置

创立.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 -D

2. 应用

• 配置 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 文件，防止把不必要的文件也进行格式化。

#ignore
node_modules
.DS_Store
yarn*
*-lock*
dist*
public/

prettier --write即可进行 prettier 格式化。

lint-stated 13.x

1. 装置

cnpm install lint-staged -D

2. 应用

• 在 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/cli

2. 应用

• 初始化 commitlint 配置文件

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

• 配置 commitlint

  1. 提交信息结构
     通常 commitlint 认为咱们提交信息格式如下：

type(scope?): subject
body?
footer?

其中, scope/body/footer 这三个可有可无。

2. 校验规定
   个别的校验规定格局如下：

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

3. 自定义校验规定
   如果已有的规定满足不了需要，咱们还能够自定义校验规定。自定义校验规定写在 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 -D

2. 应用

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"},
  "": {"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 校验工具)

[前端架构师神技，三招对立代码格调（一文讲透）
](https://cloud.tencent.com/dev…)

本文由 mdnice 多平台公布