webpack高级概念，eslint配置（系列十六)

ESLint（https://eslint.bootcss.com/） 能对 JS 基本语法错误/隐患进行提前检查，使用步骤

1. 安装loader

   npm install eslint-loader eslint --save-dev

   eslint 是语法检查的包

   eslint-loader 是 eslint 在 webpack 中的 loader 包

2. webpack.config.js 配置 loader

   module.exports = {
       .
       .
       .
       module: {
           rules: [
               .
               .
               .
               {
                   test: /\.js$/,                  //只检测js文件
                   exclude: /node_modules/,        //排除node_modules文件夹
                   enforce: "pre",                 //提前加载使用
                   use: {                          
                       loader: "eslint-loader"     //使用eslint-loader解析
                   }
               }
           ]
       }
   }

    

    

3. 创建 .eslintrc.js 文件

   module.exports = {
       "parserOptions": {
           "ecmaVersion": 6,               // 支持es6
           "sourceType": "module"          // 使用es6模块化
       },
       "env": {                            // 设置环境
           "browser": true,                // 支持浏览器环境： 能够使用window上的全局变量
           "node": true                    // 支持服务器环境:  能够使用node上global的全局变量
       },
       "globals": {                        // 声明使用的全局变量, 这样即使没有定义也不会报错了
           "$": "readonly"                 // $ 不允许重写变量
       },
       "rules": {                          // eslint检查的规则  0 忽略 1 警告 2 错误
           "no-console": 0,                // 不检查console
           "eqeqeq": 0,                    // 用 == 而不用 === 就报错
           "no-alert": 0                   // 不能使用alert
       },
       "extends": "eslint:recommended"     // 使用eslint推荐的默认规则
   }

    

4. 运行指令  npm  run dev