vscode使用教程（web開發(fā)）

發(fā)表時(shí)間：2018-5-25

發(fā)布人：葵宇科技

瀏覽次數(shù)：235

1.安裝

進(jìn)入官網(wǎng)下載https://code.visualstudio.com/

一直下一步就好了，中間可以選擇把軟件安裝在哪個(gè)目錄。

2.常用插件安裝

a. 進(jìn)入擴(kuò)展視圖界面安裝/卸載

a1.快捷鍵：Ctrl+shift+x；

a2.查看——>擴(kuò)展；

a3.點(diǎn)左側(cè)邊框的擴(kuò)展圖標(biāo)按鈕進(jìn)入。（最下面的正方形圖標(biāo)）

在頂部搜索框輸入你需要的擴(kuò)展插件，找到之后在擴(kuò)展插件后面的選項(xiàng)中點(diǎn)擊【安裝】即可，需要卸載擴(kuò)展只需要點(diǎn)【卸載】即可。

擴(kuò)展下載安裝完畢之后需要點(diǎn)擊【啟用】才生效，有些擴(kuò)展需要重啟編輯器才生效。

b. 如何選擇擴(kuò)展（插件）呢？

其實(shí)也不難，擴(kuò)展的名稱一般都暴露了它的功能，基本如下：

1.帶snippets 一般是代碼提示類擴(kuò)展；

2.帶viewer 一般是代碼運(yùn)行預(yù)覽類擴(kuò)展；

3.帶support 一般是代碼語言支持；

4.帶document 一般是參考文檔類擴(kuò)展；

5.帶Formatt 一般是代碼格式化整理擴(kuò)展；

當(dāng)然有的snippets 也自帶support功能，并不是以上面的關(guān)鍵詞作為唯一標(biāo)準(zhǔn)。

3.需要安裝的插件

3.1 HTML Snippets

為HTML文檔提供代碼提示功能，包含HTML5。

3.2 HTML CSS support

css自動(dòng)補(bǔ)齊

3.3 VS color Picker

為css文檔和HTML文檔提供顏色選擇，當(dāng)輸入“#”后會(huì)出現(xiàn)顏色選擇器浮窗，點(diǎn)擊相應(yīng)顏色之后會(huì)插入文檔中，默認(rèn)用16進(jìn)制表示。若想用其他格式的顏色，

如RGB等則推薦擴(kuò)展：Color Picker (Color Picker缺點(diǎn)是需要配置，安裝nodejs，并且添加node到全局環(huán)境變量中。而且在插入時(shí)需要使用命令調(diào)出提色板，有點(diǎn)麻煩）

3.4 live HTML Previewer

為html文檔提供預(yù)覽功能，需要用命令或者快捷鍵調(diào)出，會(huì)在編輯器中新增一列，用于運(yùn)行html文件。

a. 按F1在命令框中輸入：Show side preview 新增一列顯示html，能邊寫邊看到效果，實(shí)時(shí)預(yù)覽。

b. 可以在html文檔中右鍵選擇：Open in browser 在系統(tǒng)默認(rèn)瀏覽器中打開，該模式下不能提供實(shí)時(shí)預(yù)覽,保存時(shí)不自動(dòng)刷新瀏覽器。

3.5 View In Browser
- 預(yù)覽頁面（ctrl+F1）

3.6 vscode-icons

側(cè)欄的圖標(biāo)

3.7 JS-CSS-HTML Formatter

格式化

3.8 jQuery Code Snippets

jquery 自動(dòng)提示

3.9 Path Autocomplete

- 路徑自動(dòng)補(bǔ)齊

3.10 Npm Intellisense
- npm包代碼提示

3.11 ESLint
- 檢測JS必備

3.12 Debugger for Chrome
- 方便調(diào)試
3.13 Auto Rename Tag
- 自動(dòng)同步修改標(biāo)簽

3.14 Bootstrap 3 Snippets
- bootstrap必備

3.15 Vue VSCode Snippets

- vue必備

3.16 background
- 一個(gè)萌萌的插件，可以自己設(shè)置vsc的背景圖

3.17 easyless （暫時(shí)還沒安裝這個(gè)）

為less文檔提供提示，錯(cuò)誤警告，以及把less文檔編譯為css文件?？勺远x設(shè)置。開發(fā)者給出的配置例子：

"less.compile": {

"compress": true,

"sourceMap": true,

"out":false

}

可以粘貼到用戶設(shè)置的【默認(rèn)設(shè)置】里，也可以粘貼到用戶設(shè)置settings.json里。后面的懂json的同學(xué)自動(dòng)忽略：如果settings.json是空的，應(yīng)該寫成：

{

"less.compile": {

"compress": true,

"sourceMap": true,

"out":false

}

如果之前已有寫入json代碼，你應(yīng)該在前面的名稱/值對塊后面加上“,”（新手容易多加或者少加","符號(hào)，個(gè)人覺得是這樣的）

****提示：****

在寫的時(shí)候，代碼內(nèi)最好不要加注釋。"sourceMap": true, 這個(gè)地方最好設(shè)置成false ，因?yàn)楫?dāng)你實(shí)際使用的時(shí)候?yàn)g覽器找不到sourceMap 可能會(huì)報(bào)錯(cuò)或者瀏覽器一直去找，還沒遇到過（我碰到j(luò)Query.js因?yàn)檫@個(gè)報(bào)錯(cuò)的），入門的同學(xué)還是設(shè)置成false 比較好。

4.常用快捷鍵

文件 – 首選項(xiàng) – 鍵盤快捷方式：就可以看到所有快捷鍵；

修改快捷鍵
文件 – 首選項(xiàng) – 鍵盤快捷方式，找到你要修改的快捷鍵名字，右邊覆蓋就可以了，很方便！也可以高級(jí)自定義，選項(xiàng)在文件 – 首選項(xiàng) – 鍵盤快捷方式打開之后的最上邊，和sublime 自定義快捷鍵的方式相同。

將保存，和打開瀏覽器的快捷鍵改成了自己習(xí)慣的方式，如下圖；