ES6是现代前端开发中不可避免的趋势，然而ES6也给前端开发带来了一个新的问题：如何规范化ES6代码的书写？Babel与ESLint的协作可以一定程度上优化ES6代码的规范性，本文将会详细讲述这一过程并提供示例代码。
Babel
Babel是一个工具链，可以将ES6的代码转换成向下兼容的Javascript代码，使得在低版本的浏览器也能运行ES6代码。Babel的作用是非常重要的，它可以让我们快速的享受到ES6的优势，而不用考虑兼容性问题。
下面是一个简单的Babel转换示例：
-- -------------------- ---- -------
-- -----
----- ------ -
----------------- -
--------- - ----
-
--------- -
------ ---------
-
-
-- ---------
---- --------
-------- ------------ -
-- ------- ------ --- ---------- -- ------ --------------- --- --------- -
------- - -------- ------------ -
------ ------ --- --- ----------- - ----------- - --------------
--
- ---- -
------- - -------- ------------ -
------ --- -- ------ ------ --- ---------- -- --------------- --- ------ -- --- --- ---------------- - -------- - ------ --- --- ----------- - ----------- - --------------
--
-
------ -------------
-
-------- ------------------------- ------------ -
-- ----------- ---------- ------------- -
----- --- ----------------- ---- - ----- -- - -----------
-
-
-------- ------------------------- ------ -
--- ---- - - -- - - ------------- ---- -
--- ---------- - ---------
--------------------- - --------------------- -- ------
----------------------- - -----
-- -------- -- ----------- ------------------- - -----
----------------------------- --------------- ------------
-
-
-------- ------------------------- ----------- ------------ -
-- ------------ ---------------------------------------- ------------
-- ------------- ------------------------------ -------------
------ ------------
-
--- ------ - --------------------- -- -
-------- ------------ -
--------------------- --------
--------- - -----
-
-------------------- --
---- ----------
------ -------- --------- -
------ ----------
-
----
------ -------
----ESLint
ESLint是一个用于检验Javascript代码是否符合规范的工具。ESLint提供了很多规则，并且可以通过配置文件自定义规则。使用ESLint可以保证代码质量，提高代码的可读性和可维护性。
ESLin配置文件通常是在项目根目录下创建.eslintrc.js文件，并写入相应配置。下面是ESLint配置文件的一个示例：
-- -------------------- ---- -------
-------------- - -
-------- -
------- --------- ----------
--------- --------- ----------
--------- --------- --
--
---------- ---------------------
---------------- -
-------------- -
-
-上面的配置将会检测代码中是否存在分号、是否使用双引号、是否缩进4个空格等规则。
Babel与ESLint协作
Babel和ESLint的结合是非常自然的一件事情。Babel可以让我们使用ES6的新特性，而ESLint又可以让我们检测代码是否符合规范。下面是一个示例配置：
-- -------------------- ---- -------
-
---------- -
--------------------- -
---------- -
--------- -----
----- ----
-
--
--
---------- -
--------------------
---------------------------- - -------- ---- ---
------------------------------------ - ------- ---- --
--
------ -
------------- -
---------- -
--------------------------
-
-
--
--------------- -
-------- -
------- --------- ----------
--------- --------- ----------
--------- --------- --
--
---------- ---------------------
---------------- -
-------------- -
-
-
-以上是一个简单的Babel和ESLint协作的模板配置，Babel配置presets和plugins属性，用于配置Babel的预设和插件。ESLint配置则放入eslintConfig属性之中。
结论
Babel和ESLint的协作可以让我们迅速享受到ES6的优势，在代码书写上变得更加规范。当然，这只是一个开始，我们可以通过自定义配置使得Babel和ESLint更加符合我们的实际情况和需求。你可以根据上述示例进行实践，也可以参考其他的ES6规范教程和自订规则来进一步提高自己的代码质量。
参考文献：
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/6722d5f02e7021665e0d1e0d