webapck js语法检查 eslint

我们在开发，每个开发写的语法规则不一样，这样的话，导致我们阅读别人的代码起来就会很困得，我们使用eslint的话，就能js规范语法，保证了语法的统一性。

如何使用eslint 终端下载loader

检查语法 loader

eslint-loader

检查规则 airbnb 想要使用airbnb的话，就得下载3个loader

1 eslint-config-airbnb-base
2 eslint
3 eslint-plugin-import

airbnb下载好之后需要在webpack.json 中配置

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

image.png

webpack 配置eslint-loader

   module:{ 
        //插件 eslint-loader
        //为啥要语法检查呢，因为为了保证团队开发的语法统一性
        // 注意 只检查自己写的源代码，第三方的库是不用检查的 需要排除 node_modules
        //设置插件规则:
        //package.json 中 eslintConfig中配置
            // "eslintConfig":{
            //     "extends":"airbnb-base"
            //   }
        //airbnb 使用他的下载3个库 --> eslint-config-airbnb-base eslint eslint-plugin-import



        rules:[
            {
                test:/\.js$/,//只检查js文件
                exclude:/node_modules/,//不检查文件
                loader:'eslint-loader',
                options:{
                    //自动修复不规范的语法错误，会有警告，但是不会影响运行
                    fix:true
                }
            }
        ]
    },

fix :true 的作用是修复错误语法的

未配置 fix：true

image.png

配置了 fix：true

image.png

webpack .config.js 文件

const {resolve}=require('path');
const HtmlWenpackPlugin=require('html-webpack-plugin');
const MiniCssExtractPlugin = require("mini-css-extract-plugin") 

module.exports={
    entry:'./src/js/index.js',//入口文件
    output:{
        filename:'js/built.js',//打包成什么文件
        path:resolve(__dirname,'build')//打包到生成的文件
    },
    module:{ 
        //插件 eslint-loader
        //为啥要语法检查呢，因为为了保证团队开发的语法统一性
        // 注意 只检查自己写的源代码，第三方的库是不用检查的 需要排除 node_modules
        //设置插件规则:
        //package.json 中 eslintConfig中配置
            // "eslintConfig":{
            //     "extends":"airbnb-base"
            //   }
        //airbnb 使用他的下载3个库 --> eslint-config-airbnb-base eslint eslint-plugin-import



        rules:[
            {
                test:/\.js$/,//只检查js文件
                exclude:/node_modules/,//不检查文件
                loader:'eslint-loader',
                options:{
                    //自动修复不规范的语法错误，会有警告，但是不会影响运行
                    fix:true
                }
            }
        ]
    },
    plugins:[ //装载插件的地方
        new HtmlWenpackPlugin({  //打包html文件
            template:'./src/index.html'
        }),
        new MiniCssExtractPlugin({
            filename:'css/built.css'
        })
    ],
    mode:'development',//开发环境

}

package.json 文件

{
  "name": "webpack_test",
  "version": "1.0.0",
  "description": "",
  "main": "index.js",
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1"
  },
  "author": "",
  "license": "ISC",
  "devDependencies": {
    "css-loader": "^3.5.3",
    "eslint": "^7.1.0",
    "eslint-config-airbnb-base": "^14.1.0",
    "eslint-loader": "^4.0.2",
    "eslint-plugin-import": "^2.20.2",
    "file-loader": "^6.0.0",
    "less": "^3.11.1",
    "less-loader": "^6.1.0",
    "loader": "^2.1.1",
    "mini-css-extract-plugin": "^0.9.0",
    "postcss-import": "^12.0.1",
    "postcss-preset-env": "^6.7.0",
    "style-loader": "^1.2.1",
    "webpack": "^4.43.0",
    "webpack-cli": "^3.3.11"
  },
  "dependencies": {
    "html-webpack-plugin": "^4.3.0",
    "webpack-dev-server": "^3.11.0"
  },
  "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"
  }
}

补一个小知识

// 对下一行不进行检查平常有console.log想保留，但是不想显示出来，就得用eslint-disable-next-line

image.png

最后编辑于：2020.05.25 17:24:19