Webpack笔记（四）：eslint

最新推荐文章于 2024-04-28 14:14:49 发布

啊啊怪

最新推荐文章于 2024-04-28 14:14:49 发布

阅读量156

点赞数

分类专栏： Webpack

本文链接：https://blog.csdn.net/weixin_41590375/article/details/113333825

版权

Webpack 专栏收录该内容

4 篇文章 0 订阅

订阅专栏

本文介绍了如何在JavaScript项目中使用ESLint进行代码检查，包括安装必要的依赖、配置Airbnb风格规范、排除node_modules检查，并演示了如何启用自动修复功能和处理console.log警告。

摘要由CSDN通过智能技术生成

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'
}