前端项目代码规范的搭建-eslint+prettier+git husky

front_end
1,979 阅读6分钟

1. 前言

无规则，不成方圆，套在前端来说也适用。在一个前端工程里，每个人的编码习惯，风格，ide等不同，如果不对代码进行有效的规范，那提交的代码就会非常别具特色。

因此，我们需要在自动化层面就定义好规范，当其他同事提交代码后，都是统一格式化后的代码。

1.1 项目初始化

使用 vue cli 来搭建 eslit + prettier

vue create projectName

选择手动配置：

image.png

按下空格键就可以选中：Router 和 Vux可以选上，也可以自己手动搭，最好是选上：

image.png

这是我选的配置，最后的 ESLint + Prettier,自己手动配置，也可以选择Airbnb的标准：

image.png

2. 集成 editorconfig 配置

EditorConfig 有助于为不同 IDE 编辑器上处理同一项目的多个开发人员维护一致的编码风格。配置如下

# http://editorconfig.org

root = true

[*] # 表示所有文件适用
charset = utf-8 # 设置文件字符集为 utf-8
indent_style = space # 缩进风格（tab | space）
indent_size = 2 # 缩进大小
end_of_line = lf # 控制换行类型(lf | cr | crlf)
trim_trailing_whitespace = true # 去除行首的任意空白字符
insert_final_newline = true # 始终在文件末尾插入一个新行

[*.md] # 表示仅 md 文件适用以下规则
max_line_length = off
trim_trailing_whitespace = false

VSCode 需要安装一个插件：EditorConfig for VS Code

008i3skNgy1gsq2gh989yj30pj05ggmb.jpg

vscode 会读取根目录里 .editorconfig 文件，设置好格式化效果。

3. 使用 prettier 工具

Prettier 是一款强大的代码格式化工具，支持 JavaScript、TypeScript、CSS、SCSS、Less、JSX、Angular、Vue、GraphQL、JSON、Markdown 等语言，基本上前端能用到的文件格式它都可以搞定，是当下最流行的代码格式化工具

3.1 安装 prettier

npm install prettier -D

3.2 配置 .prettierrc 文件

  • useTabs：使用tab缩进还是空格缩进，选择false；
  • tabWidth：tab是空格的情况下，是几个空格，选择2个；
  • printWidth：当行字符的长度，推荐80，也有人喜欢100或者120；
  • singleQuote：使用单引号还是双引号，选择true，使用单引号；
  • trailingComma：在多行输入的尾逗号是否添加，设置为 none；
  • semi：语句末尾是否要加分号，默认值true，选择false表示不加；
{
  "useTabs": false,
  "tabWidth": 2,
  "printWidth": 80,
  "singleQuote": true,
  "trailingComma": "none",
  "semi": false
}

3.3. 创建.prettierignore忽略文件

/dist/*
.local
.output.js
/node_modules/**

**/*.svg
**/*.sh

/public/*

3.4. VSCode需要安装prettier的插件

008i3skNgy1gsq2acx21rj30ow057mxp.jpg

我们可以有几种方式触发prettier：

  1. ctrl + s 保存触发（要在 setting -> Formatting -> Format On Save 打上勾）；
  2. alt + shift + f 格式化键触发（一定要配置好格式化方式为prettier） 如果我们改动的文件太多，不想一个个去格式化，我们可以在package.json中配置一个scripts：
 "prettier": "prettier --write ."

这样执行 npm run prettier 就可以全部格式化好了。

4. 使用 ESLint 检测

在前面创建项目的时候，我们就选择了ESLint，所以 Vue 会默认帮助我们配置需要的 ESLint 环境。

VSCode 需要安装 ESLint 插件：

008i3skNgy1gsq2oq26odj30pw05faaq.jpg 解决 eslint 和 prettier 冲突的问题：

安装插件：（vue 在创建项目时，如果选择 prettier，那么这两个插件会自动安装）

npm i eslint-plugin-prettier eslint-config-prettier -D

添加 prettier 插件：

  extends: [
    "plugin:vue/vue3-essential",
    "eslint:recommended",
    "@vue/typescript/recommended",
    "@vue/prettier",
    "@vue/prettier/@typescript-eslint",
    'plugin:prettier/recommended'
  ],

如果下面自定义的格式各上面有相同，则下面的覆盖上面的格式。

5. git Husky 和 eslint

虽然我们已经要求项目使用 eslint 了，但是不能保证组员提交代码之前都将 eslint 中的问题解决掉了：

  • 也就是我们希望保证代码仓库中的代码都是符合 eslint 规范的；

  • 那么我们需要在组员执行 git commit 命令的时候对其进行校验，如果不符合 eslint 规范，那么自动通过规范进行修复；

那么如何做到这一点呢？可以通过 Husky 工具：

  • husky 是一个 git hook 工具，可以帮助我们触发 git 提交的各个阶段：pre-commit、commit-msg、pre-push

如何使用 husky 呢？

这里我们可以使用自动配置命令：

npx husky-init && npm install

这里会做三件事：

1.安装 husky 相关的依赖：

008i3skNgy1gsqq0o5jxmj30bb04qwen.jpg

2.在项目目录下创建 .husky 文件夹

npx huksy install

008i3skNgy1gsqq16zo75j307703mt8m.jpg

3.在 package.json 中添加一个脚本：

008i3skNgy1gsqq26phpxj30dj06fgm3.jpg

接下来，我们需要去完成一个操作：在进行 commit 时，执行 lint 脚本：

image.png

这个时候我们执行 git commit 的时候会自动对代码进行 lint 校验。

5.1 git commit 规范

通常我们的 git commit 会按照统一的风格来提交，这样可以快速定位每次提交的内容，方便之后对版本进行控制。

008i3skNgy1gsqw17gaqjj30to0cj3zp.jpg

但是如果每次手动来编写这些是比较麻烦的事情，我们可以使用一个工具：Commitizen

  • Commitizen 是一个帮助我们编写规范 commit message 的工具；

1.安装 Commitizen

npm install commitizen -D

2.安装 cz-conventional-changelog，并且初始化 cz-conventional-changelog：

npx commitizen init cz-conventional-changelog --save-dev --save-exact

这个时候我们提交代码需要使用 npx cz：

  • 第一步是选择type，本次更新的类型
Type作用
feat新增特性 (feature)
fix修复 Bug(bug fix)
docs修改文档 (documentation)
style代码格式修改(white-space, formatting, missing semi colons, etc)
refactor代码重构(refactor)
perf改善性能(A code change that improves performance)
test测试(when adding missing tests)
build变更项目构建或外部依赖（例如 scopes: webpack、gulp、npm 等）
ci更改持续集成软件的配置文件和 package 中的 scripts 命令，例如 scopes: Travis, Circle 等
chore变更构建流程或辅助工具(比如更改测试环境)
revert代码回退
  • 第二步选择本次修改的范围（作用域）

image-20210723150147510

  • 第三步选择提交的信息

image-20210723150204780

  • 第四步提交详细的描述信息

image-20210723150223287

  • 第五步是否是一次重大的更改

image-20210723150322122

  • 第六步是否影响某个 open issue

image-20210723150407822

我们也可以在 scripts 中构建一个命令来执行 cz：

image-20210723150526211

这样可以使用 npm run commit 脚本命令就可以在命令行选择提交信息了。

5.2 代码提交验证

如果我们按照 cz 来规范了提交风格，但是依然有同事通过 git commit 按照不规范的格式提交应该怎么办呢？

  • 我们可以通过 commitlint 来限制提交；

1.安装 @commitlint/config-conventional 和 @commitlint/cli

npm i @commitlint/config-conventional @commitlint/cli -D

2.在根目录创建 commitlint.config.js 文件，配置 commitlint

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

3.使用 husky 生成 commit-msg 文件，验证提交信息：

npx husky add .husky/commit-msg
  1. 将 npx --no-install commitlint --edit 复制进文件中

image.png

最后的效果就是只有提交的信息时这个样子才能通过 commit。

image.png

avatar
文章
阅读
粉丝