本文使用的是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的操作了。
完结，撒花。
