webpack5零基础入门-9eslint的用法

1.eslint的介绍

可组装的 JavaScript 和 JSX 检查工具。

这句话意思就是:它是用来检测 js 和 jsx 语法的工具,可以配置各项功能

我们使用 Eslint,关键是写 Eslint 配置文件,里面写上各种 rules 规则,将来运行 Eslint 时就会以写的规则对代码进行检查

2.配置文件

配置文件由很多种写法:

  • .eslintrc.*:新建文件,位于项目根目录
    • .eslintrc
    • .eslintrc.js
    • .eslintrc.json
    • 区别在于配置格式不一样
  • package.jsoneslintConfig:不需要创建文件,在原有文件基础上写

ESLint 会查找和自动读取它们,所以以上配置文件只需要存在一个即可

3.安装插件

复制代码
npm install eslint-webpack-plugin --save-dev

注意 : 如果未安装​eslint >= 7​​**,你还需先通过 npm 安装:**

复制代码
npm install eslint --save-dev

4.引入插件并使用

注意:插件和loader不一样,插件需要引入。

在webpack配置文件中引入插件

复制代码
const ESLintPlugin = require('eslint-webpack-plugin');

插件都是构造函数,需要通过new调用

在plugins中添加插件

复制代码
/**插件 */
    plugins: [
        //plugin配置
        new ESLintPlugin({
            /** 检测哪些文件 */
            context: path.resolve(__dirname, 'src')
        })
    ],

直接运行npx webpack会报错找不到eslint配置文件

5.新建eslint配置文件

添加配置

parserOptions: 解析选项

rules: 具体规则 :

"off"0 - 关闭规则

"warn"1 - 开启规则,使用警告级别的错误:warn (不会导致程序退出)

"error"2 - 开启规则,使用错误级别的错误:error (当被触发的时候,程序会退出)

extends :继承,开发中一点点写 rules 规则太费劲了,所以有更好的办法,继承现有的规则。

6.安装vscode中的eslint插件,可立刻提示不符合eslint配置的错误

7.配置eslint忽略文件

输入dist即可忽略dist文件夹

相关推荐
一只叫煤球的猫15 分钟前
写代码很6,面试秒变菜鸟?不卖课,面试官视角走心探讨
前端·后端·面试
excel1 小时前
Three.js 材质(Material)详解 —— 区别、原理、场景与示例
前端
掘金安东尼2 小时前
抛弃自定义模态框:原生Dialog的实力
前端·javascript·github
hj5914_前端新手5 小时前
javascript基础- 函数中 this 指向、call、apply、bind
前端·javascript
薛定谔的算法5 小时前
低代码编辑器项目设计与实现:以JSON为核心的数据驱动架构
前端·react.js·前端框架
Hilaku5 小时前
都2025年了,我们还有必要为了兼容性,去写那么多polyfill吗?
前端·javascript·css
yangcode6 小时前
iOS 苹果内购 Storekit 2
前端
LuckySusu6 小时前
【js篇】JavaScript 原型修改 vs 重写:深入理解 constructor的指向问题
前端·javascript
LuckySusu6 小时前
【js篇】如何准确获取对象自身的属性?hasOwnProperty深度解析
前端·javascript
LuckySusu6 小时前
【js篇】深入理解 JavaScript 作用域与作用域链
前端·javascript