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
![](https://img-blog.csdnimg.cn/20190909173747470.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L1Jpb25hX2NoZW5n,size_16,color_FFFFFF,t_70)
会在命令行中提示代码规范错误❌. 如果我们期望当不规范代码出现时,直接在浏览器页面弹出层提示,可以通过如下配置来完成:(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仓库。
缺点: 这种方式只会在提交代码时,命令行提示错误信息,不能图形交互的提示。
所以,在做项目的打包配置的时候,或者到底要不要做一些插件使用的时候,不仅要考虑它是否方便, 还要考虑是否会对打包速度有一定影响,如果影响较大,也可以在便捷性上做一些牺牲。从而提高它的打包速度。?