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

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

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

瀏覽次數(shù)：235

1.安裝

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

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

2.常用插件安裝

a. 進入擴展視圖界面安裝/卸載

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

a2.查看——>擴展；

a3.點左側(cè)邊框的擴展圖標按鈕進入。（最下面的正方形圖標）

在頂部搜索框輸入你需要的擴展插件，找到之后在擴展插件后面的選項中點擊【安裝】即可，需要卸載擴展只需要點【卸載】即可。

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

b. 如何選擇擴展（插件）呢？

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

1.帶snippets 一般是代碼提示類擴展；

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

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

4.帶document 一般是參考文檔類擴展；

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

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

3.需要安裝的插件

3.1 HTML Snippets

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

3.2 HTML CSS support

css自動補齊

3.3 VS color Picker

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

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

3.4 live HTML Previewer

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

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

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

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

3.6 vscode-icons

側(cè)欄的圖標

3.7 JS-CSS-HTML Formatter

格式化

3.8 jQuery Code Snippets

jquery 自動提示

3.9 Path Autocomplete

- 路徑自動補齊

3.10 Npm Intellisense
- npm包代碼提示

3.11 ESLint
- 檢測JS必備

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

3.14 Bootstrap 3 Snippets
- bootstrap必備

3.15 Vue VSCode Snippets

- vue必備

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

3.17 easyless （暫時還沒安裝這個）

為less文檔提供提示，錯誤警告，以及把less文檔編譯為css文件。可自定義設(shè)置。開發(fā)者給出的配置例子：

"less.compile": {

"compress": true,

"sourceMap": true,

"out":false

}

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

{

"less.compile": {

"compress": true,

"sourceMap": true,

"out":false

}

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

****提示：****

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

4.常用快捷鍵

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

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

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