JavaSE CSS选择器 function xamarin pygame rss vue论坛 swift视频教程 jquery遍历对象 jquery查找子元素 h5下拉刷新 mysql错误代码1064 bootstrap居中对齐 mysql新建数据库 python指令 java接口 java基础语言 java基础数据类型 java声明变量 java获取文件 linux目录 linux的find php项目实例 python视频教程 高效能人士的七个习惯下载 狮子狗出装 popen 御旌是什么 wow怎么赚钱 管理文件 python爬虫代码 幽灵行动多少钱 什么是人肉搜索 qq制作网页 色阶快捷键 显卡怎么设置 qt5下载 未来教育考试系统 易语言tv x截屏
当前位置: 首页 > 学习教程  > 编程语言

Webpack(四):eslint

2021/1/28 23:22:05 文章标签:

1、js语法检查eslint eslint是撰写JS的一个规范,它会检查你的js代码有没有格式错误或者语法错误,使你的js代码更加规范化 eslint的使用需要eslint-loader和一个eslint的库 推荐使用爱彼迎的代码检查风格 下载一些必要的东西 npm i eslint-loader esl…

1、js语法检查eslint

eslint是撰写JS的一个规范,它会检查你的js代码有没有格式错误或者语法错误,使你的js代码更加规范化

eslint的使用需要eslint-loader和一个eslint的库

推荐使用爱彼迎的代码检查风格

下载一些必要的东西

npm i eslint-loader eslint eslint-config-airbnb-base eslint-plugin-import -D

下载完之后,我们需要在package.json中新增一个"eslintConfig"对象,配置如下
在这里插入图片描述
eslint的整体配置

'use strict';


const HtmlWebpackPlugin = require('html-webpack-plugin');

const { resolve } = require('path');
//设置nodejs环境变量
process.env.NODE_ENV = "developement"

module.exports = {
  entry: './src/js/index.js',
  output: {
    filename: 'js/bundle.js',
    path: resolve(__dirname, 'dist'),
  },
  module: {
    rules: [
      //语法检查:eslint-loader eslint
        //注意:只检查自己写的源代码,第三方的库是不检查的
        //设置检查规则:package.json中eslintConfig中设置
        //我们推荐使用爱彼迎的代码检查风格
        //airbnb-->下载eslint-config-airbnb-base、eslint、eslint-plugin-import
      {
        //检查自己写的js文件
        test:/.\js$/,
        //排除对node_modules的检查
        exclude:/node_modules/,
        loader:'eslint-loader',
        options:{}
      }
    ]
  },
  plugins: [
    new HtmlWebpackPlugin({
      template: './src/index.html'
    }),

  ],
  mode: 'development'
}


然后运行 npm run build,之后就会报一系列的红
在这里插入图片描述
如果想要自动修复,我们可以在loader的options中设置fix:true

		options:{
          //自动修复eslint的错误
          fix:true
      }

整体的eslint配置

'use strict';


const HtmlWebpackPlugin = require('html-webpack-plugin');

const { resolve } = require('path');
//设置nodejs环境变量
process.env.NODE_ENV = "developement"

module.exports = {
  entry: './src/js/index.js',
  output: {
    filename: 'js/bundle.js',
    path: resolve(__dirname, 'dist'),
  },
  module: {
    rules: [
      //语法检查:eslint-loader eslint
        //注意:只检查自己写的源代码,第三方的库是不检查的
        //设置检查规则:package.json中eslintConfig中设置
        //我们推荐使用爱彼迎的代码检查风格
        //airbnb-->下载eslint-config-airbnb-base、eslint、eslint-plugin-import
      {
        //检查自己写的js文件
        test:/.\js$/,
        //排除对node_modules的检查
        exclude:/node_modules/,
        loader:'eslint-loader',
        options:{
          //自动修复eslint的错误
          fix:true
        }
      }
    ]
  },
  plugins: [
    new HtmlWebpackPlugin({
      template: './src/index.html'
    }),

  ],
  mode: 'development'
}


然后再次打包,错误就少了很多啦

在这里插入图片描述
但是这里仍然报了一个警告,说我们不能用console.log(),我们开发调试用没关系,但是代码要上线了,这就非常不好。如果我们想要调试,但是又想忽略这条规则,就可以就加一行代码

//eslint-disable-next-line
下一行eslint所有的规则都失效(下一行不进行eslint的检查)

在入口文件里标明
在这里插入图片描述
再次打包,就没有警告啦
在这里插入图片描述
说实话,看的我有点懵了

尚硅谷webpack5第16集一直报错,可能是版本问题


本文链接: http://www.dtmao.cc/news_show_650177.shtml

附件下载

相关教程

    暂无相关的数据...

共有条评论 网友评论

验证码: 看不清楚?