前言
在前端开发中，我们经常需要使用新的 JavaScript 特性，但是这些特性在旧版本的浏览器中不被支持。为了兼容性，我们需要使用 Babel 编译器将这些新特性转换成旧版本的 JavaScript 代码。本文将介绍如何在 VSCode 中使用 Babel 编译器编译 JavaScript 代码。
安装 Babel
首先，我们需要在项目中安装 Babel。可以使用 npm 命令进行安装：
npm install --save-dev @babel/core @babel/cli @babel/preset-env
这里我们安装了三个包：@babel/core、@babel/cli 和 @babel/preset-env。@babel/core 是 Babel 的核心库，@babel/cli 是命令行工具，@babel/preset-env 是一个预设，可以根据目标环境自动进行转换。
配置 Babel
接下来，我们需要在项目根目录下创建 .babelrc 文件，并配置 Babel。可以使用以下配置：
-- -------------------- ---- -------
-
---------- -
-
--------------------
-
---------- -
--------- -----
----- ----
-
-
-
-
-这里我们配置了 @babel/preset-env，并指定了目标浏览器的版本。这样 Babel 将会根据目标浏览器的版本自动转换代码。
配置 VSCode
在 VSCode 中，我们需要安装一个插件来支持 Babel。可以搜索并安装 Babel JavaScript 插件。
安装完成后，我们需要在 VSCode 的设置中配置 Babel。可以打开 VSCode 的设置，搜索 babel，并进行如下配置：
-- -------------------- ---- -------
-
----------------- -
-------------
------------------
-------------
-----------------
--
------------------------- ----
-这里我们配置了 babel.validate，指定了需要进行 Babel 转换的文件类型。我们还将 babel.enableValidation 设置为 true，这样当我们编写 JavaScript 代码时，VSCode 将会自动进行 Babel 转换。
示例代码
下面是一个示例代码，演示了如何使用 Babel 编译 JavaScript 代码：
const sum = (a, b) => {
return a + b;
}
console.log(sum(1, 2));在 VSCode 中，当我们编写这段代码时，它会自动进行 Babel 转换，转换成如下代码：
"use strict";
var sum = function sum(a, b) {
return a + b;
};
console.log(sum(1, 2));这里 Babel 将箭头函数转换成了普通函数，并添加了 "use strict";。
总结
在本文中，我们介绍了如何在 VSCode 中使用 Babel 编译 JavaScript 代码。首先，我们需要安装 Babel，并配置预设和目标浏览器的版本。然后，我们需要在 VSCode 中安装 Babel JavaScript 插件，并进行相应的配置。最后，我们演示了一个示例代码，展示了 Babel 的转换效果。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/663d95b6d3423812e4ba313b