配置ES6的JavaScript运行环境-Visual Studio Code
内容：在Visual Studio Code下，配置ES6的JS运行开发环境（通过babel把ES6转码为ES5语法的代码）和VS相关插件。（之前都用sublimeText3，好像现在主流都是用VS的比较多）
前排提示：如果只是学习，单纯调试使用ES6的JS代码，安装Visual Studio Code和Node.js（正文的第一步和第二步），然后就可以在Debug下执行Run with Node.js就可以在debug控制台观看ES6的JS代码执行的结果了。如果查看HTML代码的效果，可以只看正文的第七步的第3，4点。不过还是建议观看全文，从开发角度，构建一个工程。
正文：
一、下载和安装Visual Studio Code
在官网下载Visual Studio Code：Visual Studio Code
安装完的VS界面如图所示：
二、下载和安装Node.js
在官网下载Node.js：Node.js（在生产环境，建议使用LTS，比较稳定，bug相对比较少。）如果下载成功，可以的win的cmd命令下用node -v查看自己的node版本，例如我这次下的是12.13.1版本。注意，当我们安装好Node时，软件包管理工具npm也安装了。
（win+R键，输入cmd）
(node -v)
三、安装全局的babel
使用npm命令安装全局的babel。输入命令：npm install babel-cli babel-eslint -g
四、使用npm init命令创建工程
如果有创建的工程了，这一步可以跳过。
我们可以在VS的终端下，使用npm init命令创建工程。在控制台下，创建工程目录，如:D:front endworkspace，然后进入该目录，使用命令：npm init（或者是 npm init -y），-y代表全部默认同意，就不用一次次按回车了。此时在该目录的根目录下创建了生成package.json文件（依赖文件），可以根据自己的需要进行修改 。
此外，为了方便管理，通常我们需要创建两个目录：src目录（源码目录）和dist目录（利用Babel编译成的ES5代码的文件都在这里，HTML页面需要引入的是这里的js文件而不是src中的），所以有两个目录：D:front endworkspacedist和D:front endworkspacesrc
（点击terminal，选择new terminal）
（npm init/npm init -y）
（package.json文件，可以修改配置值）
五、本地安装babel-preset-es2015 和 babel-cli（编译插件）
在终端执行：npm install --save-dev babel-preset-es2015 babel-cli
（注意此时的之前的package.json文件会自动多了devDependencies选项。其实还创建了package-lock.json文件和node_modules文件夹）
六、新建.babelrc及简单检测（ES6转化为ES5的语法）
在根目录下新建一个.babelrc文件，并写入代码：
{ "presets":[ "es2015" ], "plugins":[] }
这样就创建了.babelrc文件
现在可以在终端输入的转换命令了，这次ES6成功转化为ES5的语法。
简单检测一下：
1、首先在项目文件根目录下新建一个index.html文件（创建.HTML文件，在代码输入! 和tab键可以快速创建HTML5模板，当然在VS中我们也可以定制自己的模板）。注意，在引入js文件时，引入的是dist目录下的文件（就是我们想要把src下的ES6文件转换为ES5语法文件）。
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <title>Document</title> <!-- 引入自己的JS代码 --> <script src="./dist/index.js"></script> </head> <body> </body> </html>
2、在src目录下，新建index.js文件。通常是ES6语法文件，我们简单用let（ES6特有）举例。（我们的目标就是将其转换为在ES5语法的文件并放入到dist目录下）
let i = 10; console.log(i);
3、在终端使用命令：babel src/index.js -o dist/index.js（将ES6语法转换为ES5语法）
（转换为了ES5语法，并保存在dist目录下）
（运行时，也输出正确结果）（通过VS界面的DEBUG选项中，选择Run with Node.js）
七、VS code的常用插件
1、基本插件扩展用法。我们可以在主界面的左边工具栏中选中Extensions（最后一个），然后再搜索框内搜索我们需要的扩展插件。下面推荐几个常用的插件和用法。
2、ESLint。JS语法代码检测。
3、open in browser。可以通过邮件把我们写的HTML代码展示到我们的浏览器中。
（可以选择默认的浏览器或者是下面自己选择的浏览器）
补充：我们可以更换我们自己的VS默认浏览器，VS中，file-->preferences-->settings，然后再弹出来的界面搜索框输入插件的默认文件（open-in-browser.default）。然后再下面的Workspace中输入浏览器名：Chrome（这里我用谷歌浏览器）。然后保存。之后在使用Open in Default Browser就可以在谷歌展示我们的HTMl代码了。
4、livereload。平时我们在代码区中修改，然后保存，然后再打开浏览器刷新，才能显示新的变化。livereload插件能够使得我们在代码区每保存一次，网页显示的东西自动更新一次。（类似webpack-dev-server）
（选择livereload）
首先，在VS安装好livereload之后，同时按ctrl+shift+p,输入框内输入livereload，就会显示LiveReload:Enable/disable server，点一下就会开启这个服务。
然后，在谷歌浏览器网上应用商店搜索livereload，并安装，然后在浏览器扩展程序中启用并允许访问文件网址。
（启用）
（允许）
这样，当我们在浏览器打开了的自己代码网页，点击浏览器（右上角）的livereload按钮，从空心到实心
。之后，我们每次在VS修改代码，每次保存之后，就可以直接在浏览器看到我们的最新一次的代码修改的展示结果了。
5、VS Code JavaScript(ES6) snippets。它是如今最流行的代码片段插件，可以辅助我们快速编写ES6/ES7代码。例如：输入imp，回车之后，就变成import moduleName from 'module'。
6、Beautify。在写代码或者是粘贴代码时，缩进的格式变乱，需要一行一行的调整十分麻烦。Beautify是一个代码格式化工具，能帮助我们调整。
首先下载Beautify
在工作目录下建立.jsbeautifyrc文件。（这个排版格式，我们也是可以定义自己的模板）
{ "brace_style": "none,preserve-inline", "indent_size": 2, "indent_char": " ", "jslint_happy": true, "unformatted": [""], "css": { "indent_size": 2 } }
启用保存文件就自动排版。在VSCode的配置文件里添加 "editor.formatOnSave":true （setting.json文件里面）
这样，只要我们在自己工作目录下，保存代码，其自动就会按照格式调整了。
备注：上述插件是我本人（菜鸟一个）目前使用到的，日后有使用到好的插件，我再分享加入进去。