eslint从入门到放弃（二）esLint配置之globals

小枫学幽默

已于 2024-11-14 12:20:04 修改

阅读量1.1k

点赞数 18

CC 4.0 BY-SA版权

分类专栏： eslint从入门到放弃文章标签： javascript node.js

于 2024-11-14 09:52:44 首次发布

本文链接：https://blog.youkuaiyun.com/piaolingfeixue260/article/details/143758964

eslint从入门到放弃专栏收录该内容

5 篇文章

订阅专栏

上文说了eslint入门，今天说下ESLint配置中的globals
前文传送门，eslint从入门到放弃（一）eslint入门”

大家好我是【小枫学幽默】，这是我eslint从入门到放弃系列教程的第二篇，欢迎关注后续更新。接下来步入正题：

ESLint配置之globals

ESLint globals 是个啥？这玩意儿有啥用？

说globals是个啥前，我们先走个例子：

首先eslint有一条规则（no-undef）是不允许使用未定义的变量，在eslint 检测代码的时候会报错，来，跟着步骤走

让我们先新建一个demo目录，文件结构如下

demo
├── .DS_Store
├── .eslintrc.js
└── globals.js

.eslintrc（eslint配置文件），规则中配置不允许使用未定义的变量，内容如下

module.exports = {
    "rules": {
        // 这个规则告诉eslint，代码中出现使用未定义的变量时，给出错误提示
        "no-undef": "error",
    }
}

globals.js（我们要用eslint校验的文件）

我们假设globals.js运行在微信小程序环境下

// 调用微信小程序的网络请求api
wx.request({
    url: 'example.php', //仅为示例，并非真实的接口地址
    data: {
        x: '',
        y: ''
    },
    header: {
        'content-type': 'application/json' // 默认值
    },
    success: function (res) {
    }
})
request.get()

打开命令行，进入demo目录，用eslint校验下globals.js

npx eslint globals.js -c .eslintrc.js

/demo/globals.js
   2:1  error  'wx' is not defined       no-undef
  13:1  error  'request' is not defined  no-undef

我和ESlint的对话

eslint：『喏~ 主人，你看wx、request 未定义哦！』

来…让我们看下这个文件内容，wx和request确实没有定义就直接使用了，这段代码在微信小程序的运行环境中，wx这两个变量会由微信小程序的代码执行容器自动注入，只有request会报错，eslint识别出了有安全隐患的代码。

内心我是知道这段代码在微信小程序环境中运行的时候，wx.request绝对可以直接调用，但是作为一个处女座的前端bug攻城狮，怎么忍受有个报错存在（嘿嘿嘿【手动坏笑】）

那么关键就是，怎么让eslint知道，这个变量肯定是会存在的呢？

eslint悄悄说：『Hi~ 主人，你只要在.eslintrc的globals选项中告诉我，这个是全局变量就可以啦！！』

我：『多嘴…答案是通过eslint的globals的配置项，显式的告诉它，嗨~ 哥们儿wx是全局变量，运行时一定会存在，不用报错哦！！』

实操：修改 .eslintrc（eslint配置文件）内容如下

module.exports = {
    // 配置上 globals 把wx、console 定义为全局变量
    globals: {
        wx: 'readonly', // 微信小程序
    },
    "rules": {
        "no-undef": "error",
    }
}

再校验下

npx eslint globals.js -c .eslintrc.js

/demo/globals.js
  13:1  error  'request' is not defined  no-undef

你看已经不报wx 未定义了，如果你希望request也不报错，需要把request也配置在globals对象中（前提是你必须知道你在做什么，一旦这么设置request即使是未定义，eslint也不会给出错误提示），如果运行时，发现这个request不存在，代码就出bug咯(撒花)

module.exports = {
    "rules": {
        "no-undef": "error"
    },
    globals: {
        // 微信小程序
        wx: 'readonly', 
        // 告诉eslint代码运行时这个变量一定存在
        request: 'readonly', 
    }
}

配置globals的两种方式

注释方式定义全局变量

/* global wx:writable, request:writable */
// 调用微信小程序的网络请求api
wx.request({
    url: 'example.php', //仅为示例，并非真实的接口地址
    data: {
        x: '',
        y: ''
    },
    header: {
        'content-type': 'application/json' // 默认值
    },
    success: function (res) {}
})
request.get()

配置文件方式定义全局变量

module.exports = {
    "rules": {
        "no-undef": "error"
    },
    globals: {
        // 微信小程序 设置值为writable让wx可被重写
        wx: 'writable',
        // 告诉eslint代码运行时这个变量一定存在设置值为writable让request可被重写
        request: 'writable',
    }
}

如果你觉得全局变量wx重写会有风险，你可以通过以下方式告诉eslint，不允许修改全局变量

/* global wx:readonly, request:readonly */
/*eslint no-global-assign: "error"*/

// OR

module.exports = {
    "rules": {
        "no-undef": "error",
        "no-global-assign": ["error"]
    },
    globals: {
        // 微信小程序 设置值为writable让wx可被重写
        wx: 'readonly',
        // 告诉eslint代码运行时这个变量一定存在设置值为writable让request可被重写
        request: 'readonly',
    }
}