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

1.eslint的介绍

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

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

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

2.配置文件

配置文件由很多种写法:

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

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

相关推荐

最近更新

  1. TCP协议是安全的吗?

    2024-03-17 09:36:03       16 阅读
  2. 阿里云服务器执行yum,一直下载docker-ce-stable失败

    2024-03-17 09:36:03       16 阅读
  3. 【Python教程】压缩PDF文件大小

    2024-03-17 09:36:03       15 阅读
  4. 通过文章id递归查询所有评论(xml)

    2024-03-17 09:36:03       18 阅读

热门阅读

  1. Jenkins: 配合docker来部署项目

    2024-03-17 09:36:03       21 阅读
  2. tesseract ocr 安装/调用/训练

    2024-03-17 09:36:03       18 阅读
  3. 基于单片机的电梯系统模拟与研究

    2024-03-17 09:36:03       17 阅读
  4. 音乐软件开发的C#编程思路与实现

    2024-03-17 09:36:03       19 阅读
  5. 【uniapp】uniapp的安卓apk图标角标设置消息数量

    2024-03-17 09:36:03       17 阅读
  6. 有向图的DFS(c++题解)

    2024-03-17 09:36:03       21 阅读