前端工程化配置-husky + eslint + lint-staged-Toy模板网

这篇具有很好参考价值的文章主要介绍了前端工程化配置-husky + eslint + lint-staged。希望对大家有所帮助。如果存在错误或未考虑完全的地方，请大家不吝赐教，您也可以点击"举报违法"按钮提交疑问。

配置目标：每次代码提交前，进行代码格式校验，如未通过则禁止提交，可通过命令进行批量格式修复

配置步骤如下：

一、第一步eslint的配置：

1、下包
npm i eslint -D
或者
yarn add eslint

2、配置 ESlint
npx eslint --init

然后根据弹出的内容区选择你需要的规范。

1、你想怎么使用ESLint？

前端工程化配置-husky + eslint + lint-staged
2、你的项目使用哪个规范？

前端工程化配置-husky + eslint + lint-staged
3、你的项目使用哪个框架开发？

前端工程化配置-husky + eslint + lint-staged
4、你的项目使用 TypeScript 了吗？

前端工程化配置-husky + eslint + lint-staged
5、你的代码在哪里运行？

前端工程化配置-husky + eslint + lint-staged
6、你希望你的配置文件的格式是什么？

前端工程化配置-husky + eslint + lint-staged
7、需要再额外安装一些依赖包

前端工程化配置-husky + eslint + lint-staged

当你的文件栏中出现 .eslintrc.js，就说明安装成了。

二、第二步husky(哈士奇)配置

1.安装 husky

npm install husky --save-dev
or
yarn add husky --save-dev

2.修改 package.json 中 scripts 字段

"scripts": {
"prepare": "husky install"
}
前端工程化配置-husky + eslint + lint-staged
3.生成 .husky 文件夹

npm run prepare
or
yarn prepare

此时在当前项目的根目录下会生成一个 .husky 文件夹

前端工程化配置-husky + eslint + lint-staged

4.生成 pre-commit 文件

npx husky add .husky/pre-commit
or
yarn husky add .husky/pre-commit
在当前项目的 .husky 文件夹中创建了一个 pre-commit 文件

前端工程化配置-husky + eslint + lint-staged

5.修改 pre-commit 文件

npx lint-staged

前端工程化配置-husky + eslint + lint-staged

6.安装 lint-staged

lint-staged 是文件过滤器，它只会校验你提交或者说你修改的部分内容

npm install lint-staged --save-dev
or
yarn add lint-staged --save-dev

7.配置 package.json

"husky": {
"hooks": {
"pre-commit": "lint-staged"
}
},
"lint-staged": {
"src/**/*.{js,jsx,ts,tsx}": [
"prettier --write",
"eslint --fix"
]
}
前端工程化配置-husky + eslint + lint-staged
8.测试

找一个文件测试是否配置成功，增加一行无法通过 eslint 的代码

提交时就会报错拦截

最终配置截图：
前端工程化配置-husky + eslint + lint-staged

你以为到此为止了？

其实并没有，现在还不是毕竟完美的，针对react框架的话，应该基本够了，但是针对vue的话还存在一些瑕疵，如下：
eslint只对vue中js部分有效，template和css没有校验，基于此进行升级，需要搭配prettier进行使用，有的道友要问，为什么要搭配使用呢，我就想用其中的一种不行吗？答案是需要根据你具体的需求去进行组合，虽然说 ESLint 其实也具备一定的代码风格的格式化能力，但是在实践中，我们一般采用 ESlint 来做代码质量的约束，用 Prettier 来做代码风格的约束。

需要安装一些插件

"@vue/eslint-config-prettier": "^6.0.0",
"eslint-config-prettier": "^6.15.0",
"eslint-plugin-prettier": "^3.1.4",
"prettier": "^1.19.1",
"prettier-eslint": "^11.0.0",

然后.eslintrc文件更改一下配置：

前端工程化配置-husky + eslint + lint-staged

然后关掉vscode编译器重启就生效了

下面对安装以上插件做一些解释：

其实核心思路就是把prettier集合到eslint中，即扩展其功能

规则冲突

当 ESLint 的规则和 Prettier 的规则相冲突时，就会发现一个尴尬的问题，用其中一种来格式化代码，另一种就会报错。

prettier 官方提供了一款工具 eslint-config-prettier 来解决这个问题。

本质上这个工具其实就是禁用掉了一些不必要的以及和 Prettier 相冲突的 ESLint 规则。

整合使用

上面介绍的工具，仅仅只是将部分 ESLint 规则给禁用了，避免 Prettier 格式化之后的代码导致 ESLint 报错而已，如何将两者结合起来使用呢？

prettier 官方提供了一个 ESLint 插件 eslint-plugin-prettier。

这个插件的主要作用就是将 prettier 作为 ESLint 的规则来使用，相当于代码不符合 Prettier 的标准时，会报一个 ESLint 错误，同时也可以通过 eslint --fix 来进行格式化。文章来源地址https://www.toymoban.com/news/detail-408058.html

到了这里，关于前端工程化配置-husky + eslint + lint-staged的文章就介绍完了。如果您还想了解更多内容，请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章，希望大家以后多多支持TOY模板网！