安裝http server插件，安裝完成后按下f1,然后輸入http會看到下面兩個選項，選擇with current file那個能夠創建一個服務器運行當前文件。另外一個會找當前目錄下的index.html,然后打開它。

在這里插入圖片描述

image.png

Visual Studio Code (簡稱 VS Code / VSC) 是一款免費開源的現代化輕量級代碼編輯器，支持幾乎所有主流的開發語言的語法高亮、智能代碼補全、自定義熱鍵、括號匹配、代碼片段、代碼對比 Diff、GIT 等特性，支持插件擴展，并針對網頁開發和云端應用開發做了優化。軟件跨平臺支持 Win、Mac 以及 Linux。

VSC中文網：http://www.vscode.org/

image

vscode 作為一款逐漸火熱的編輯器。它的特點免費、開源、多平臺，以及集成git，代碼調試，插件豐富等有點，被大家逐漸熟知和認可。

這里主要說一下前端常用插件。

Auto Rename Tag

自動重命名配對的HTML / XML標簽

bachground

修改背景，設置編輯器界面的背景圖片。但是好像現在會出錯，具體設置內容在vsc找到插件看詳細信息。

Bootstrap 4 & Font awesome snippets

bootstrap4和font awesome 快速引用和代碼生成。

Color-Highlight

在編輯器中高亮顯示顏色。

Color Picker

代碼的顏色選擇器。

Css Peek

能在源代碼中的字符串中找到對應的css（類和ID）。顯示在那個css文件里，還有在第幾行。

Csscomb

css 、less、sass 的代碼格式化。

Debugger for Chrome

js調試的插件，前端項目在Chrome中運行起來之后，可以直接在VSCode中打斷點、查看輸出、查看控制臺，詳細配置見插件說明。

Document This

為js文件生成文檔的代碼注釋。

ESLint

檢查Javascript編程時的語法錯誤。

Git Easy

增加了vscode中自帶的git操作，安裝后按F1調出控制臺，輸入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 函數提示。

Lorem ipsum

快速填充文本

Npm Intellisense

在import語句中自動完成npm模塊引入的代碼插件。

open in browser

在瀏覽器中打開，安裝后在左側目錄中右鍵點擊會出現 open in browser 選項。

Path Intellisense

文件路徑提示。

Settings Sync

編輯器設置同步，包括插件，配置等。

詳情點擊=》https://marketplace.visualstudio.com/items?itemName=Shan.code-settings-sync

VS Code CSS Comments

css代碼注釋。

vscode-browser-plugin

在編輯器內預覽HTML，

通過開啟端口(3000)監聽當前打開項目的根目錄，在編輯器內預覽網站，省去了頻繁切換瀏覽器、編輯器看頁面效果，修改代碼后自動刷新頁面。

vscode-icons

文件圖標。

Vue 2 Snippets

vue 代碼提示，高亮。

（ps：使用其他框架，直接搜就好，像是react，angular，就會出現相關的代碼提示和語法支持常用插件）

主題插件：

Material-theme；

monokai-light;

Monokai++;

One Dark Theme;

個人審美不同，大家自己體會并選擇。

以上就是我的前端常用插件，有些插件的功能相互交叉重復，自己可以有選擇的安裝使用。

以下內容轉自：https://zhuanlan.zhihu.com/p/22880087

vsc常用快捷鍵：

同時打開多個窗口（查看多個項目）

• 打開一個新窗口： Ctrl+Shift+N
• 關閉窗口： Ctrl+Shift+W

同時打開多個編輯器（查看多個文件）

• 新建文件 Ctrl+N
• 歷史打開文件之間切換 Ctrl+Tab，Alt+Left，Alt+Right
• 切出一個新的編輯器（最多3個）Ctrl+\，也可以按住Ctrl鼠標點擊Explorer里的文件名
• 左中右3個編輯器的快捷鍵Ctrl+1 Ctrl+2 Ctrl+3
• 3個編輯器之間循環切換 Ctrl+`
• 編輯器換位置，Ctrl+k然后按Left或Right

格式調整

• 代碼行縮進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

光標相關

• 移動到行首：Home
• 移動到行尾：End
• 移動到文件結尾：Ctrl+End
• 移動到文件開頭：Ctrl+Home
• 移動到后半個括號 Ctrl+Shift+]
• 選中當前行Ctrl+i（雙擊）
• 選擇從光標到行尾Shift+End
• 選擇從行首到光標處Shift+Home
• 刪除光標右側的所有字Ctrl+Delete
• Shrink/expand selection： Shift+Alt+Left和Shift+Alt+Right
• Multi-Cursor：可以連續選擇多處，然后一起修改，Alt+Click添加cursor或者Ctrl+Alt+Down 或 Ctrl+Alt+Up
• 同時選中所有匹配的Ctrl+Shift+L
• Ctrl+D下一個匹配的也被選中(被我自定義成刪除當前行了，見下邊Ctrl+Shift+K)
• 回退上一個光標操作Ctrl+U

重構代碼

• 跳轉到定義處：F12
• 定義處縮略圖：只看一眼而不跳轉過去Alt+F12
• 列出所有的引用：Shift+F12
• 同時修改本文件中所有匹配的：Ctrl+F12
• 重命名：比如要修改一個方法名，可以選中后按F2，輸入新的名字，回車，會發現所有的文件都修改過了。
• 跳轉到下一個Error或Warning：當有多個錯誤時可以按F8逐個跳轉
• 查看diff 在explorer里選擇文件右鍵 Set file to compare，然后需要對比的文件上右鍵選擇Compare with 'file_name_you_chose'.

查找替換

• 查找 Ctrl+F
• 查找替換 Ctrl+H
• 整個文件夾中查找 Ctrl+Shift+F

顯示相關

• 全屏：F11
• zoomIn/zoomOut：Ctrl + =/Ctrl + -
• 側邊欄顯/隱：Ctrl+B
• 預覽markdown Ctrl+Shift+V

其他

• 自動保存：File -> AutoSave ，或者Ctrl+Shift+P，輸入 auto

更多快捷鍵 傳送門：http://www.vscode.org/html/6.html

大家自行查找。^_