• 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

    1. const { resolve } = require('path');
    2. const HtmlWebpackPlugin = require('html-webpack-plugin');
    3.  
    4.  
    5. module.exports = {
    6.  
    7.     entry: './src/js/index.js',
    8.     output: {
    9.         filename: 'js/built.js',
    10.         path: resolve(__dirname,'build')
    11.     },
    12.     module: {
    13.         rules: [
    14.             {
    15.                 test: /\.js$/,
    16.                 exclude: /node_modules/,
    17.                 loader: 'eslint-loader',
    18.                 options: {
    19.                     // 自动修复eslint错误
    20.                     fix: true
    21.                 }   
    22.             }
    23.         ]
    24.     },
    25.     plugins: [
    26.         new HtmlWebpack({
    27.             template: './src/index.html'
    28.         })
    29.     ],
    30.     mode: 'development'
    31. }

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

    1. "eslintConfig": {
    2.     "extends": "airbnb-base",
    3.     "env": {
    4.       "browser": true
    5.     }
    6.   },

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

    3）index.js

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

    4）index.html

    1. html>
    2. <html lang="en">
    3. <head>
    4.     <meta charset="UTF-8">
    5.     <meta http-equiv="X-UA-Compatible" content="IE=edge">
    6.     <meta name="viewport" content="width=device-width, initial-scale=1.0">
    7.     <title>Documenttitle>
    8. head>
    9. <body>
    10.     <h2>hello webpackh2>
    11. body>
    12. html>

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

  • 相关阅读:
    使用 GPU 进行 Lightmap 烘焙 - 简单 demo
    剑指 Offer 10- I. 斐波那契数列
    （四）旋转物体检测数据roLabelImg转DOTA格式
    uniapp本地打包到Android Studio生成APK文件
    [SQLServer]NetCore中将SQLServer数据库备份为Sql脚本
    qt笔记一
    java从入门到起飞（八）——循环和递归
    c++新特性 语言运行期强化
    【soc】bootrom注意事项
    什么是Linux
  • 原文地址：https://blog.csdn.net/weixin_43893483/article/details/126562698