前端工作流 · 规范化你的项目

Eslint+Prettier代码检查与格式化工具

通常代码检查的工作都会交由Eslint和Prettier完成，eslint负责检查代码是否有语法错误，而prettier则是负责检查代码的格式是否符合标准。

初始化项目

• 安装pnpm工具：npm install pnpm -g
• 初始化项目：pnpm create vite
• 把项目关联到git仓库：

// 初始化项目之后把项目关联到git仓库
git init
// 这里的仓库地址换成你自己的地址
git remote add origin git@github.com:iscottt/workflow-demo.git

安装配置Eslint

安装

pnpm i eslint -D
# ESLint 专门解析 TypeScript 的解析器
pnpm i @typescript-eslint/parser -D
# 内置各种解析 TypeScript rules 插件
pnpm i @typescript-eslint/eslint-plugin -D

pnpm i eslint-formatter-pretty -D
pnpm i eslint-plugin-json -D
pnpm i eslint-plugin-prettier -D
pnpm i eslint-plugin-vue -D
pnpm i @vue/eslint-config-prettier -D
pnpm i babel-eslint -D
pnpm i prettier -D

在项目根目录创建.eslintrc.cjs文件

module.exports =   {
  root: true,
  env: {
    browser: true,
    es2020: true,
    node: true,
    jest: true
  },
  globals: {
    ga: true,
    chrome: true,
    __DEV__: true
  },
  // 解析 .vue 文件
  parser: 'vue-eslint-parser', 
  extends: [
    'plugin:json/recommended',
    'plugin:vue/vue3-essential',
    'eslint:recommended',
    '@vue/prettier'
  ],
  plugins: ['@typescript-eslint'],
  parserOptions: {
    parser: '@typescript-eslint/parser' // 解析 .ts 文件
  },
  rules: {
    'no-console': process.env.NODE_ENV === 'production' ? 'warn' : 'off',
    'no-debugger': process.env.NODE_ENV === 'production' ? 'warn' : 'off',
    'prettier/prettier': 'error'
  }
}

创建.eslintignore文件，配置不需要进行验证的目录和文件

*.sh
node_modules
lib
coverage
*.md
*.scss
*.woff
*.ttf
src/index.ts
dist

最后在package.json中加入scripts脚本运行命令

{
  "scripts": {
    "lint": "eslint --fix --ext .ts,.vue src",
    "format": "prettier --write \"src/**/*.ts\" \"src/**/*.vue\"",
  },
}

执行pnpm lint进行代码校验

如果你的代码有语法问题，你会在控制台看到一些报错日志；如果没有则如下图：

Husky+git hooks自动化提交验证

为了确保只有合格的代码才能够提交到仓库。我们需要配置自动化脚本，确保代码在提交前通过了代码验证工具的检验。

安装Husky工具

pnpm i husky -D

在package.json中添加脚本并且运行

npm set-script prepare "husky install"
pnpm prepare

配置一个钩子，在commit之前必须要进行代码验证

// 添加生命周期
npx husky add .husky/pre-commit "pnpm lint"

// 修改 hooks 程序。编辑文件.husky/pre-commit
#!/bin/sh
. "$(dirname "$0")/_/husky.sh"

pnpm run lint

配置完成后，commit 一次代码测试一下是否有效。

Git ommit提交规范

提交规范主要是为了让开发者提交完整的更新信息。方便查阅。大家可以围观一下 Vue 的 Github。拥有清晰 commit 信息非常有助于查阅代码。

目前最为流行的提交信息规范来自于 Angular 团队。

• type：commit的类型
• feat：新功能、新特性
• fix：修改bug
• pref：更改代码以提高性能
• refactor：代码重构
• docs：修改文档
• style：代码格式修改（非css的修改）
• chroe：其他修改
• ci：持续集成相关文件修改
• release：发布新版本
• workflow：工作流相关文件修改
• revert：恢复上一次提交
• test：测试用例修改
• build：影响项目构建或依赖项修改

示例：

# 示例1
fix(global):修复button不能点击的问题
# 示例2 下面圆括号里的 common 为通用管理的名称
fix(common): 修复字体过小的BUG，将通用管理下所有页面的默认字体大小修改为 14px
# 示例3
fix: value.length -> values.length

下面配置一个工具用于在提交时自动检查 commit 信息是否符合要求。

安装工具验证脚本 commitlint，并且配置一个 commitlint 内容插件来确定一种 msg 风格。

# 安装commitlint
pnpm i -d @commitlint/config-conventional @commitlint/cli
# Configure commitlint to use conventional config
echo "module.exports = {extends: ['@commitlint/config-conventional']}" 

将 commitlint 脚本添加到 githooks 中， 让每次提交前都验证信息是否正常。

npx husky add .husky/commit-msg ""

// 编辑 .husky/commit-msg
#!/bin/sh
. "$(dirname "$0")/_/husky.sh"

npx --no -- commitlint --edit "$1"

测试提交，当你的commit不符合规范时，会阻止提交

获取源码

你可以在我的GitHub上面clone源码，或者点击下方下载按钮进行下载。

如果你觉得本篇文章对你有所帮助，可以帮我GitHub点个star或者请我喝杯奶茶~万分感谢🎉🎉🎉