【Vue】EsLint+Husky 实现代码提交时自动校验

本文使用的是vite init 创建的vue3项目，所以项目中本来是不带有eslint相关的信息的，相当于从头配置。

目录

1.创建项目

创建项目

2.添加EsLint

安装EsLint依赖

初始化Eslint

安装elint解析器【babel-eslint】

.eslintrc.js

排除不检查的文件夹

IDE配置

配置lint命令

 3.配置git提交时校验

Husky安装与配置

测试

配置【package.json】

---

1.创建项目

这一步不是重点，有使用过vite创建想目的或者已经有项目的直接看【第二节】。

创建项目

执行命令

// 创建项目
npm init vite-app .

// 安装依赖
npm i

// 运行项目
npm run dev

但是这么创建 默认是vite1.0 直接修改【package.json】中的vite版本升级到2.0（我这里使用的是2.6.14）以上的版本，之后再去执行【npm i】命令 。

2.添加EsLint

安装EsLint依赖

npm i eslint -s -d

初始化Eslint

制定命令，选择适合自己的配置项

npx eslint --init

当上述都执行完了之后项目中会生成【.eslintrc.js】文件，这个就是eslint的配置文件，这个文件也可以自己修改。

安装elint解析器【babel-eslint】

 npm i babel-eslint -s -d

.eslintrc.js

这里只对项目中遇到的配置进行介绍

module.exports = {
  // 环境配置
  env: {
    // 启用浏览器全局变量。
    browser: true,
    // 启用ES6的功能。
    es6: true,
    // Node.js全局变量和Node.js范围。
    node: true,
    // vue3 script中写setup的语法
    'vue/setup-compiler-macros': true
  },
  extends: [
    'plugin:vue/essential',// 基本的校验
    'standard' // 初始化配置中选择的代码风格
  ],
  // 解析器选项
  parserOptions: {
    // ES的版本 默认是latest 但是我们只需要到es6即可
    ecmaVersion: 6,
    // 指定源代码存在的类型，script或者module，默认为script。
    sourceType: 'module',
    // ESLint使用Espree解析器
    parser: 'babel-eslint',
  },
  plugins: [
    'vue'
  ],
  // 可以自己配置一些规则
  rules: {
    // 正式环境不允许出现 console
    'no-console': process.env.NODE_ENV === 'production' ? 'warn' : 'off',
    // 正式环境不允许出现 debugger
    'no-debugger': process.env.NODE_ENV === 'production' ? 'warn' : 'off',
    // 下面是为了兼容vue3 关闭了一些校验规则
    'vue/no-v-model-argument': 'off',
    'vue/no-mutating-props': 'off',
    'vue/no-multiple-template-root': 'off',
    'vue/multi-word-component-names': 'off'
  }
}

排除不检查的文件夹

在项目根目录中添加 【.eslintignore】文件

/node_modules
/dist
/src/assets
/package-lock.json

到这eslint就已经配置好了。

IDE配置

我用的webstrom

 这里随便找个文件进行测试

这就已经成功了，但是发现webstrom的格式化与eslint冲突这时，先右键【.eslintrc.js】文件，之后如如图，应用eslint代码规范的样式。这之后再去格式化代码就发现已经不再冲突了。

配置lint命令

在【package.json】文件内【scripts】标签中配置【lint】（这个名随便起叫test也行）

"lint": "eslint \"src/**/*.{js,jsx,vue}\" --fix",

这时候在命令行输入下面的命令即可进行代码的校验。

npm run lint 

 3.配置git提交时校验

首先确定你的项目在git中，如果不再git里面下面无法操作

Husky安装与配置

 npm i husky -D

之后执行以下husky的命令进行初始化，初始化之后会发现在项目的根目录下面会出现【.husky】文件夹

npx husky install

执行添加husky脚本的命令

npx husky add  .husky/pre-commit "npm run lint"


// 如果执行这个命令需要后续自己添加脚本
npx husky add  .husky/pre-commit 

如果这段代码没有执行成功就把后面的 【“npm run lint”】去掉，并直接执行，后续在脚本中自行添加便可

 这时候就git得配置就完成了。

测试

 这时就已经完成了。

配置【package.json】

为什么还要配置【package.json】文件那，因为现在的git提交校验只在自己电脑上起作用，如果想要别人拉下来代码就能直接限制校验，则需要配置【package.json】中的【sctipts】。

prepare，这个命令是在 执行 npm install之后便会执行于是我们便以下配置

 这样就完成了每个人拉下来代码就能启用git提交前必须先进行eslint的操作了。

完结，撒花。