安裝http server插件，安裝完成后按下f1,然后輸入http會看到下面兩個選項，選擇with current file那個能夠創(chuàng)建一個服務(wù)器運行當前文件。另外一個會找當前目錄下的index.html,然后打開它。
Visual Studio Code (簡稱 VS Code / VSC) 是一款免費開源的現(xiàn)代化輕量級代碼編輯器，支持幾乎所有主流的開發(fā)語言的語法高亮、智能代碼補全、自定義熱鍵、括號匹配、代碼片段、代碼對比 Diff、GIT 等特性，支持插件擴展，并針對網(wǎng)頁開發(fā)和云端應(yīng)用開發(fā)做了優(yōu)化。軟件跨平臺支持 Win、Mac 以及 Linux。
VSC中文網(wǎng)：http://www.vscode.org/
vscode 作為一款逐漸火熱的編輯器。它的特點免費、開源、多平臺，以及集成git，代碼調(diào)試，插件豐富等有點，被大家逐漸熟知和認可。
這里主要說一下前端常用插件。
Auto Rename Tag
自動重命名配對的HTML / XML標簽
bachground
修改背景，設(shè)置編輯器界面的背景圖片。但是好像現(xiàn)在會出錯，具體設(shè)置內(nèi)容在vsc找到插件看詳細信息。
Bootstrap 4 & Font awesome snippets
bootstrap4和font awesome 快速引用和代碼生成。
Color-Highlight
在編輯器中高亮顯示顏色。
Color Picker
代碼的顏色選擇器。
Css Peek
能在源代碼中的字符串中找到對應(yīng)的css（類和ID）。顯示在那個css文件里，還有在第幾行。
Csscomb
css 、less、sass 的代碼格式化。
Debugger for Chrome
js調(diào)試的插件，前端項目在Chrome中運行起來之后，可以直接在VSCode中打斷點、查看輸出、查看控制臺，詳細配置見插件說明。
Document This
為js文件生成文檔的代碼注釋。
ESLint
檢查Javascript編程時的語法錯誤。
Git Easy
增加了vscode中自帶的git操作，安裝后按F1調(diào)出控制臺，輸入git easy [options]完成git操作，代替git bash。
Git History
查看git日志以及圖表和詳細信息。
查看文件的歷史記錄（Git日志）或文件中的行歷史（Git Blame）
Guides
代碼的標簽對齊線。
HTML CSS Class Completion
為基于工作空間上的CSS文件的HTML類屬性提供CSS類名稱提示。
HTML Boilerplate
提供生成標準HTML樣板代碼。
HTML CSS support
css 自動補齊
HTML Snippets
支持HTML5標簽提示
JavaScript (ES6) snippets
支持JavaScript ES6 語法
jQuery Code Snippets
jq代碼段提示。
JS-CSS-HTML Formatter
代碼格式化。
Lodash
lodash 函數(shù)提示。
Lorem ipsum
快速填充文本
Npm Intellisense
在import語句中自動完成npm模塊引入的代碼插件。
open in browser
在瀏覽器中打開，安裝后在左側(cè)目錄中右鍵點擊會出現(xiàn) open in browser 選項。
Path Intellisense
文件路徑提示。
Settings Sync
編輯器設(shè)置同步，包括插件，配置等。
詳情點擊=》https://marketplace.visualstudio.com/items?itemName=Shan.code-settings-sync
VS Code CSS Comments
css代碼注釋。
vscode-browser-plugin
在編輯器內(nèi)預覽HTML，
通過開啟端口(3000)監(jiān)聽當前打開項目的根目錄，在編輯器內(nèi)預覽網(wǎng)站，省去了頻繁切換瀏覽器、編輯器看頁面效果，修改代碼后自動刷新頁面。
vscode-icons
文件圖標。
Vue 2 Snippets
vue 代碼提示，高亮。
（ps：使用其他框架，直接搜就好，像是react，angular，就會出現(xiàn)相關(guān)的代碼提示和語法支持常用插件）
主題插件：
Material-theme；
monokai-light;
Monokai++;
One Dark Theme;
個人審美不同，大家自己體會并選擇。
以上就是我的前端常用插件，有些插件的功能相互交叉重復，自己可以有選擇的安裝使用。
以下內(nèi)容轉(zhuǎn)自：https://zhuanlan.zhihu.com/p/22880087
vsc常用快捷鍵：
同時打開多個窗口（查看多個項目）
- 打開一個新窗口： Ctrl+Shift+N
- 關(guān)閉窗口： Ctrl+Shift+W
同時打開多個編輯器（查看多個文件）
- 新建文件 Ctrl+N
- 歷史打開文件之間切換 Ctrl+Tab，Alt+Left，Alt+Right
- 切出一個新的編輯器（最多3個）Ctrl+\，也可以按住Ctrl鼠標點擊Explorer里的文件名
- 左中右3個編輯器的快捷鍵Ctrl+1 Ctrl+2 Ctrl+3
- 3個編輯器之間循環(huán)切換 Ctrl+`
- 編輯器換位置，Ctrl+k然后按Left或Right
格式調(diào)整
- 代碼行縮進Ctrl+[， Ctrl+]
- 折疊打開代碼塊 Ctrl+Shift+[， Ctrl+Shift+]
- Ctrl+C Ctrl+V如果不選中，默認復制或剪切一整行
- 代碼格式化：Shift+Alt+F，或Ctrl+Shift+P后輸入format code
- 修剪空格Ctrl+Shift+X
- 上下移動一行： Alt+Up 或 Alt+Down
- 向上向下復制一行： Shift+Alt+Up或Shift+Alt+Down
- 在當前行下邊插入一行Ctrl+Enter
- 在當前行上方插入一行Ctrl+Shift+Enter
光標相關(guān)
- 移動到行首：Home
- 移動到行尾：End
- 移動到文件結(jié)尾：Ctrl+End
- 移動到文件開頭：Ctrl+Home
- 移動到后半個括號 Ctrl+Shift+]
- 選中當前行Ctrl+i（雙擊）
- 選擇從光標到行尾Shift+End
- 選擇從行首到光標處Shift+Home
- 刪除光標右側(cè)的所有字Ctrl+Delete
- Shrink/expand selection： Shift+Alt+Left和Shift+Alt+Right
- Multi-Cursor：可以連續(xù)選擇多處，然后一起修改，Alt+Click添加cursor或者Ctrl+Alt+Down 或 Ctrl+Alt+Up
- 同時選中所有匹配的Ctrl+Shift+L
- Ctrl+D下一個匹配的也被選中(被我自定義成刪除當前行了，見下邊Ctrl+Shift+K)
- 回退上一個光標操作Ctrl+U
重構(gòu)代碼
- 跳轉(zhuǎn)到定義處：F12
- 定義處縮略圖：只看一眼而不跳轉(zhuǎn)過去Alt+F12
- 列出所有的引用：Shift+F12
- 同時修改本文件中所有匹配的：Ctrl+F12
- 重命名：比如要修改一個方法名，可以選中后按F2，輸入新的名字，回車，會發(fā)現(xiàn)所有的文件都修改過了。
- 跳轉(zhuǎn)到下一個Error或Warning：當有多個錯誤時可以按F8逐個跳轉(zhuǎn)
- 查看diff 在explorer里選擇文件右鍵 Set file to compare，然后需要對比的文件上右鍵選擇Compare with 'file_name_you_chose'.
查找替換
- 查找 Ctrl+F
- 查找替換 Ctrl+H
- 整個文件夾中查找 Ctrl+Shift+F
顯示相關(guān)
- 全屏：F11
- zoomIn/zoomOut：Ctrl + =/Ctrl + -
- 側(cè)邊欄顯/隱：Ctrl+B
- 預覽markdown Ctrl+Shift+V
其他
- 自動保存：File -> AutoSave ，或者Ctrl+Shift+P，輸入 auto
更多快捷鍵 傳送門：http://www.vscode.org/html/6.html
大家自行查找。_
