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
这里放个图,这个是每一步的选择:
Eslint:创建vite+vue3项目,并添加eslint,vite+vue3+ts+eslint+husky+lint-staged_第1张图片解析版本:
Eslint:创建vite+vue3项目,并添加eslint,vite+vue3+ts+eslint+husky+lint-staged_第2张图片
然后执行这些步骤:
image.png
由于这里生成的没有git仓库,所以我们git init来生成一个仓库。然后git add . ,git commit- m"" 来进行初次提交。
image.png
此时我们的项目状态为:vue3+ts+vue-router+pinia+eslint+prettier。但是有一点,还不能在git commit的时候主动的去检测代码,只能通过npm run lint 进行代码检测,npm run format进行代码修复。
Eslint:创建vite+vue3项目,并添加eslint,vite+vue3+ts+eslint+husky+lint-staged_第3张图片
运行npm run lint之后,发现没有任何变化(eslint中没有添加很多的规则,导致通过了),但是在运行npm run format发现,发现确实帮我们做了格式化(根据.prettierrc.json文件中的内容格式化了)。
Eslint:创建vite+vue3项目,并添加eslint,vite+vue3+ts+eslint+husky+lint-staged_第4张图片
出现这个的原因是因为,通过这种方式创建的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"
    ]
  }
}

Eslint:创建vite+vue3项目,并添加eslint,vite+vue3+ts+eslint+husky+lint-staged_第5张图片

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

npm i husky --save-dev

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

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

Eslint:创建vite+vue3项目,并添加eslint,vite+vue3+ts+eslint+husky+lint-staged_第6张图片

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

npm i 

Eslint:创建vite+vue3项目,并添加eslint,vite+vue3+ts+eslint+husky+lint-staged_第7张图片
(4)执行以下代码,使用 husky 生成 git 操作的监听钩子脚本

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

Eslint:创建vite+vue3项目,并添加eslint,vite+vue3+ts+eslint+husky+lint-staged_第8张图片
执行后成功后会生成脚本文件 .husky/pre-commit (在vscode中可以看到),它包含了命令行语句: npx lint-staged
Eslint:创建vite+vue3项目,并添加eslint,vite+vue3+ts+eslint+husky+lint-staged_第9张图片

到此你就完成了git commit时自动去触发eslint的检测和修复。测试一下:
修改部分代码(一定要修改下,因为lint-staged是对暂存区的文件进行检测),然后git add . git commit一下,有以下的代码出现,就说明git commit时自动触发了eslint
Eslint:创建vite+vue3项目,并添加eslint,vite+vue3+ts+eslint+husky+lint-staged_第10张图片

注意

值得注意的是,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项目的时候推荐这几款插件配合开发,开发的嘎嘎快。
Eslint:创建vite+vue3项目,并添加eslint,vite+vue3+ts+eslint+husky+lint-staged_第11张图片

你可能感兴趣的:(vue.js,前端,javascript)