文筆不是很好，第一次寫東西缎浇，主要為了記錄h5的學(xué)習(xí)過程。今天記錄的是vscode配置js開發(fā)環(huán)境。
什么是VSCode
Visual Studio Code (簡稱VS Code/VSC) 是一款于2015年由微軟免費(fèi)開源的現(xiàn)代化輕量級代碼編輯器陨帆，支持幾乎所有主流的開發(fā)語言的語法高亮、智能代碼補(bǔ)全采蚀、自定義熱鍵疲牵、括號匹配、代碼片段榆鼠、代碼對比 Diff纲爸、GIT 等特性，支持插件擴(kuò)展妆够，并針對網(wǎng)頁開發(fā)和云端應(yīng)用開發(fā)做了優(yōu)化识啦。之前用過sublimit text，為何選擇VSCode主要是簡潔神妹，功能強(qiáng)大颓哮，適合新手學(xué)習(xí)使用。（下載鏈接：https://code.visualstudio.com）
安裝必要的擴(kuò)展插件
下載插件都在圖中紅框位置
下載安裝好之后是英文的鸵荠，如果需要轉(zhuǎn)換成中文冕茅，可以先在搜索框中搜索chinese點(diǎn)擊install就可以了。
1.在圖中位置選擇工具和語言蛹找，我們使用的是JavaScript姨伤，其他語言如有需求自行選擇。
2.需要兩個必要的擴(kuò)展插件：Code Runner庸疾、HTML CSS Support乍楚。還有一個是后面會用的Debugger for Chrome，調(diào)試的時候用谷歌瀏覽器運(yùn)行需要用這個插件届慈，可以提前安裝好徒溪。
配置調(diào)試環(huán)境
1.在任何位置創(chuàng)建一個新的文件夾凌箕，我選擇在桌面創(chuàng)建了一個測試文件夾。
2.在vscode中點(diǎn)擊新建文件
3.在圖中紅框內(nèi)可以看到我們新建的文件untitled-1词渤，沒有任何后綴的文件牵舱，這時需要保存文件至剛才創(chuàng)建的文件夾里面。
4.在給文件保存的時候重命名為test.html缺虐，同樣需要創(chuàng)建css文件后綴就改為.css
5.保存好后可以看到文件已經(jīng)是html格式的文件芜壁，然后點(diǎn)擊打開文件夾，打開的是你創(chuàng)建的文件夾（上圖中的h5test文件夾）高氮，不是文件夾里面剛才保存的html文件慧妄，打開后可以看到圖2這個樣子
6.在html文件中輸入以下測試內(nèi)容，輸完后保存一下
7.按下F5會有一個彈出框提示我們使用什么環(huán)境剪芍，前面我提到過安裝Debugger for Chrome插件塞淹，因此這里會有chrome選項(xiàng)，點(diǎn)擊即可罪裹。如果沒有chrome選項(xiàng)就選擇more按鈕添加Debugger for Chrome插件饱普，然后再按F5選擇Chrome。用其他瀏覽器的話下載其他瀏覽器的插件状共。
8.選擇Chrome后可以看到有個launch.josn文件套耕，可以直接在url對應(yīng)的值填上路徑，不知道路徑是什么可以先自己用chrome瀏覽器打開文件夾內(nèi)的html文件峡继，然后直接復(fù)制瀏覽器的地址到 url對應(yīng)的值里面如下
9.做好這些以后按下F5我們會發(fā)現(xiàn)已經(jīng)可以正常運(yùn)行啦冯袍，可以安心學(xué)習(xí)我們的js基礎(chǔ)知識了
