Vue3+Vite项目配置Eslint+Prettier+Husky+Lint-Staged+Commitlint

Eslint 配置

ESLint 是一个插件化并且可配置的 JavaScript 语法规则和代码风格的检查工具。 ESLint 能够帮你轻松写出高质量的 JavaScript 代码。

1.建议 vscode 安装 Eslint 的插件，这个插件的作用是不符合 Eslint 规范的代码在编辑器中会有波浪线以及提示。
2.安装依赖包，eslint，eslint-plugin-vue 3.在根目录新建.eslintrc.js文件，里面的 eslint 的配置。
3.在 vscode 的用户配置文件中需要加入以下配置，来控制保存时候就可以修复代码：

{
  /* eslint配置 */
  "eslint.enable": true, // 是否开启eslint
  "eslint.alwaysShowStatus": true, // 底部eslint状态栏显示
  // code代码保存时，自动eslint修复
  "editor.codeActionsOnSave": {
    "source.fixAll.eslint": true
  },
  "eslint.validate": ["javascript", "javascriptreact", "html", "vue", "vue-html"]
}

Prettier 配置

Prettier 是一个强大的格式化代码工具，支持大量的编程语言，统一了风格，推荐使用。
1.需要在 vscode 中安装插件，搜索出来安装即可。
2.需要在根目录新建 .prettierrc文件，在里面配置的才会生效，如果想统一在 vscode 用户配置中生效，需要在用户配置中加一行"prettier.useEditorConfig": false,，才会使全局中配置的生效，不然默认是需要新建文件才起作用。

{
  "tabWidth": 2,
  "useTabs": false,
  "printWidth": 80, // vscode默认80字符
  "eslintIntegration": true,
  "endOfLine": "auto", // 指定文件的结尾换行符
  "htmlWhitespaceSensitivity": "ignore" // 解决格式化时标签属性等太多导致结束标签错乱不对齐的问题
}

Eslint 和 Prettier 结合

我们需要两者结合起来，用 eslint 负责修复代码，prettier 负责格式化代码，但是直接两者结合直接是会冲突，导致代码不能正常修复和格式化，需要引入另外两个包来用，eslint-config-prettier,eslint-plugin-prettier。
需要在以上基础上，在根目录新建.eslintrc.js文件，把 eslint 和 prettier 都配置进去生效。

/**
 * eslint配置
 */
module.exports = {
  root: true,
  env: {
    browser: true,
    node: true,
    es6: true,
  },
  parser: "vue-eslint-parser",
  parserOptions: {
    ecmaVersion: 2022, // 使用的 ECMAScript  版本
    sourceType: "module",
    ecmaFeatures: {
      jsx: true, // 开启jsx模板支持
    },
  },
  extends: ["eslint:recommended", "plugin:vue/vue3-recommended", "plugin:prettier/recommended"],
  rules: {
    /* 常规规则 */
    "spaced-comment": [2, "always"], // 注释后面必须写两个空格
    "no-unused-vars": "off", // 忽略未使用的变量
    "no-unreachable": "off", // 忽略return后未执行代码的提示
    "no-empty": "off", // 忽略代码必须返回结果的限制
    "no-prototype-builtins": "off", // 忽略不能直接使用Object原型的一些方法

    /* vue规则 */
    "vue/no-unused-components": "off", // vue忽略未使用组件提示
    "vue/no-unused-vars": "off", // vue忽略未使用的变量
    "vue/return-in-computed-property": "off", // vue忽略函数必须返回值
    "vue/multi-word-component-names": "off", // vue忽略文件名建议的短横单词分割
    "vue/no-reserved-component-names": "off", // vue忽略不能使用html标签当组件名的规则
    "vue/comment-directive": "off",
  },
};

至此已经可以实现在开发项目时按保存就能修复代码和格式化的功能，可以简单满足一个项目的规范。如果想严格控制 eslint 并错误输出，以及控制提交 git 的规范，就需要更多的配置，请往下继续看。

Vite 中输出 eslint 错误信息

1.先安装vite-plugin-eslint的包，在 vite.config.js 中的 plugins 中配置，在

import vitePluginEslint from "vite-plugin-eslint";

export default defineConfig(({ command, mode }) => {
  const env = loadEnv(mode, CWD);
    /* 插件配置 */
    plugins: [
      // eslint校验，在development开发模式下起作用
      mode === "development" &&
        vitePluginEslint({
          // lintOnStart: true, // 启动时候是否就执行eslint校验，如果开启的话有eslint的报错则服务是会启动失败
        }),
    ],
});

Husky 配置

husky 能够实现 git hooks ，就是在我们使用 git 命令的时候，执行一些操作等，如文中我们就是在 git commit 时执行 eslint 和 commitlint 规范检测。

1.安装依赖

pnpm i husky -D

2.在 package.json 中的 scripts 脚本里新加一行

{
  "scripts": {
    "prepare": "husky install"
  }
}

3.使用pnpm prepare执行脚本，会在根目录下有一个 .husky的目录，运行npx husky add .husky/pre-commit "pnpm run eslint"，这时会在这个.husky/pre-commit中有一条命令pnpm run eslint，当 git commit 时候，会先运行 eslint 的脚本校验整个项目，通过后才可以提交成功。

4.如果你还想用 lint-staged 和 commitlint ，请继续往下看配置。

Lint-Staged 配置

上面钩子有了后，提交会 eslint 项目所有的，这样项目大的话比较慢，需要配合 lint-staged 来提交时只校验暂存区中的文件，这样每次提交会大大节省时间。 1.安装 lint-staged

pnpm i lint-staged

2.在 package.json 中新增配置

{
  "lint-staged": {
    "src/**/*.{js,ts,tsx,jsx,vue}": ["pnpm lint:fix", "prettier --write"],
    "src/**/*.{css,less,scss}": ["prettier --write"],
    "src/**/*.{md,json}": ["prettier --write"]
  }
}

当然也可以单独抽离一个文件.lintstagedrc.js，配置是

/**
 * lint-staged 校验暂存区的文件
 */
module.exports = {
  "src/**/*.{js,ts,tsx,jsx,vue}": ["pnpm lint:fix", "prettier --write"],
  "src/**/*.{css,less,scss}": ["prettier --write"],
  "src/**/*.{md,json}": ["prettier --write"],
};

修改项目根目录.husky/pre-commit这个文件，把之前的pnpm run lint命令注释掉，新加一条命令 npx --no-install lint-staged。

#!/usr/bin/env sh
. "$(dirname -- "$0")/_/husky.sh"

# pnpm run lint # 这条注释掉不用了，因为我们要用lint-staged，只检测暂存区的代码
npx --no-install lint-staged

配置到这里仅控制提交已经结束，我们可以找个 vue 文件试验一下，先 git add .，再执行 git commit -m '测试'，会发现控制台会一直输出校验的内容，在lint-staged中配置的命令会帮我们自动修复代码，如果自动修复失败，会在控制台报错提示。

Commitlint 配置

commitlint 是控制代码提交规范的一个插件包，因为每个人的提交信息不一样，比如修复 bug 和新加功能等不同类别的 commit 信息都可能会比较乱，没有一个机制很难保证规范化，现在可以利用 git 的 hook 机制可以实现控制提交信息。

安装依赖包 commitlint/config-conventional 和 commitlint/cli

# 安装这两个依赖包
pnpm i @commitlint/config-conventional @commitlint/cli -S

在项目根目录的控制台运行命令 npx husky add .husky/commit-msg 'npx --no-install commitlint --edit ${1}'，这时会自动在根目录 .husky 下新增文件 commit-msg，其中内容如下：

#!/usr/bin/env sh
. "$(dirname -- "$0")/_/husky.sh"

npx --no-install commitlint --edit $1

然后在项目根目录下新增 .commitlintrc.js 配置文件

module.exports = {
  // 继承的规则
  extends: ["@commitlint/config-conventional"],
  // 定义规则类型
  rules: {
    // type 类型定义，表示 git 提交的 type 必须在以下类型范围内
    "type-enum": [
      2,
      "always",
      [
        "feat", // 增加新功能
        "fix", // 修复 bug
        "add", // 增加代码逻辑
        "del", // 删除功能
        "update", // 更新功能
        "docs", // 文档相关的改动
        "style", // 不影响代码逻辑的改动，例如修改空格，缩进等
        "build", // 构造工具或者相关依赖的改动
        "refactor", //  代码重构
        "revert", // 撤销，版本回退
        "test", // 添加或修改测试
        "perf", // 提高性能的改动
        "chore", // 修改 src 或者 test 的其余修改，例如构建过程或辅助工具的变动
        "ci", // CI 配置，脚本文件等改动
      ],
    ],
    // subject 大小写不做校验
    "subject-case": [0],
  },
  plugins: [
    {
      rules: {
        "commit-rule": ({ raw }) => {
          return [
            /^\[(feat|fix|add|del|update|docs|style|build|refactor|revert|test|perf|chore)].+/g.test(raw),
            `commit备注信息格式错误，格式为 <[type] 修改内容>，type支持${types.join(",")}`,
          ];
        },
      },
    },
  ],
};

当我们 commit 提交信息时，就不能再随意写了，必须是 git commit -m 'fix: xxx' 符合类型的才可以，需要注意的是类型的后面需要用英文的 :，并且冒号后面是需要空一格的，这个是不能省略的。

结语

基于 Vue3+Vite+Pnpm+Vant3+Pinia+Vue-Router+Eslint+Prettier+Husky+lint-staged+commitlint 的开源的移动端模板，框架结构和命名采用前端目前通用的风格，可以适用于小型的想尝试用Vue3新技术的webapp项目，在此基础上进行二次开发。

github源码地址：https://github.com/qq575792372/vant-h5-template-plus