已有vue2项目添加eslint自动格式化,Eslint (standard)+ Husky + Lint-staged+prettier

步骤一:集成standard标准的eslint进你的项目中

首先准备一个没有加入eslint的vue项目
1.安装eslint的包
npm i eslint -D
2.初始化eslint,并生成eslint配置文件
npx eslint --init
已有vue2项目添加eslint自动格式化,Eslint (standard)+ Husky + Lint-staged+prettier_第1张图片

3.依次按照问题选择自己需要的配置
你想要的怎么使用eslint?
选择第三个:检查,发现问题,并且约束代码风格
已有vue2项目添加eslint自动格式化,Eslint (standard)+ Husky + Lint-staged+prettier_第2张图片
你的项目使用的是什么模块?
选择第一个,js (也就是es6模块)
已有vue2项目添加eslint自动格式化,Eslint (standard)+ Husky + Lint-staged+prettier_第3张图片
你使用的项目框架为?
选择第二个vue
已有vue2项目添加eslint自动格式化,Eslint (standard)+ Husky + Lint-staged+prettier_第4张图片
你的项目使用了ts吗?
选择no,没使用
已有vue2项目添加eslint自动格式化,Eslint (standard)+ Husky + Lint-staged+prettier_第5张图片
你的代码运行在什么环境?
记得一定要把两个都勾上,运行在浏览器和node环境
已有vue2项目添加eslint自动格式化,Eslint (standard)+ Husky + Lint-staged+prettier_第6张图片
你想为你的项目怎么定义eslint风格?
选择第一个:使用一个流行的风格指导
第二个的意思为:通过回答问题来生成你自己的风格
已有vue2项目添加eslint自动格式化,Eslint (standard)+ Husky + Lint-staged+prettier_第7张图片
哪种eslint风格你想要的遵守?
选择standard风格(这里看自己的eslint倾向性了,也可以选airbnb)
已有vue2项目添加eslint自动格式化,Eslint (standard)+ Husky + Lint-staged+prettier_第8张图片
你的配置文件的格式是什么?
选择第一个:使用js格式
已有vue2项目添加eslint自动格式化,Eslint (standard)+ Husky + Lint-staged+prettier_第9张图片
这里列出了需要安装的包,它问你是否要立即安装?
选择yes
已有vue2项目添加eslint自动格式化,Eslint (standard)+ Husky + Lint-staged+prettier_第10张图片
你想使用的哪种包管理器?
选择npm
已有vue2项目添加eslint自动格式化,Eslint (standard)+ Husky + Lint-staged+prettier_第11张图片
最终完整的配置如下:
已有vue2项目添加eslint自动格式化,Eslint (standard)+ Husky + Lint-staged+prettier_第12张图片

最后你会发现你的代码已经加入进去了eslint的各种包,以及生成了eslint的配置文件。
已有vue2项目添加eslint自动格式化,Eslint (standard)+ Husky + Lint-staged+prettier_第13张图片
但是,此时你可能会感到很疑惑,我到底是把eslint加进去了没有?毕竟运行没有报错,git commit也不会报错。
答:此时的项目状态是:你已经把带有standard标准的eslint集成到你的项目中了。但是你并没有使用它。
如何验证已经有eslint并可以使用了?
在package.json中的scripts增加这行代码:“lint”: “eslint src/**/*.{js,vue} --fix”
已有vue2项目添加eslint自动格式化,Eslint (standard)+ Husky + Lint-staged+prettier_第14张图片
然后运行 npm run lint 命令,eslint就会启动起来工作去检测src下的文件并进行修复。如图,你可能会得到以下错误:
已有vue2项目添加eslint自动格式化,Eslint (standard)+ Husky + Lint-staged+prettier_第15张图片
这些错误说明了你已经集成了eslint。此时我们需要进行下一步,就是在git commit的时候自动去检测并修复代码。

步骤二:添加git commit时自动触发eslint进行检测并修复

工具前置知识,工具介绍:

  • 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"
    ]
  }
}

已有vue2项目添加eslint自动格式化,Eslint (standard)+ Husky + Lint-staged+prettier_第16张图片
二:安装配置 husky:实现在git 提交时执行 lint-staged
(1).安装依赖包

npm i husky --save-dev

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

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

已有vue2项目添加eslint自动格式化,Eslint (standard)+ Husky + Lint-staged+prettier_第17张图片
(3)配置后执行 npm i 就会在项目根目录生成 .husky/_ 目录。
已有vue2项目添加eslint自动格式化,Eslint (standard)+ Husky + Lint-staged+prettier_第18张图片
(4)执行以下代码,使用 husky 生成 git 操作的监听钩子脚本

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

已有vue2项目添加eslint自动格式化,Eslint (standard)+ Husky + Lint-staged+prettier_第19张图片
执行后成功后会生成脚本文件 .husky/pre-commit (在vscode中可以看到),它包含了命令行语句: npx lint-staged
已有vue2项目添加eslint自动格式化,Eslint (standard)+ Husky + Lint-staged+prettier_第20张图片
到此你就完成了git commit时自动去触发eslint的检测和修复。测试一下:
修改部分代码(一定要修改下,因为lint-staged是对暂存区的文件进行检测),然后git add . git commit一下,有以下的代码出现,就说明git commit时自动触发了eslint
已有vue2项目添加eslint自动格式化,Eslint (standard)+ Husky + Lint-staged+prettier_第21张图片
已有vue2项目添加eslint自动格式化,Eslint (standard)+ Husky + Lint-staged+prettier_第22张图片
接下来手动修复下错误:这些错误都是eslint无法自动修复的,需要我们自己手动修复。这些eslint的错误,修复起来很简单,直接copy下来百度就ok了。这里不做详细的说明了。
最后,添加prettier,让eslint来做检测,让prettier主要做格式化。关于是否有必要添加prettier,以及添加prettier的好处都在上一篇文章说明了,可以跳转查看,这里就不赘述了。

步骤三:加入prettier

1.安装必须的包

  • prettier - prettier 本体
  • eslint-config-prettier - 关闭 ESLint 中与 Prettier 中发生冲突的规则
  • eslint-plugin-prettier - 将 Prettier 的规则设置到 ESLint 的规则中
npm i prettier eslint-config-prettier@6 eslint-plugin-prettier@3 -D

安装时的报错解决:指定某个大版本就ok了,这个报错很明显是因为eslint和eslint-plugin-prettier的版本搭配不正确导致的。如果你的eslint版本高,不会报错,就不用指定某个大版本
6393df06b66d9c825dfd4217feaf1c83_1681838372805-2dfcc356-b99a-4a41-8494-86cd173f7d30.png
2.在根目录添加一个 .prettierrc.js 文件,内容如下:

module.exports = {
  tabWidth: 4, // 指定每个缩进级别的空格数,默认2
  useTabs: false, // 用制表符而不是空格缩进行,默认false
  printWidth: 300, //一行的字符数,如果超过会进行换行,默认为80
  singleQuote: true, //字符串是否使用单引号,默认为false,使用双引号
  endOfLine: 'auto', //避免报错delete (cr)的错
  proseWrap: 'always',
  semi: false, // 不加分号
  trailingComma: 'none', // 结尾处不加逗号
  htmlWhitespaceSensitivity: 'ignore', // 忽略'>'下落问题
}

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

const { defineConfig } = require('eslint-define-config')

module.exports = defineConfig({
  /// ...
  extends: [
   'plugin:vue/essential',
    '@vue/standard'
    'plugin:prettier/recommended'
  ],
  // ...
})

总结:

已有项目添加eslint,确实比一开始初始化生成eslint的时候麻烦的多了。建议大家真想用eslint就一开始就加入进去。后期加进去的话,需要花挺多的时间和精力去处理eslint问题。
另外的话,这里的博客是使用的vue2进行的演示,其实vue3添加eslint的步骤是一模一样的。主要问题在于版本问题,vue2的会有更多的版本搭配问题,其实vue3还更简单。
本次vue2的项目源码地址:https://github.com/rui-rui-an/vue2_add_eslint_prettier

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