13.webpack4之语法检查eslint

1.执行步骤

1）创建相关文件

2）eslint相关依赖

eslint、eslint-plugin-import、eslint-loader、eslint-config-airbnb-base

注意：通常只检查自己写的代码，不检查第三方库代码

引入eslint-loader还需要在package.json中进行配置eslintConfig设置检查规则

使用规则可以引入第三方库，推荐使用规则：

* airbnb --> eslint-config-airbnb-base

2. 代码段

1）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: [
            {
                test: /\.js$/,
                exclude: /node_modules/,
                loader: 'eslint-loader',
                options: {
                    // 自动修复eslint错误
                    fix: true
                }   
            }
        ]
    },
    plugins: [
        new HtmlWebpack({
            template: './src/index.html'
        })
    ],
    mode: 'development'
}

2）package.json加上如下配置项


"eslintConfig": {
    "extends": "airbnb-base",
    "env": {
      "browser": true
    }
  },

browser的作用是为了处理一些浏览器本身的方法

3）index.js


function add(x, y) {
  return x + y;
}
// 下一行eslint所有规则都失效（下一行不进行eslint检查）
// eslint-disable-next-line
console.log(add(2, 5));

4）index.html


html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Documenttitle>
head>
<body>
    <h2>hello webpackh2>
body>
html>

eslint是用作代码的维护，使用eslint约束代码，方便开发人员对代码进行维护，是一种规范

相关阅读:
别玩手机图像分类比赛
Java版本+企业电子招投标系统源代码+支持二开+招投标系统+中小型企业采购供应商招投标平台
【高等数学基础进阶】定积分与反常积分-反常积分
4.mysql-进阶
c++_0基础_讲解7 练习
牛客网——牛牛的数组匹配
看5G时代，“一键喊话”的大喇叭如何奏响基层治理最强音
腾讯云智实习1，2，3面
微信小程序和微信H5有什么区别？
使用NodeList

原文地址：https://blog.csdn.net/weixin_43893483/article/details/126562698