js语法检查

作用：规范代码风格和检查常见语法错误

需要下载的库

语法检查

eslint-loadereslint

规则（Airbnb）设置

eslint-config-airbnb-baseeslint-plugin-import

设置检查规则

package.json中的eslintConfig设置

"eslintConfig": { "extends": "airbnb-base", // 规则 },

修改配置文件

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 --> eslint-config-airbnb-base eslint eslint-plugin-import */ { test: /\.js$/, exclude: /node_modules/, // 排除第三方的一些东西 loader: 'eslint-loader', options: { // 自动修复eslint的错误 fix: true } } ] }, plugins: [ new HtmlWebpackPlugin({ template: './src/index.html' }) ], mode: 'development' }

编写一个不符合Airbnb规范的js文件

在src->js下创建index.js文件

function add(x,y) { return x+y } console.log(add(4, 5))

运行webpack/npx webpack-dev-server并查看结果

可以看到其给出的警告（不期待的console表达式，即不建议使用console）

查看原先的index.js文件已经自动修复了eslint错误

如果想忽略上述警告，即对console.log语句不使用eslint规则，则可以添加eslint-disable-next-line

需要确保你需要这样做才添加该语句，一般不使用

function add(x,y) { return x+y } // 下一行所有的eslint规则都失效（下一行不进行eslint检查） // eslint-disable-next-line console.log(add(4, 5)) 在此运行webpack就看不到之前的警告了 js代码也自行修复了不符合规范的地方