使用 eslint 对 js 进行语法检查
1.文件结构
2.安装 eslint 相关插件
$ npm i eslint@6.8.0 eslint-loader@3.0.3 eslint-plugin-import@2.20.1 eslint-config-airbnb-base@14.0.0 -D
安装完成后，在 package.json 文件中配置 eslintConfig:
"eslintConfig":{
"extends":"airbnb-base"
}
3.代码
index.html
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> </head> <body> </body> </html>
index.js
function add(x, y) { return x + y; } // 下一行 eslint 所有规则都失效(下一行不进行 eslint 检查) 加上下面这一句，就没有eslint警告信息了 // eslint-disable-next-line console.log(add(1, 2));
webpack.config.js
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 中设置~
"eslintConfig": {
"extends": "airbnb-base"
}
* 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",
devServer: {
contentBase: resolve(__dirname, 'build'),
compress: true,
port: 3000,
open: true
}
}
4.打包
$ webpack