vue3 + typescript 项目集成 eslint + prettier + husky

使用 eslint + prettier 格式化代码：

1，vscode 安装 prettier 和 eslint 插件

2，安装 eslint 相关依赖

npm i eslint @typescript-eslint/parser @typescript-eslint/eslint-plugin @vue/eslint-config-prettier @vue/eslint-config-typescript -D

​​​​​​3，安装 prettier 相关依赖

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

• eslint: eslint 的核心代码

• prettier：prettier 插件的核心代码

• eslint-config-prettier：解决 ESLint 中的样式规范和 prettier 中样式规范的冲突，以 prettier 的样式规范为准，使 ESLint 中的样式规范自动失效

• eslint-plugin-prettier：将 prettier 作为 ESLint 规范来使用

• eslint-plugin-vue：包含常用的 vue 规范

• @typescript-eslint/parser：ESLint 的解析器，用于解析 typescript，从而检查和规范 Typescript 代码

• @typescript-eslint/eslint-plugin：包含了各类定义好的检测 Typescript 代码的规范

 4，项目根目录新建 .prettierrc.js文件，内容如下：

module.exports = { 
    printWidth: 120, // 一行的字符数，如果超过会进行换行，默认为80
    semi: false, // 末尾不加分号
    singleQuote: true, // 使用单引号
    tabWidth: 2, // Tab字符的空格宽度
    trailingComma: 'es5', // 尾部逗号兼容es5
    arrowParens: 'avoid', // 箭头函数单个参数时省略括号
    endOfLine: 'auto', // 行尾换行符
}

 5，项目根目录建立 .eslintrc.js，配置如下：

module.exports = { 
    root: true, 
    env: {
        node:true,
    },
    parser: 'vue-eslint-parser', // 指定如何解析语法，可以为空，但若不为空，只能配该值 
    extends: [ 
        'plugin:vue/vue3-essential',
        'eslint:recommended', 
        '@vue/typescript/recommended', 
        '@vue/prettier', 
        '@vue/prettier/@typescript-eslint',
        'plugin:prettier/recommended',
    ],
    parser0ptions:{ 
        parser:'@typescript-eslint/parser', 
        ecmaVersion:2020,
        sourceType: 'module', 
    },
    rules: { 
        'no-console': process.env.NODE_ENV === 'production'? 'warn': 'off',
        'no-debugger': process.env.NODE_ENV === 'production'? 'warn': 'off',
    },
}

6，vscode 配置：根目录创建 .vscode/settings.json 

{
    "editor.defaultFormatter": "esbenp.prettier-vscode",
    "[typescript]": {
        "editor.defaultFormatter": "esbenp.prettier-vscode"
    },
    "[javascript]": {
        "editor.defaultFormatter": "esbenp.prettier-vscode"
    },
    "[vue]": {
        "editor.defaultFormatter": "esbenp.prettier-vscode"
    },
    "[json]": {
        "editor.defaultFormatter": "esbenp.prettier-vscode"
    },
    "editor.codeActionsOnSave": {
        // 每次保存的时候将代码按eslint格式进行修复
        "source.fixAll.eslint": true
    },
    "editor.tabSize": 2,
    "editor.formatOnSave": true,
    "eslint.format.enable": true,
}

 7，vscode需要设置 默认格式化工具为 prettier

git代码提交规范:

工具

husky：husky 是一款管理 git hooks 的工具，可以让我们更方便的管理 git hooks 脚本。它将在我们提交代码时触发不同的钩子，执行不同脚本，帮忙我们自动化的处理一些任务，比如执行 eslint 命令等。

commitlint：commitlint 是当前使用最广泛的git提交规范检验工具，能够较好的帮助我们在项目开发中，对提交信息的 message 规范进行校验。

commitizen：commit自动化提示工具，简称cz

cz-customizable：可自定义的cz适配器

lint-staged：只针对暂存区的文件进行检查处理，提升 lint 速度

8， 首先，安装 @commitlint/cli，@commitlint/config-conventional

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

• @commitlint/config-conventional 是基于 conventional commits 规范的配置文件。
• @commitlint/cli 是 commitlint 工具的核心。

配置commitlint，项目根目录创建commitlint.config.cjs文件

module.exports = {
  // 继承的规则
  extends: ['@commitlint/config-conventional'],
  // 定义规则类型
  rules: {
    // type 类型定义，表示git提交的type必须在以下类型范围内
    'type-enum': [
      2,
      'always',
      [
        'feat', //新功能
        'fix', //修复bug
        'docx', //文档变更
        'style', //修改代码格式，不影响代码逻辑
        'refactor', //代码重构，理论上不影响功能逻辑
        'perf', //性能优化
        'test', //增加测试
        'chore', //构建或其他工具的变动(如webpack)
        'revert', //还原以前的提交
        'build', //打包
      ],
    ],
    // subject 大小写不做校验
    'subject-case': [0],
  },
}

9，接着，安装 commitizen  cz-customizable，自动化提示工具，因为commitizen只支持英文，cz-customizable 可以支持中文指令

npm i commitizen cz-customizable -D

package.json 中添加 commit 指令, 执行 git-cz 指令

npm set-script commit "git-cz"

根目录创建 .cz-config.cjs 文件， 之后提交代码可以执行 npm run commit  替代 git commit

module.exports = {
  // 可选类型
  types: [
    { value: 'feat', name: 'feat:       新功能' },
    { value: 'fix', name: 'fix:        修复bug' },
    { value: 'docs', name: 'docs:       文档变更' },
    { value: 'style', name: 'style:      修改代码格式，不影响代码逻辑' },
    { value: 'refactor', name: 'refactor:   代码重构，理论上不影响功能逻辑' },
    { value: 'perf', name: 'perf:       性能优化' },
    { value: 'test', name: 'test:       增加测试' },
    { value: 'chore', name: 'chore:      构建或其他工具的变动(如webpack)' },
    { value: 'revert', name: 'revert:     还原以前的提交' },
    { value: 'build', name: 'build:      打包' },
  ],
  scopes:[
    ['deps','项目依赖'],
    ['components','组件相关'],
    ['styles','样式相关'],
  ].map(([value,description])=>{
    return {
      value,
      name: `${value.padEnd(30)}(${description})`
    }
  }),
  // 消息步骤
  messages: {
    type: '请选择提交类型(必填):',
    scope: '选择影响范围(可选):',
    customScope: '请输入文件修改范围(可选):',
    subject: '请简要描述提交(必填):',
    body: '请输入详细描述(可选):',
    footer: '请输入要关闭的issue(可选):',
    confirmCommit: '确认使用以上信息提交?(y/n/e/h):',
  },
  allowCustomScopes:true,
  // 跳过问题
  skipQuestions: ['body', 'footer'],
  // subject文字长度默认是72
  subjectLimit: 72,
}

在 package.json 中增加配置

"config": {
    "commitizen": {
      "path": "node_modules/cz-customizable"
    },
    "cz-customizable": {
      "config": ".cz-config.cjs"
    }
  },

测试一下，看看效果

10，使用husky进行强制git代码提交规范，安装 husky

npm i husky -D

添加脚本

npm set-script prepare "husky install && npx husky add .husky/commit-msg 'npx --no-install commitlint --edit $1' && npx husky add .husky/pre-commit 'npx lint-staged'" 

该脚本会在 npm install 之后自动执行，原因 prepare 是 npm install 之后的生命周期钩子。

脚本执行了三个指令：

husky install：初始化husky

npx husky add .husky/commit-msg 'npx --no-install commitlint --edit $1'：添加 commit-msg 钩子，校验提交信息

npx husky add .husky/pre-commit 'npx lint-staged'：添加 pre-commit 钩子，使用lint-staged 在暂存区对代码格式进行校验并修复

接着，需要安装 lint-staged 

npm i lint-staged -D

在package.json文件中增加内容，如下所示：

"lint-staged": {
    "src/**/*.{js,vue,ts}":[
     "eslint --fix",
     "git add"
    ]
}

这里先执行一次 prepare 脚本

npm run prepare

执行完，项目根目录下会自动生成如下文件：

 

 测试一下，由于没有按规范填写提交信息导致提交失败

 跳过 git hooks

如果不想进行校验，可以加上 --no-verify 参数

git commit -m '测试跳过hook' --no-verify

这样就能跳过校验，直接提交

以上，就是vue3 + typescript 项目集成 eslint + prettier + husky 的工程化配置