下載安裝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