文筆不是很好，第一次寫東西，主要為了記錄h5的學習過程。今天記錄的是vscode配置js開發環境。

什么是VSCode

Visual Studio Code (簡稱VS Code/VSC) 是一款于2015年由微軟免費開源的現代化輕量級代碼編輯器，支持幾乎所有主流的開發語言的語法高亮、智能代碼補全、自定義熱鍵、括號匹配、代碼片段、代碼對比 Diff、GIT 等特性，支持插件擴展，并針對網頁開發和云端應用開發做了優化。之前用過sublimit text，為何選擇VSCode主要是簡潔，功能強大，適合新手學習使用。(下載鏈接：https://code.visualstudio.com)

安裝必要的擴展插件

下載插件都在圖中紅框位置

下載安裝好之后是英文的，如果需要轉換成中文，可以先在搜索框中搜索chinese點擊install就可以了。

1.在圖中位置選擇工具和語言，我們使用的是JavaScript，其他語言如有需求自行選擇。

2.需要兩個必要的擴展插件：Code Runner、HTML CSS Support。還有一個是后面會用的Debugger for Chrome，調試的時候用谷歌瀏覽器運行需要用這個插件，可以提前安裝好。

配置調試環境

1.在任何位置創建一個新的文件夾，我選擇在桌面創建了一個測試文件夾。

2.在vscode中點擊新建文件

3.在圖中紅框內可以看到我們新建的文件untitled-1，沒有任何后綴的文件，這時需要保存文件至剛才創建的文件夾里面。

4.在給文件保存的時候重命名為test.html，同樣需要創建css文件后綴就改為.css

5.保存好后可以看到文件已經是html格式的文件，然后點擊打開文件夾，打開的是你創建的文件夾(上圖中的h5test文件夾)，不是文件夾里面剛才保存的html文件，打開后可以看到圖2這個樣子

1

2

6.在html文件中輸入以下測試內容，輸完后保存一下

7.按下F5會有一個彈出框提示我們使用什么環境，前面我提到過安裝Debugger for Chrome插件，因此這里會有chrome選項，點擊即可。如果沒有chrome選項就選擇more按鈕添加Debugger for Chrome插件，然后再按F5選擇Chrome。用其他瀏覽器的話下載其他瀏覽器的插件。

8.選擇Chrome后可以看到有個launch.josn文件，可以直接在url對應的值填上路徑，不知道路徑是什么可以先自己用chrome瀏覽器打開文件夾內的html文件，然后直接復制瀏覽器的地址到 url對應的值里面如下

9.做好這些以后按下F5我們會發現已經可以正常運行啦，可以安心學習我們的js基礎知識了

總結

以上是生活随笔為你收集整理的vscode中装js解释器_h5学习记录（1）--vscode配置js开发环境的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。