1. 使用eslint--init创建基础配置文件
2. 集成webpack
module.exports = {
module: {
rules: [
{
test: /\.js$/,
exclude: /node_modules/,
use: ['babel-loader', 'eslint-loader'],
},
],
}
};
注意:
loader是文件预处理器, webpack在处理静态文件的时候, 需要使用loader来加载各种文件, 比如,html需要使用html-loader,css需要css-loader,style-loader等
babel-loader: 用来处理es6语法, 将其编译为浏览器可以执行的js语法.
划重点：eslint-loader规则必须要先于babel-loader规则
3.安装eslint-config-airbnb
npm install eslint-config-airbnb --save-dev
// 包含es6+ 以及react 的代码规范
// 在安装 eslint-config-airbnb 的时候, 他会一同安装eslint, eslint-plugin-import, eslint-plugin-react, and eslint-plugin-jsx-a11y
4. 安装pretier
- 代码格式化工具
- 可以进行webstrom配置在保存时格式化
- 可以结合webstrom手动格式化(webstrom安装prettier插件)
- Mac: CMD + Shift + P
- WIndows：Ctlr + Shift + P
- 可以和git整合
5. prettier整合git
安装依赖
npm install husky
npm install lint-staged
更简单的方式
// 这一行就可以安装husky和lint-stage，并且配置好husky。
npx mrm lint-staged
husky的作用是咬住Git的hooks不放, 我们只关心pre-commit,在package.json中进行下面的配置
"husky": {
"hooks": {
"pre-commit": "lint-staged",
"post-commmit": "git update-index --again"
}
},
"lint-staged": {
"*.{js,css,json,md}": [
"pretty-quick —-staged",
"git add"
]
}
6. prettier和各种linters的关系
-
当 ESLint 遇到 incorrect code 的时候，会提示你违反规则，让你修改代码以符合规则
-
Prettier 则不会这么麻烦，它根本不管你之前符不符合什么规则，都先把你的代码解析成 AST，然后按照它自己的风格给你重新输出代码。
-
Prettier 并不会取代各种 Linters，而是能避免你的代码和这些 Linters 定义的 Formatting rules 冲突。Linters 检查出来违反 Code-quality rules 的情况后还需要你自己根据业务逻辑和语法手动修改。Prettier 帮你格式化代码，但是不会帮你挑出潜在的错误
7. Prettier和Linters配合使用
禁用 Linters 自己的 Formatting rules，让 Prettier 接管这些职责。这些配置有现成的 Config，Linters 的配置继承这个 Config 就可以了。 让 Linters 执行时首先能够调用 Prettier 格式化带啊，然后再检查 Code-quality 类规则。这是 由 Linters 的 Plugin 实现的
// 创建工程初始化的时候用
npm init prettier-eslint
// 或直接使用
npx create-prettier-eslint
