在进行前端开发的过程中，我们会遇到很多的错误和警告，为了能够快速地发现和解决这些问题，我们需要使用一些工具来帮助我们进行代码检查。其中，eslint 是比较常用的工具之一，它可以对我们的 JavaScript 代码进行静态检查，并给出相应的警告和错误信息。但是，有些功能或特性在某些浏览器或环境下是不被支持的，这时我们就需要借助于 eslint-if-supported 这个 npm 包来进行检查。
什么是 eslint-if-supported?
eslint-if-supported 是一个 eslint 的插件，它可以根据指定的环境和特性来检查和排除相应的代码。例如，我们可以指定代码中使用的某些方法或属性只能在特定的浏览器版本下使用，这样在其他版本下使用这些方法或属性时就会被 eslint 报错，从而避免产生不必要的问题。
如何使用 eslint-if-supported?
安装
首先，我们需要将 eslint 和 eslint-if-supported 安装到项目中：
npm install --save-dev eslint eslint-if-supported
配置
在项目中使用 eslint-if-supported 需要进行一些配置，具体的配置方式如下：
-- -------------------- ---- -------
-
---------- -
---------------------
----------------------------------------
--
---------- ------------------------
------ -
---------- ----
--
---------------- -
-------------- --
------------- --------
--
-------- -
------------------------------------------------------ --------- -
----------- ------ - ---------- --- -- ----
---------- -----------
--
-
-"extends": ["eslint:recommended", "plugin:eslint-if-supported/recommended"]：这里引入了 eslint 的推荐配置和 eslint-if-supported 的推荐配置，可以提供一些默认的规则配置。"plugins": ["eslint-if-supported"]：这里需要添加 eslint-if-supported 插件"env": {"browser": true}：指明我们的代码是在浏览器环境下运行的。"parserOptions": {"ecmaVersion": 6, "sourceType": "module"}：指定我们的代码是使用 ES6 模块化方式编写的。"rules": {"eslint-if-supported/no-unsupported-browser-features": ["error", {"browsers": ["last 2 versions", "ie >= 9"], "ignores": ["flexbox"]}]}：这里配置了 eslint-if-supported 的规则检查，指明了我们需要支持的浏览器和需要忽略的特性。
使用
使用 eslint-if-supported 的的时候需要注意一下两点：
你需要传递 --staged 这个参数，因为 eslint-if-supported 只会检查你提交到暂存区的代码。
因为在 package.json 中配置了 "eslingConfig": { "ignorePatterns": ["dist"] } 注释dist文件夹被eslint忽略掉。
检查所有提交到暂存区的代码：
npx eslint-if-supported --debug
校验指定的文件或目录：
npx eslint-if-supported --debug path/to/file/or/directory
示例
我们来写一个简答的示例，看看 eslint-if-supported 如何工作。
// example.js
const arr = [1, 2, 3];
console.log(arr.reduce((a, b) => a + b));
if (document.querySelector) {
console.log('querySelector is supported');
}在上面的代码中，我们使用了 Array.prototype.reduce 方法和 document.querySelector 方法，这两个方法在一些低版本的浏览器下是不被支持的。那么我们可以使用 eslint-if-supported 来检查一下这段代码：
npx eslint-if-supported --debug example.js
输出结果：
-- -------------------- ---- -------
- ---------- ---------------
- -------- -- -------
- ------------------------ -- ---- --- -- --- --------- -- --- ---- - -------- -- --- --- -- --------
-- -----------
----- --- - --- -- ---
-------------------------- -- -- - - ----
- ------------------------ -- ---- --- -- --------- -- --- ---- - -------- -- ---
-- -----------
-- ------------------------ -
-------------------------- -- ------------
-我们可以看到 eslint-if-supported 正确地判断出了代码中使用了不被支持的方法，并给出了相应的警告。
结语
eslint-if-supported 是一个非常好用的一个 npm 包，可以帮助我们更方便和快速地进行代码检查，避免一些不必要的问题。关于 eslint-if-supported 的更多使用方法和细节，可以参考官方文档。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/75210