eslint从入门到放弃（三）ESLint配置之env

上文说了esLint配置之globals，今天说下ESLint配置中的env，前文传送门，

eslint从入门到放弃（一）eslint入门

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

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

ESLint配置之env

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

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

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

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

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

.eslintrc（eslint配置文件）内容如下

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

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

window.test = "123"
console.log(111)
function add (a, b) {
    // c 是未定义的
    return a + b + c
}
add(1, 2)

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

npx eslint env.js -c .eslintrc.js

/Users/baymax/Desktop/workspace/note-repo/eslint/eslint配置之env/demo/env.js
  1:1   error  'window' is not defined   no-undef
  2:1   error  'console' is not defined  no-undef
  4:20  error  'c' is not defined        no-undef

ESlint 和我的对话，发现问题

ESlint看了上面的报错后发生了一下对话：

ESlint：『window和console、c 未定义啊，主人，此处有bug！！！』

我：『嗯…有bug不怕，作为前端bug攻城狮的我，不就是为bug而生的嘛。放开那段代码，让我来！！！！』

我抿嘴一笑，然后放眼朝着代码看过来，一看不打紧，越看越觉得奇怪，嗯？总觉得哪里不对！

我抬起眼注视着eslint说：『角豆麻袋…老哥，c 未定义我能理解，因为确实在add函数上下文里面没定义，就直接使用了。你说你告诉我window和console这两个未定义是几个意思？这俩明明全局变量，怎么会能是未定义呢？！！老哥，你一定是在逗我!!!』

ESlint：『主人，你看这个文件内容，window和console定义了么？是吧，没定义就直接使用了吧，你觉得window和console这两个变量可以用，是因为你潜意识默认这个代码是运行在浏览器环境，然而如果这段代码是运行在node环境呢？这段代码会报错的，所以我（eslint）其实并不假设你代码的运行环境，换句话说我不知道你的将要运行的环境，我只是做了根据你设置的规则校验代码的工作。（手动摊手>_<）』

我：『也对』嘿嘿，上节课我学了globals（点击回顾），这次正好派上用场，直接把window和console，加入globals里面不就行了，忍不住给我的机智点赞！！o(￣▽￣)ｄ

解决问题

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

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

再校验下

npx eslint env.js -c .eslintrc.js

 /demo/env.js
  5:20  error  'c' is not defined  no-undef

你看已经不报window和console 未定义了

引出env，原来隐藏大招是它

Wait a minute… 浏览器/node环境下有很多全局变量是直接可以用的(比如window/console/global/navigator)，这么多，难不成我要一个一个定义？想想都觉得麻烦，天啊，我怎么保住我的头发！！！

不不不，eslint 想到了这一点，所以提供了env这个配置项指定你的环境变量，当你开启了对应的环境，eslint就会自动预定义，检测代码时，就避免了报错。上面env.js中我们使用了window和console这两个全局变量，这两个变量是在浏览器环境直接可以用的，那我们配置下env为browser就可以了

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

module.exports = {
    env: {
        browser: true,
    },
    "rules": {
        "no-undef": "error",
    }
}

每个env对应的全局变量

找了找eslint的源码，其实里面调用的是globals 附上：源码地址

具体定义参看globals

欢迎关注我的个人公众号「「小枫学幽默」」一起成长，一起分享生活！！

附录：所有可用的env

browser - 浏览器环境中的全局变量。

node - Node.js 全局变量和 Node.js 作用域。

commonjs - CommonJS 全局变量和 CommonJS 作用域 (用于 Browserify/WebPack 打包的只在浏览器中运行的代码)。

shared-node-browser - Node.js 和 Browser 通用全局变量。

es6 - 启用除了 modules 以外的所有 ECMAScript 6 特性（该选项会自动设置 ecmaVersion 解析器选项为 6）。

worker - Web Workers 全局变量。

amd - 将 require() 和 define() 定义为像 amd 一样的全局变量。

mocha - 添加所有的 Mocha 测试全局变量。

jasmine - 添加所有的 Jasmine 版本 1.3 和 2.0 的测试全局变量。

jest - Jest 全局变量。

phantomjs - PhantomJS 全局变量。

protractor - Protractor 全局变量。

qunit - QUnit 全局变量。

jquery - jQuery 全局变量。

prototypejs - Prototype.js 全局变量。

shelljs - ShellJS 全局变量。

meteor - Meteor 全局变量。

mongo - MongoDB 全局变量。

applescript - AppleScript 全局变量。

nashorn - Java 8 Nashorn 全局变量。

serviceworker - Service Worker 全局变量。

atomtest - Atom 测试全局变量。

embertest - Ember 测试全局变量。

webextensions - WebExtensions 全局变量。

greasemonkey - GreaseMonkey 全局变量。

这些环境并不是互斥的，所以你可以同时定义多个。如同时这是node 和 browser

module.exports = {
    env: {
        browser: true,
        node: true,
    },
    "rules": {
        "no-undef": "error",
    }
}