highlight: an-old-hope
theme: channing-cyan

前端规范化实践

一、代码格式化

在团队项目开发中，由于大家的代码风格不一致，会导致代码难以管理，看起来很烂，新人难以快速看懂等问题。 通过下面的方式，可以一键格式化整个项目，在按下保存时，大家的代码风格将会保持为一致。

1.安装插件到开发环境

• prettier： 格式化插件
• eslint-plugin-prettier：这是一个ESLint插件，意味着它包含ESLint将检查的其他规则的实现 .
• eslint-config-prettier：这是一个ESLint配置，它包含规则的配置（某些规则是打开，关闭还是特殊配置） .

  cnpm i -D prettier eslint-config-prettier eslint-plugin-prettier 

  2.添加配置

• 在根目录新建.vscode而文件夹，下面新建settings.json文件，这样就可以在保存时使用
  prettier和eslint自动格式一下代码，验证一下错误

  {
   "eslint.validate": [
   "javascript",
   "javascriptreact",
   "html",
   "typescript",
   "vue",
   ],
   "editor.formatOnSave": true,
   "editor.codeActionsOnSave": {
   "source.fixAll.eslint": true
   },
   "[vue]": {
   "editor.defaultFormatter": "esbenp.prettier-vscode"
   },
   "[html]": {
   "editor.defaultFormatter": "esbenp.prettier-vscode"
   },
   "[css]": {
   "editor.defaultFormatter": "esbenp.prettier-vscode"
   },
   "[less]": {
   "editor.defaultFormatter": "esbenp.prettier-vscode"
   },
   "[javascript]": {
   "editor.defaultFormatter": "esbenp.prettier-vscode"
   },
   "[json]": {
   "editor.defaultFormatter": "esbenp.prettier-vscode"
   },
  }

• 根目录新建.prettierrc文件,配置prettier规则。.prettierignore规则自行考虑配置。

  {
   "printWidth": 100,
   "tabWidth": 4,
   "trailingComma": "none",
   "arrowParens": "avoid",
   "endOfLine": "auto",
   "jsxBracketSameLine": false,
   "bracketSpacing": true,
   "htmlWhitespaceSensitivity": "ignore",
   "semi": true
  }

• 根目录新建.eslintrc.js，eslint规则

  module.exports = {
   root: true,
   env: {
   node: true
   },
   plugins: ["prettier"],
   extends: ["plugin:vue/essential", "eslint:recommended", "plugin:prettier/recommended"],
   rules: {
   "no-console": process.env.NODE_ENV === "production" ? "error" : "off",
   "no-debugger": process.env.NODE_ENV === "production" ? "error" : "off",
   "prettier/prettier": "error"
   },
   globals: {
   // 不希望被eslint报错的全局变量
   AMap: true
   },
   parserOptions: {
   ecmaVersion: 2018,
   sourceType: "module",
   parser: "babel-eslint"
   }
  };

• 清除个人的格式化配置，避免影响到工作区的配置。

找到用户的settings.json文件。清除格式化配置代码。

3.一键格式化

在package.json的scripts中添加一下代码

 "prettier": "prettier --config ./.prettierrc --write \"./**/*.{js,jsx,vue}\" "

执行以下代码，既可一键格式化所有代码

cnpm i -D prettier eslint-config-prettier eslint-plugin-prettier 

4.注意事项

• 有些项目可能在package.json文件配置了 eslint规则 需要删除 eslintConfig 字段
• vscode文件夹，需要提交到Git仓库，避免大家的不一致。需要在.gitignore文件去掉.vscode字段
• 屏蔽项目中的全局变量报错可以在 .eslintrc.js，添加需要屏蔽的变量
• 版本冲突。# Error while loading rule 'prettier/prettier': context.getPhysicalFilename is not a function

  二、git规范化

  日常工作中，几乎每个项目都是由多个人进行维护，每个人的代码书写习惯和风格又不尽相同，在这种情况下，如果没有统一的规范，你就会发现提交到代码仓库的代码格式五花八门，并且commit log也是乱七八糟，更严重点可能有的小伙伴在提交代码的时候为了省事commit message直接就是两个点点，总之，可能就是怎么省事怎么来。最终导致的结果就是，当你某一天需要cherry-pick某个commit到另外的分支的时，看着commmit log一脸懵逼。所以，规范和约束在多人协作下，就显得尤为重要。

  1.安装插件到开发环境

• husky： Git Hooks工具 用于提交消息、运行测试、检查代码
• lint-staged： 是一个在git暂存区上运行linters的工具。

  cnpm i -D husky lint-staged @commitlint/cli @commitlint/config-conventional

  2.添加配置

• 在package.json的scripts中添加一下代码

  "prepare": "husky install"

• 执行以下代码(无git情况下会报错，请先git init 一下)

  cnpm run prepare 

• 在package.json文件下添加如下代码：

  "lint-staged": {
   "src/**/*.{js,jsx,ts,tsx,json}": [
   "prettier --write",
   "eslint",
   "git add"
   ]
   }
  }

• 在根目录创建 commitlint.config.js 文件

  module.exports = {
   extends: ["@commitlint/config-conventional"],
   // 以下时我们自定义的规则
   rules: {
   "type-enum": [
   2,
   "always",
   [
   "bug", // 此项特别针对bug号，用于向测试反馈bug列表的bug修改情况
   "feat", // 新功能（feature）
   "fix", // 修补bug
   "docs", // 文档（documentation）
   "style", // 格式（不影响代码运行的变动）
   "refactor", // 重构（即不是新增功能，也不是修改bug的代码变动）
   "test", // 增加测试
   "chore", // 构建过程或辅助工具的变动
   "revert", // feat(pencil): add ‘graphiteWidth’ option (撤销之前的commit)
   "merge" // 合并分支， 例如： merge（前端页面）： feature-xxxx修改线程地址
   ]
   ]
   }
  };

• 如果还需要别的代码优化依赖包，可以接着进行安装
• 至此，准备好我们需要的依赖包之后，我们开始添加钩子
• 执行npx husky add .husky/commit-msg 'npx commitlint --edit "$1"'之后，会看到在根目录的.husky文件夹下多了一个 commit-msg 文件，其内容如下：

  
  #!/usr/bin/env sh
  . "$(dirname -- "$0")/_/husky.sh"

npx commitlint --edit "$1"

- 紧接着，我们需要将上一步添加的钩子添加到git中去，执行`git add .husky/commit-msg`
- 执行`npx husky add .husky/pre-commit 'npx lint-staged --allow-empty "$1"'`之后，会看到在根目录的`.husky`文件夹下多了一个 `pre-commit` 文件，其内容如下：
```bash
#!/bin/sh
. "$(dirname "$0")/_/husky.sh"
npx lint-staged --allow-empty "$1"

• 同样的，我们需要将上一步添加的钩子添加到git中去，执行git add .husky/pre-commit

  3.使用测试

  提交失败示例

  
  $ git commit -m 'test'
  ⚠ Some of your tasks use `git add` command. Please remove it from the config since all modifications made by tasks will be automatical
  git commit index.

→ No staged files match any configured task.
⧗ input: test
✖ subject may not be empty [subject-empty]
✖ type may not be empty [type-empty]

✖ found 2 problems, 0 warnings
ⓘ Get help: https://github.com/conventional-changelog/commitlint/#what-is-commitlint

husky - commit-msg hook exited with code 1 (error)

提交成功
```bash
$ git commit -m 'feat: 配置husky7.0.1版本的钩子'
⚠ Some of your tasks use `git add` command. Please remove it from the config since all modifications made by tasks will be automaticalhe git commit index.
→ No staged files match any configured task.
[master 5403b85] feat: 配置husky7.0.1版本的钩子
 5 files changed, 96 insertions(+), 9307 deletions(-)
 create mode 100644 .husky/commit-msg
 create mode 100644 .husky/pre-commit
 create mode 100644 commitlint.config.js