基于 husky 的代码检查工作流及ESLint & prettier 配置代码风格

基于 husky 的代码检查工作流及ESLint & prettier 配置代码风格

本文提供了如何配置基于 husky 的代码检查工作流及ESLint & prettier代码风格的初始化项目的详细操作步骤。

如果需要也可以直接使用配置好的项目模板直接下载即可：xjx_vue_project: 基于 husky 的代码检查工作流、ESLint & prettier 配置代码风格 (gitee.com)

该项目是pnpm创建，并且只配置了ESLint & prettier 代码风格以及基于husky 的代码检查，其他都与项目初始化文件相同。

目的：为了节省下次创建项目的一些ESLint & prettier 、husky 配置工作。

如果不用该模板也可以参考以下我的项目创建步骤

以下我创建该项目的步骤：

1.pnpm 包管理器 - 创建项目

一些优势：比同类工具快 2倍 左右、节省磁盘空间… https://www.pnpm.cn/

安装方式：

// 全局安装，之前安装过这一步可跳过
npm install -g pnpm

创建项目：

pnpm create vue

Windows PowerShell的相关步骤：

PS D:\Learning-vue> pnpm create vue
../.pnpm-store/v3/tmp/dlx-11564          |   +1 +
../.pnpm-store/v3/tmp/dlx-11564          | Progress: resolved 1, reused 1, downloaded 0, added 1, done

Vue.js - The Progressive JavaScript Framework

√ Project name: ... vue-project
√ Add TypeScript? ... No / Yes
√ Add JSX Support? ... No / Yes
√ Add Vue Router for Single Page Application development? ... No / Yes
√ Add Pinia for state management? ... No / Yes
√ Add Vitest for Unit Testing? ... No / Yes
√ Add an End-to-End Testing Solution? » No
√ Add ESLint for code quality? ... No / Yes
√ Add Prettier for code formatting? ... No / Yes

npm、yarn、pnpm的指令区别

2.ESLint & prettier 配置代码风格

2.1环境同步：

1. 安装了插件 ESlint，开启保存自动修复
2. 禁用了插件 Prettier，并关闭保存自动格式化

// 复制这段代码放在setting.josn中
// ESlint插件 + Vscode配置 实现自动格式化修复
"editor.codeActionsOnSave": {
    "source.fixAll": true
},
"editor.formatOnSave": false,

如下图操作，

2.2配置文件 .eslintrc.cjs

1. prettier 风格配置 https://prettier.io

   1. 单引号

   2. 不使用分号

   3. 每行宽度至多80字符

   4. 不加对象|数组最后逗号

   5. 换行符号不限制（win mac 不一致）

2. vue组件名称多单词组成（忽略index.vue）

3. props解构（关闭）

  // 这段代码放在.eslintrc.cjs文件中
  rules: {
    'prettier/prettier': [
      'warn',
      {
        singleQuote: true, // 单引号
        semi: false, // 无分号
        printWidth: 80, // 每行宽度至多80字符
        trailingComma: 'none', // 不加对象|数组最后逗号
        endOfLine: 'auto' // 换行符号不限制（win mac 不一致）
      }
    ],
    'vue/multi-word-component-names': [
      'warn',
      {
        ignores: ['index'] // vue组件名称多单词组成（忽略index.vue）
      }
    ],
    'vue/no-setup-props-destructure': ['off'], // 关闭 props 解构的校验
    // 💡 添加未定义变量错误提示
    'no-undef': 'error'
  }

3.连接远程创库

这里我是直接在VScode中直接安装Git Blame插件，然后启用该插件。

1. 初始化：git init

2. 在码云gitee中新建仓库

3. 关联仓库：git remote add origin git@gitee.com:xu-junxian/xjx_vue_project.git

   git remote add origin后面的是创建仓库的SSH

4. 添加到暂存区：git add .（注意这里有‘.’）

5. 提交暂存：git commit -m "这里可以对提交的消息进行备注"

6. 推送分支：git push -u origin 'master'

4.基于 husky 的代码检查工作流

**注意：**进行这一步时必须先连接远程仓库，否则创建不出.husky文件。

husky 是一个 git hooks 工具 ( git的钩子工具，可以在特定时机执行特定的命令 )

4.1husky 配置

初始化 husky 工具配置 https://typicode.github.io/husky/

pnpm dlx husky-init && pnpm install

修改 .husky/pre-commit 文件

pnpm lint

**问题：**默认进行的是全量检查，耗时问题，历史问题。

为了解决上述问题：这里还需进行以下步骤，从而实现只对git commit中的代码进行检查。耗时减少，且仅对自己改动的文件进行ESlint检查，不对未改动的代码文件检查

4.2.lint-staged 配置

1. 安装

pnpm i lint-staged -D

2. 配置 package.json

{
  // ... 省略 ...
  "lint-staged": {
    "*.{js,ts,vue}": [
      "eslint --fix"
    ]
  }
}

{
  "scripts": {
    // ... 省略 ...
    "lint-staged": "lint-staged"
  }
}

3. 修改 .husky/pre-commit 文件

// 将原来的pnpm lint改为
pnpm lint-staged

到这里就完成了ESLint、prettier、husky 所有配置工作，可以进行项目后续操作了。