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文件夹

相关推荐
Jerry12 分钟前
Compose 基础知识测试
前端
阿波罗尼亚13 分钟前
ExcelUtils实现 设置内容 插入行 复制行列格式
java·开发语言
changuncle21 分钟前
Angular初学者入门第三课——工厂函数(精品)
前端·javascript·angular.js
ScottePerk38 分钟前
前端安全之XSS和CSRF
前端·安全·xss
PineappleCoder39 分钟前
Canvas 复杂交互步骤:从事件监听 to 重新绘制全流程
前端
日月晨曦44 分钟前
JavaScript事件循环:一次浏览器线程的"约会"指南
javascript
s3xysteak1 小时前
我要成为vue高手01:上下文
前端·javascript·vue.js
复苏季风1 小时前
前端居中布局:从 "卡壳" 到 "精通" 的全方位指南
前端·css
qb1 小时前
vue3.5.18源码:computed 在发布订阅者模式中的双重角色
前端·vue.js·架构
南篱1 小时前
JavaScript原型链没那么难:一文彻底搞懂
javascript·面试