自动化构建工具——10.webpack JS语法检查

js语法检查

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

需要下载的库

语法检查

• eslint-loader
• eslint

规则（Airbnb）设置

• eslint-config-airbnb-base
• eslint-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代码也自行修复了不符合规范的地方