內容：在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 end\workspace，然后進入該目錄，使用命令：npm init（或者是 npm init -y），-y代表全部默認同意，就不用一次次按回車了。此時在該目錄的根目錄下創建了生成package.json文件（依賴文件），可以根據自己的需要進行修改 。
此外，為了方便管理，通常我們需要創建兩個目錄：src目錄（源碼目錄）和dist目錄（利用Babel編譯成的ES5代碼的文件都在這里，HTML頁面需要引入的是這里的js文件而不是src中的），所以有兩個目錄：D:\front end\workspace\dist和D:\front end\workspace\src
（點擊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文件里面）
這樣，只要我們在自己工作目錄下，保存代碼，其自動就會按照格式調整了。
備注：上述插件是我本人（菜鳥一個）目前使用到的，日后有使用到好的插件，我再分享加入進去。