hooyantsing's Blog

P15 js语法检查eslint

字数统计: 894阅读时长: 5 min
2020/11/30

尚硅谷2020最新版Webpack5实战教程

#### 步骤

下载包:

1
npm i eslint eslint-loader eslint-config-airbnb-base eslint-plugin-import -D

编写配置文件:

webpack.config.js

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39

const { resolve } = require('path');
const HtmlWebpackPlugin = require('html-webpack-plugin');

module.exports = {
entry: './src/js/index.js',
output: {
filename: 'js/built.js',
path: resolve(__dirname, 'build')
},
module: {
rules: [
/*
语法检查:eslint-loader 依赖于 eslint
注意:只检查自己写的源代码,第三方的库是不检查的
设置检查规则:
package.json 中 eslintConfig 中设置
airbnb 代码风格的一种
airbnb --> eslint-config-airbnb-base eslint-plugin-import eslint
*/
{
test: /\.js$/,
// 排除检查第三方库
exclude: /node_modules/,
loader: 'eslint-loader',
options: {
// 自动修复 eslint 错误
fix: true
}
}
]
},
plugins: [
new HtmlWebpackPlugin({
template: './src/index.html'
})
],
mode: 'development',
}

还需要在 package.json 加入eslintConfig浏览器配置

package.json

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
{
"name": "webpack_code",
"version": "1.0.0",
"description": "",
"main": "index.js",
"scripts": {
"test": "echo \"Error: no test specified\" && exit 1"
},
"author": "",
"license": "ISC",
"devDependencies": {
"@babel/core": "^7.12.9",
"@babel/preset-env": "^7.12.7",
"babel-loader": "^8.2.2",
"css-loader": "^5.0.1",
"eslint": "^7.14.0",
"eslint-config-airbnb-base": "^14.2.1",
"eslint-loader": "^4.0.2",
"eslint-plugin-import": "^2.22.1",
"file-loader": "^6.2.0",
"html-loader": "^1.3.2",
"html-webpack-plugin": "^5.0.0-alpha.14",
"less": "^3.12.2",
"less-loader": "^7.1.0",
"mini-css-extract-plugin": "^1.3.1",
"optimize-css-assets-webpack-plugin": "^5.0.4",
"postcss-loader": "^4.1.0",
"postcss-preset-env": "^6.7.0",
"style-loader": "^2.0.0",
"url-loader": "^4.1.1",
"webpack": "^5.9.0",
"webpack-cli": "^4.2.0",
"webpack-dev-server": "^3.11.0"
},
"dependencies": {},
"browserslist": {
"development": [
"last 1 chrome version",
"last 1 firefox version",
"last 1 safari version"
],
"production": [
">0.2%",
"not dead",
"not op_mini all"
]
},


"eslintConfig": {
"extends": "airbnb-base"
}


}

例如 JavaScript 代码写的不规范:

缺少空格,不好看,也算入不规范。

1
2
3
4
5
function add(x,y){
return x+y;
}

console.log(add(2,3));

报错信息:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
PS E:\Project_atguigu_webpack\12.js语法检查> webpack
[webpack-cli] Compilation finished
asset js/built.js 845 bytes [emitted] (name: main)
asset index.html 278 bytes [emitted]
./src/js/index.js 1 bytes [built] [code generated]
webpack 5.9.0 compiled successfully in 1555 ms
PS E:\Project_atguigu_webpack\12.js语法检查> webpack
[webpack-cli] Compilation finished
asset js/built.js 917 bytes [emitted] (name: main)
asset index.html 278 bytes [compared for emit]
./src/js/index.js 64 bytes [built] [code generated] [1 error]

ERROR in ./src/js/index.js
Module Error (from ../node_modules/eslint-loader/dist/cjs.js):

E:\Project_atguigu_webpack\12.js语法检查\src\js\index.js
1:15 error A space is required after ',' comma-spacing
1:18 error Missing space before opening brace space-before-blocks
1:19 error Expected linebreaks to be 'LF' but found 'CRLF' linebreak-style
2:1 error Expected indentation of 2 spaces but found 4 indent
2:13 error Operator '+' must be spaced space-infix-ops
2:16 error Expected linebreaks to be 'LF' but found 'CRLF' linebreak-style
3:2 error Expected linebreaks to be 'LF' but found 'CRLF' linebreak-style
4:1 error Expected linebreaks to be 'LF' but found 'CRLF' linebreak-style
5:1 warning Unexpected console statement no-console
5:18 error A space is required after ',' comma-spacing
5:23 error Newline required at end of file but not found eol-last

✖ 11 problems (10 errors, 1 warning)
10 errors and 0 warnings potentially fixable with the `--fix` option.


webpack 5.9.0 compiled with 1 error in 813 ms

使用 fix: true 可以让 eslint 自动修复不规范的地方。

CATALOG
  1. 1. #### 步骤