eslint的作用：代码规范工具。
eslint的使用
项目目录：（简单举例）
|--demo
|--src
|--index.html
|--index.js
|--home.js
|--list.js
|--node_modules
|--package.json
|--package-lock.json
|--webpack.config.js
index.js代码：（不规范版本）
import React, { Component } from 'react';
import ReactDom from 'react-dom';
class App extends Component {
render() {
return <div>hello 小橙子</div>
}
}
ReactDom.render(<App />, document.getElementById('root'));
安装eslint：
npm i eslint -D
初始化eslint配置文件:
npx eslint --init // 使用npx可以直接运行刚刚安装的eslint命令
1.选择规范约束类型
分别代表含义：
- 只检查语法
- 检查语法，并查找问题
- 检查语法、查找问题并强制执行代码样式
2.选择import/export模块语法。
3.选择react语法
4.不实用TypeScripts语法。
5.选择在浏览器运行项目。
6.选择一种通用的约束标准：
7.选择Airbnb公司的前端规范要求
8.选择JavaScript语法进行配置：
9.做eslint需要一些依赖项，选择现在开始安装：
按照以上顺序初始化eslint配置之后，在项目根目录下，会多出一个 .eslintrc.js文件 . 具体配置如下：
module.exports = {
env: {
browser: true,
es6: true,
},
extends: [
'airbnb',
],
globals: {
Atomics: 'readonly',
SharedArrayBuffer: 'readonly',
},
parserOptions: {
ecmaFeatures: {
jsx: true,
},
ecmaVersion: 2018,
sourceType: 'module',
},
plugins: [
'react',
],
rules: {
},
};
接下来，我们使用eslint来检测src下得代码是否符合airbnb公司前端代码规范：
命令行运行：npx eslint src
执行检测src目录代码规范命令后，不规范代码会在命令行直接给予提示，方便我们错误排查。很明显，index.js中的代码有两处不符合airbnb公司前端代码的规范：
- 第2行，import语句后应有1个空行。
- 第5行，缺少分号。
我们做如下修正：(index.js规范版本)
import React, { Component } from 'react';
import ReactDom from 'react-dom';
class App extends Component {
render() {
return <div>hello 小橙子</div>;
}
}
ReactDom.render(<App />, document.getElementById('root'));
再次执行规范检查：npx eslint src
此时命令行不再报错。
在webpack中配置eslint
业务代码不再具体体现，主要分享eslint的配置方式
需借助eslint-loader:
npm i eslint-loader --save-dev
在webpack.config.js里配置：
module: {
rules: [{
test: /\.js$/,
exclude: /node_modules/,
use: ['babel-loader', 'eslint-loader'] // loader的执行顺序是从后向前的，这里先执行eslint-loader
}]
}
- 当遇到一个js文件的时候，我们会先使用eslint-loader检查代码是否规范，然后再去使用babel-loader做代码的转换。
执行打包：
npm run start
会在命令行中提示代码规范错误❌. 如果我们期望当不规范代码出现时，直接在浏览器页面弹出层提示，可以通过如下配置来完成：（overlay）
webpack.config.js
devServer: {
overlay: true, // 当运行webpack-dev-server去做打包的时候，一旦遇到语法规范的问题，就会在页面弹出层提示我们
contentBase: './dist',
open: true,
port: 8081,
hot: true,
hotOnly: true
}
- overlay: true 指当运行webpack-dev-server去做打包的时候，一旦遇到语法规范的问题，就会在页面弹出层提示我们.
再次执行打包，页面提示如下：
这样我们就可以根据报错提示，一一修正不规范代码。
如果我们不想遵循某个规范，可以在 .eslintrc.js 配置项rules里排除掉：
rules: {
"import/no-extraneous-dependencies": 0, // 不遵循此要求
"react/prefer-stateless-function": 0,
"react/jsx-filename-extension": 0
}
- 把规范项设置为0，既为不遵循此规则。
即便我们的编译器中没有eslint的插件，我们也可以借助eslint-loader依赖，在webpack中的配置，也可以很方便的定位我们代码规范中的问题，同时也能快速的解决。 （使用过vue框架的小伙伴应该清楚，在vue开发项目的过程中，也会经常在页面上出现报错想象，是因为在vue-cli脚手架里，已经帮我们封装好了一些插件的配置。原理与我们使用的eslint-loader的配置类似）
注意事项
在webpack.config.js的module配置规则中：
module: {
rules: [{
test: /\.js$/,
exclude: /node_modules/,
use: ['babel-loader', {
loader: 'eslint-loader',
options: {
fix: true // 如果存在很浅显的不规范代码，eslint会自动帮你修复掉
}
}]
}]
}
- loader的执行顺序是从后向前的，这里先执行eslint-loader
- 当遇到一个js文件的时候，我们会先使用eslint-loader检查代码是否规范，然后再去使用babel-loader做代码的转换。
如果把eslint-loader和babel-loader颠倒位置配置，则是不正确的做法，如果非要这么做，那么可以借助 force: “pre” 配置项，强制eslint-loader先执行。如下：
module: {
rules: [{
test: /\.js$/,
exclude: /node_modules/,
use: [{
loader: 'eslint-loader',
options: {
fix: true // 如果存在很浅显的不规范代码，eslint会自动帮你修复掉
},
force: 'pre' // 强制eslint-loader先执行
}, 'babel-loader']
}]
}
通过以上配置之后，就算把babel-loader配置在eslint-loader之后，也会先去执行eslint-loader。
最佳实战
如果在公司做项目的过程中，一般不会把eslint-loader配置在webpack中，一旦使用它，就会不可避免的拖慢我们的打包速度，所以，在真实项目中，不会去使用eslint-loader。
一般我们在团队合作开发的过程中，都会使用Git版本管理仓库。Git里有个钩子，在git提交代码时，对代码进行一个eslint的检测，如果代码不符合规范，则不允许代码提交到git仓库。
缺点： 这种方式只会在提交代码时，命令行提示错误信息，不能图形交互的提示。
所以，在做项目的打包配置的时候，或者到底要不要做一些插件使用的时候，不仅要考虑它是否方便， 还要考虑是否会对打包速度有一定影响，如果影响较大，也可以在便捷性上做一些牺牲。从而提高它的打包速度。?
