前端工程化-ESLint+webpack

最新推荐文章于 2023-06-09 09:10:10 发布

ZhandsomeZ

最新推荐文章于 2023-06-09 09:10:10 发布

阅读量1.3w

点赞数

分类专栏：前端工具-Webpack 前端规范化-Lint工具文章标签： javascript 前端 webpack vue.js es6

本文链接：https://blog.csdn.net/handsomezhanghui/article/details/107942097

版权

前端工具-Webpack 同时被 2 个专栏收录

15 篇文章 0 订阅

订阅专栏

前端规范化-Lint工具

8 篇文章 0 订阅

订阅专栏

在这里插入图片描述

简介

在上篇文章介绍了如何gulp + ESLint ，所以呢在本篇文章中主要介绍ESLint+webpack

ESLint+webpack

1、首先安装eslint 和eslint-loader
需要注意的loader加载顺序是从后往前的，所以说eslint-loader需要写在babel-loader后面，如下

  rules: [
            {
                test: /\.js$/,
                exclude: /node_modules/,
                use: 'babel-loader'
            },
            {
                test: /\.js$/,
                exclude: /node_modules/,
                use: 'eslint-loader',
                enforce: "pre"
            },

            {
                test: /\.css$/,
                use: [
                    'style-loader',
                    'css-loader'
                ]
            }
      ]

ESlint配置

module.exports = {
    env: {
        browser: true,
        es2020: true
    },
    extends: [
        standard,
    ],
    parserOptions: {
        ecmaVersion: 11
    },
    rules: {
         "react/jsx-uses-react": 2,
         "react/jsx-uses-vars": 2
    },
    plugins: [
         "react"
    ]
};

另外一种ESLint配置方式这种方式更常用

module.exports = {
    env: {
        browser: true,
        es2020: true
    },
    extends: [
        standard,
        "plugin:react/recommended"
    ],
    parserOptions: {
        ecmaVersion: 11
    },
    rules: {
    },
    plugins: [
    ]
};

谢谢观看，如有不足敬请指教