1.安裝

進入官網下載https://code.visualstudio.com/

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

2.常用插件安裝

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

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

a2.查看——>擴展；

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

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

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

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

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

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

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

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

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

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

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

3.需要安裝的插件

live server

3.1 HTML Snippets

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

3.2 HTML CSS support

css自動補齊

3.3 VS color Picker

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

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

3.4 live HTML Previewer

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

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

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

3.5 View In Browser
- 預覽頁面（ctrl+F1）

3.6 vscode-icons

側欄的圖標

3.7 JS-CSS-HTML Formatter

格式化

3.8 jQuery Code Snippets

jquery 自動提示

3.9Path Autocomplete

- 路徑自動補齊

3.10 Npm Intellisense
- npm包代碼提示

3.11 ESLint
- 檢測JS必備

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

3.14 Bootstrap 3 Snippets
- bootstrap必備

3.15 Vue VSCode Snippets

- vue必備

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

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

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

"less.compile": {

"compress": true,

"sourceMap": true,

"out":false

}

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

{

"less.compile": {

"compress": true,

"sourceMap": true,

"out":false

}

}

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

****提示：****

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

4.常用快捷鍵

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

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

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

全文格式化：Alt+Shift+F

可以選中一段代碼，然后按下 “Cmd + K Cmd + F” （Windows 上是 Ctrl + K Ctrl + F），這樣只有這段被選中的代碼才會被格式化

注釋：ctrl + /

向上(下)復制行shift + alt + top(down)

向上(下)移動行* alt + top(down)*

新建一個窗口ctrl + shift + N

行增加縮進：ctrl + [

行減少縮進 * ctrl + ]**

裁剪尾隨空格(去掉一行的末尾那些沒用的空格):ctrl + x ctrl +k

強烈建議把這個啟用，這樣保存的時候就會自動刪掉那些沒用的空格，在很多公司的代碼規范里都是不允許存在這些空格的。

顯示隱藏側邊欄:ctrl + B

拆分編輯器(最多拆分成三塊):ctrl + /按ctrl + 1(2,3)就可以在拆分后的編輯器里切換

方法縮小ctrl +(-)

關閉編輯器ctrl + W(F4)

切換編輯器ctrl + shift + left(right)

也可以用ctrl+1(2,3)

切換全屏F11

切換自動換行alt + Z

顯示Git ctrl + shift + G

前提是你的項目必須是一個git項目

先用著，后面有需要了來補充；

總結

以上是生活随笔為你收集整理的vscode使用教程（web开发）的全部內容，希望文章能夠幫你解決所遇到的問題。

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