Eslint:创建vite+vue3项目，并添加eslint,vite+vue3+ts+eslint+husky+lint-staged

前置知识：

因为vue3项目添加standard规则需要解决比较多的bug，这里建议大家还是直接使用内置的eslint+prettier+自定义规则。如果项目里确实需要添加standard/airbnb规则的话，可以参考这篇博客:https://blog.csdn.net/qq_41581588/article/det烦ails/130052727,我已经实践过了，确实可以使用standard规则来约束代码。
本篇博客主要讲的是在创建vue3项目时如何加入eslint+prettier+提交检测。

1.创建一个vite项目

命令：npm create vite@latest
这里放个图，这个是每一步的选择：
解析版本：

然后执行这些步骤：

由于这里生成的没有git仓库，所以我们git init来生成一个仓库。然后git add . ，git commit- m"" 来进行初次提交。

此时我们的项目状态为：vue3+ts+vue-router+pinia+eslint+prettier。但是有一点，还不能在git commit的时候主动的去检测代码，只能通过npm run lint 进行代码检测,npm run format进行代码修复。

运行npm run lint之后，发现没有任何变化（eslint中没有添加很多的规则，导致通过了），但是在运行npm run format发现，发现确实帮我们做了格式化（根据.prettierrc.json文件中的内容格式化了）。

出现这个的原因是因为，通过这种方式创建的vue项目只是加入了eslint和prettier，并没有让两者联系起来，即没有把prettier加入到eslint中。

2.将prettier的规则加入到eslint中

此时我们需要安装（prettier已经安装，就不用重复安装了）

eslint-config-prettier - 关闭 ESLint 中与 Prettier 中发生冲突的规则
eslint-plugin-prettier - 将 Prettier 的规则设置到 ESLint 的规则中

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

修改 ESLint 配置，使 Eslint 兼容 Prettier 规则
plugin:prettier/recommended 的配置需要注意的是，一定要放在最后。因为extends中后引入的规则会覆盖前面的规则。也就是说你可以在.prettierrc.json 中定义自己的风格代码。到时候，本地的prettier插件会根据这个文件来格式化，项目安装的prettier也会根据该文件来格式化。且eslint的风格与prettier风格冲突的地方会以prettier为主

/* eslint-env node */
require('@rushstack/eslint-patch/modern-module-resolution')

module.exports = {
    
    
  root: true,
  extends: [
    'plugin:vue/vue3-essential',
    'eslint:recommended',
    '@vue/eslint-config-typescript',
    '@vue/eslint-config-prettier/skip-formatting',
    'plugin:prettier/recommended'
  ],
  parserOptions: {
    
    
    ecmaVersion: 'latest'
  },
  rules: {
    
    
  }
}

此时你再运行npm run lint，就会发现已经帮你格式化好了。我们只需要加入commitLint即可。

3.添加commitLint

工具前置知识，工具介绍：

lint-staged 是一个专门针对已放入 Git 暂存区的文件进行检查的工具
husky 能提供监听 Git 操作并执行脚本代码的能力

一：安装配置 lint-staged：实现专门针对 git 暂存区的文件进行风格检查
(1).安装依赖包

npm i lint-staged --save-dev

(2).在 package.json 中配置 lint-staged，利用它来调用 eslint 和 stylelint 去检查暂存区内的代码

{
    
    
  // ...
  "lint-staged": {
    
    
    "*.{vue,js}": [
      "npm run lint"
    ]
  }
}

在这里插入图片描述

二：安装配置 husky：实现在git 提交时执行 lint-staged
(1).安装依赖包

npm i husky --save-dev

(2)在 package.json中配置快捷命令，用来在安装项目依赖时生成 husky 相关文件

{
    
    
  // ...
  "scripts": {
    
    
    // ...
    "postinstall": "husky install"
  },
}

在这里插入图片描述

(3)配置后执行 npm i 就会在项目根目录生成 .husky/_ 目录。

npm i

(4)执行以下代码,使用 husky 生成 git 操作的监听钩子脚本

npx husky add .husky/pre-commit "npx lint-staged"

执行后成功后会生成脚本文件 .husky/pre-commit （在vscode中可以看到），它包含了命令行语句： npx lint-staged
在这里插入图片描述

到此你就完成了git commit时自动去触发eslint的检测和修复。测试一下：
修改部分代码（一定要修改下，因为lint-staged是对暂存区的文件进行检测），然后git add . git commit一下，有以下的代码出现，就说明git commit时自动触发了eslint

注意

值得注意的是，a.这种方式创建的项目，规则很少，适合自己自定义eslint规则。因为刚初始化好的eslint规则只加入了一些推荐的eslint。如果自己需要自定义规则的话，可以在.prettierrc.json或者.eslintrc.cjs的rules中去添加自己的规则。.prettierrc.json定义的规则>.eslintrc.cjs中定义的

extends: [
    'plugin:vue/vue3-essential',
    'eslint:recommended',
    '@vue/eslint-config-typescript',
    '@vue/eslint-config-prettier/skip-formatting'
],

b.这种方式创建的项目，自己再去加入standard规则会变得麻烦，如果你使用这种方式（customize with create-vue）创建项目再使用npx eslint --init来初始化标准规则的eslint的话，会有很多报错需要解决(这个坑没必要踩)。
c.如果是确实需要standard或者airbnb规则。可以看我下一篇文章

补充

大家在做vue3项目的时候推荐这几款插件配合开发，开发的嘎嘎快。