记录自己的前端工作流

总结一份自己的前端工作流搭建流程,方便以后使用,创建一个简单的模板,后续放在 npm 上创建新内容,方便直接 npm 下载模板主要使用技术

Eslint

Prettier

husky

lint-staged

commitlint

commitizen

基础模板代码: template

版本号备注:

node： 16.14.2

npm： 8.13.1

Tip：npm版本须大于等于 7.24.2，过低的话可能会导致下面有的命令无法使用，需要手动在 package.json 中自行设置。

1.代码规范

代码检查工具

Eslint
项目集成
- ```
npm i eslint -D
npx eslint --init
```
- init 命令会自动生成 .eslintrc.js

代码风格工具

prettier

项目集成

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

在.eslintrc 中,extend中添加 "prettier" 解决 eslint 和 prettier 的冲突
- 因为eslint-config-prettier新版本更新之后,只需要写一个 "prettierr" 即可,无需多言指令

创建 .prettierrc

// 自己配置
{
  "semi": false,
  "tabWidth": 2,
  "trailingComma": "none",
  "singleQuote": true,
  "arrowParens": "avoid"
}

2.git规范

Git 有很多的 hooks, 让我们在不同的阶段,对代码进行不同的操作,控制提交到仓库的代码的规范性,和准确性, 以下只是几个常用的钩子

2.1 提交的代码规范

pre-commit
描述: 通过钩子函数,判断提交的代码是否符合规范

2.2 提交的信息规范

commit-msg
描述: 通过钩子函数,判断 commit 信息是否符合规范

2.3 提交的代码影响

pre-push
描述: 通过钩子,执行测试,避免对以前的内容造成影响

工具

husky
- 操作 git 钩子的工具
lint-staged
- 本地暂存代码检查工具
commitlint
- commit 信息校验工具
commitizen
辅助 commit 信息 ,就像这样,通过选择输入,规范提交信息

安装流程

1.安装代码校验依赖

npm i lint-staged husky -D
npm set-script prepare "husky install" # 在package.json中添加脚本
npm run prepare # 初始化husky,将 git hooks 钩子交由,husky执行

初始化 husky, 会在根目录创建 .husky 文件夹

npx husky add .husky/pre-commit "npx lint-staged"

pre-commit 执行 npx lint-staged 指令

根目录创建 .lintstagedrc.json 文件控制检查和操作方式

{
    "*.{js,jsx,ts,tsx}": ["prettier --write .", "eslint  --fix"],
    "*.md": ["prettier --write"]
}

2.安装提交信息依赖

npm i commitlint @commitlint/config-conventional -D
npx husky add .husky/commit-msg 'npx --no-install commitlint --edit "$1"'

@commitlint/config-conventional 这是一个规范配置,标识采用什么规范来执行消息校验, 这个默认是Angular的提交规范

类型	描述
build	编译相关的修改，例如发布版本、对项目构建或者依赖的改动
chore	其他修改, 比如改变构建流程、或者增加依赖库、工具等
ci	持续集成修改
docs	文档修改
feat	新特性、新功能
fix	修改bug
perf	优化相关，比如提升性能、体验
refactor	代码重构
revert	回滚到上一个版本
style	代码格式修改, 注意不是 css 修改
test	测试用例修改

commit-msg 钩子执行消息校验
这里也可以采用自己写的方法,来校验内容, 看下vue@next 的消息提交

我们也可以使用自己写的方法,设置的话使用一下指令

npx husky add .husky/commit-msg 'node [dir]/filename.js' # 指定目录文件

3.安装辅助提交依赖

npm i commitizen cz-conventional-changelog -D

安装指令和命令行的展示信息

npm set-script commit "git-cz" # package.json 中添加 commit 指令, 执行 `git-cz` 指令

编写commit指令

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

初始化命令行的选项信息,不然没有选项

4.自定义提交规范

npm i -D commitlint-config-cz  cz-customizable

变更 commitlint.config.js 这里采用自己定义的规范,将会覆盖上面那个,所以上面那个可以不用安装

增加 .cz-config.js

  'use strict'
  module.exports = {
    types: [
      { value: '✨新增', name: '新增:    新的内容' },
      { value: '🐛修复', name: '修复:    修复一个Bug' },
      { value: '📝文档', name: '文档:    变更的只有文档' },
      { value: '💄格式', name: '格式:    空格, 分号等格式修复' },
      { value: '♻️重构', name: '重构:    代码重构，注意和特性、修复区分开' },
      { value: '⚡️性能', name: '性能:    提升性能' },
      { value: '✅测试', name: '测试:    添加一个测试' },
      { value: '🔧工具', name: '工具:    开发工具变动(构建、脚手架工具等)' },
      { value: '⏪回滚', name: '回滚:    代码回退' }
    ],
    scopes: [
      { name: 'leetcode' },
      { name: 'javascript' },
      { name: 'typescript' },
      { name: 'Vue' },
      { name: 'node' }
    ],
    // it needs to match the value for field type. Eg.: 'fix'
    /*  scopeOverrides: {
      fix: [
        {name: 'merge'},
        {name: 'style'},
        {name: 'e2eTest'},
        {name: 'unitTest'}
      ]
    },  */
    // override the messages, defaults are as follows
    messages: {
      type: '选择一种你的提交类型:',
      scope: '选择一个scope (可选):',
      // used if allowCustomScopes is true
      customScope: 'Denote the SCOPE of this change:',
      subject: '短说明:\n',
      body: '长说明，使用"|"换行(可选)：\n',
      breaking: '非兼容性说明 (可选):\n',
      footer: '关联关闭的issue，例如：#31, #34(可选):\n',
      confirmCommit: '确定提交说明?(yes/no)'
    },
    allowCustomScopes: true,
    allowBreakingChanges: ['特性', '修复'],
    // limit subject length
    subjectLimit: 100
  }

package.json 中,将原来commit配置,变更为自定义配置
然后提交会变成这样

3.测试

单元测试

jest
测试三部曲
input&output

配置jest

前往 jest 文档,根据需求添加内容
www.jestjs.cn/docs/gettin…

提交代码的测试运行

npx husky add .husky/pre-push "npm test" # 提交代码前,跑一遍测试用例

思维导图

前端工作流.png

Eslint + Prettier + Husky + Commitlint+ Lint-staged 规范前端工程代码规范