下載安裝VSCode

下載安裝：https://code.visualstudio.com/Download

通用外掛

Auto Close Tag ：匹配標籤，關閉對應的標籤

Auto Rename Tag ：自動重新命名

beautify : 良好的拓展性，可以格式化JSON|JS|HTML|CSS|SCSS,比內建格式化好用

View In Browser 或 Open In Browser 執行在瀏覽器中開啟檔案

HTML CSS Support ：這個也是必備外掛之一

Path Autocomplete ：路徑智慧補全

Path Intellisense ： 路徑智慧提示

CSS Peek：使用此外掛，你可以追蹤至樣式表中 CSS 類和 id 定義的地方。當你在 HTML 檔案中右鍵單擊選擇器時，選擇“ Go to Definition 和 Peek definition ”選項，它便會給你傳送樣式設定的 CSS 程式碼。

HTML Boilerplate：通過使用 HTML 模版外掛，你就擺脫了為 HTML 新檔案重新編寫頭部和正文標籤的苦惱。你只需在空檔案中輸入 html，並按 Tab 鍵，即可生成乾淨的文件結構

Color Info：這個便捷的外掛，將為你提供你在 CSS 中使用顏色的相關資訊。你只需在顏色上懸停游標，就可以預覽色塊中色彩模型的（HEX、 RGB、HSL 和 CMYK）相關資訊了

Live Server：模擬伺服器，可以使用http協議開啟頁面

Preview on WebServer：模擬伺服器，可以使用http協議開啟頁面

CSS Peek：使用此外掛，你可以追蹤至樣式表中 CSS 類和 ids 定義的地方。當你在 HTML 檔案中右鍵單擊選擇器時，選擇“ Go to Definition 和 Peek definition ”選項，它便會給你傳送樣式設定的 CSS 程式碼。

HTML Boilerplate：通過使用 HTML 模版外掛，你就擺脫了為 HTML 新檔案重新編寫頭部和正文標籤的苦惱。你只需在空檔案中輸入 html，並按 Tab 鍵，即可生成乾淨的文件結構

Color Info：這個便捷的外掛，將為你提供你在 CSS 中使用顏色的相關資訊。你只需在顏色上懸停游標，就可以預覽色塊中色彩模型的（HEX、 RGB、HSL 和 CMYK）相關資訊了

Live Server：模擬伺服器，可以使用http協議開啟頁面

Preview on WebServer：模擬伺服器，可以使用http協議開啟頁面

relative path：相對路徑的書寫
使用方法：
（1）安裝relative path外掛
（2）在需要書寫相對路徑的檔案中通過快捷鍵ctrl+shift+h,調出檔案搜尋面板
（3）在檔案在檔案搜尋面板中搜索出對應的檔案，將游標放置在需要設定路徑的檔案處，選中所要設定的檔案即可

Path Tools ：路徑轉換外掛
使用方法：
（1）安裝Path Tools
（2）選中工作區中的檔案，右擊複製檔案路徑
（3）將檔案路徑填寫到對應的位置
（4）選中所填寫的檔案路徑，安裝快捷鍵ctrl+shift+p（或快捷鍵F1）調出命令面板
（5）在命令面板中輸入
（.）Relative: 將路徑轉換為相對於當前檔案的相對路徑
（.）Resolve: 將路徑轉換為完整路徑
（.）Windows:將路徑轉化為windows作業系統的完成路徑

Atom JavaScript Snippet：js欄位補全

vue外掛

Vetur：VScode中的VUE工具，高亮、格式化
Vue snippets：Vue的提示外掛
vue 2 snippets：Vue2的提示外掛
Vue VSCode Snippets ：快捷生成頁面的一些程式碼
（1）vue基本骨架 vbase
（2）data vdata
（3）methods vmethod
（4）v-for vfor
React外掛

Redux/react-router Snippets：React的提示外掛
Simple React Snippets：提示 快速生成程式碼塊，
Reactjs code snippets：提示 快速生成程式碼塊
Beautify React JavaScript TypeScirpt 外掛可以格式化JSX
React Redux ES6 Snippets

原文連結：https://blog.csdn.net/weixin_45048913/article/details/120522118