在现代的前端开发中，ES6 已经成为了非常常用的一种编程语言。然而，在使用 ES6 进行开发时，我们往往会遇到很多语法问题，这是因为很多浏览器的 JavaScript 引擎并不支持 ES6 的语法，导致我们的代码在一些旧版浏览器上运行出错。为解决这一问题，我们需要使用 ESLint 工具来对我们的代码进行语法检查，同时，也需要对 ESLint 进行相应的配置以支持 ES6 的语法规范。
一、安装 ESLint
在开始配置之前，我们需要先安装 ESLint 工具。可以使用 npm 全局安装 ESLint：
npm install -g eslint
也可以在项目中安装 ESLint：
npm install eslint --save-dev
二、配置 ESLint 支持 ES6
配置 ESLint 支持 ES6 的步骤分为以下两步：
1. 安装相关插件
ESLint 可以通过插件来支持不同的语法规范，因此我们需要先安装相应的插件来支持 ES6 的语法规范。可以使用以下命令来同时安装相关插件：
npm install babel-eslint eslint-plugin-import eslint-plugin-node eslint-plugin-promise eslint-plugin-standard eslint-plugin-react --save-dev
- babel-eslint：使用 Babel 解析 Javascript 代码；
- eslint-plugin-import：支持使用 import/export 语法；
- eslint-plugin-node：支持使用 NodeJS 语法；
- eslint-plugin-promise：支持使用 Promise 语法；
- eslint-plugin-standard：支持使用 StandardJS 语法；
- eslint-plugin-react：支持使用 ReactJS 语法。
2. 修改 .eslintrc 配置文件
在我们的项目中，.eslintrc 文件通常用于存放 ESLint 的配置信息。我们需要在 .eslintrc 文件中进行相应的配置以支持 ES6 的语法规范。
-- -------------------- ---- -------
-
---------- -
---------------------
-----------------------
-------------------------
-----------------------------
---------------------------
-------------------------
--
--------- ---------------
---------------- -
------------- ---------
-------------- -----
--------------- -
------ ----
-
--
---------- -
---------
-------
----------
-----------
-------
--
-------- -
------------------------------ --------- -
-------- --------
------------ --------
------------- --------
---
------- --------- ----------
--------- --------- ----------
----------------- -------- - ------- ------ ------- ------------- --------------------- ----- --
-
-在以上配置中：
extends：指定需要扩展的规则，这里使用了推荐的规则并扩展了需要使用的插件；parser：指定使用 Babel 解析器；parserOptions：指定解析时需要用到的选项；plugins：指定需要使用的插件；rules：指定需要检查的规则。
在以上配置中，我们需要注意以下几点：
parser指定了babel-eslint解析器，这里使用 Babel 解析 Javascript 代码；parserOptions中的sourceType值指定了module，这意味着我们可以在代码中使用 import/export 语法；parserOptions中的ecmaVersion值指定了 2018，这意味着我们可以使用 ES6 的所有特性；parserOptions中的ecmaFeatures.jsx值指定了true，这意味着我们可以在代码中使用 ReactJS 的语法特性。
三、示例代码
最后，我们来看一下使用 ESLint 配置 ES6 语法支持的示例代码：
-- -------------------- ---- -------
------ ------ - --------- - ---- -------
----- --- ------- --------- -
----------- ------- -
------------
---------- - -
-------- ------- -------
-
-
------ -- -
------ -
-------------------------------
-
-
-
------ ------- ---在以上代码中，我们使用了 import/export 语法，使用了构造函数来初始化状态，使用了 ReactJS 的语法特性。如果我们没有配置 ESLint 来支持 ES6 的语法规范，代码就会报错，使用 ESLint 配置之后则可以正常运行。
四、总结
ESLint 是一个非常强大的工具，通过对其进行相应的配置，我们可以大大提高我们的编码体验和代码质量。在使用 ESLint 进行开发时，我们需要对其进行相应的配置，以支持我们使用的语法规范，这对我们的日常开发工作有着非常重要的作用。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/646b4d18968c7c53b0aab354