VSCode前端必備插件，有可能你裝了卻不知道如何使用？

• 2019 年 11 月 5 日
• 筆記

在前端開發中，有一個非常好用的工具，Visual Studio Code，簡稱VS code。

　都不用我安利VS code，大家就會乖乖的去用，無數個大言不慚的攻城獅，都被VS code比德芙還絲滑的強大功能所折服。

　我是來給大家安利插件的，想做個比較全面的插件集合給大家。網上的我也看過一些，但是都比較零散，時間也久了一些，我結合最近的情況，總結一下

　造福大家，才是我想做的。手動比心❤。

VS Code 安裝和漢化

下載地址：VS Code官網鏈接 選擇合適的版本，安裝即可 安裝完成後如圖

VS Code初始安裝完成

如果需要漢化，ctrl + shift + x，打開插件商店，輸入 chinese，然後選擇第一個，點擊 『install』

中文插件

安裝完成後重啟軟件，顯示如下，則漢化完成

漢化完成

插件

1.Open-In-Browser

由於 VSCode 沒有提供直接在瀏覽器中打開文件的內置界面，所以此插件在快捷菜單中添加了在默認瀏覽器查看文件選項，以及在客戶端（Firefox，Chrome，IE）中打開命令面板選項。

2.Quokka

Quokka 是一個調試工具插件，能夠根據你正在編寫的代碼提供實時反饋。它易於配置，並能夠預覽變量的函數和計算值結果。另外，在使用 JSX 或 TypeScript 項目中，它能夠開箱即用。

3.Faker

使用流行的 JavaScript 庫 – Faker，能夠幫你快速的插入用例數據。Faker 可以隨機生成姓名、地址、圖像、電話號碼，或者經典的亂數假文段落，並且每個類別還包含了各種子類別，你可以根據自身的需求來使用這些數據。

4.CSS Peek

使用此插件，你可以追蹤至樣式表中 CSS 類和 ids 定義的地方。當你在 HTML 文件中右鍵單擊選擇器時，選擇「 Go to Definition 和 Peek definition 」選項，它便會給你發送樣式設置的 CSS 代碼。

5.HTML Boilerplate

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

6.Prettier

Prettier 是目前 Web 開發中最受歡迎的代碼格式化程序。安裝了這個插件，它就能夠自動應用 Prettier，並將整個 JS 和 CSS 文檔快速格式化為統一的代碼樣式。如果你還想使用 ESLint，那麼還有個 Prettier – Eslint 插件，你可不要錯過咯！

7.Color Info

這個便捷的插件，將為你提供你在 CSS 中使用顏色的相關信息。你只需在顏色上懸停光標，就可以預覽色塊中色彩模型的（HEX、 RGB、HSL 和 CMYK）相關信息了。

8.SVG Viewer

此插件在 Visual Studio 代碼中添加了許多實用的 SVG 程序，你無需離開編輯器，便可以打開 SVG 文件並查看它們。同時，它還包含了用於轉換為 PNG 格式和生成數據 URI 模式的選項。

9.TODO Highlight

這個插件能夠在你的代碼中標記出所有的 TODO 注釋，以便更容易追蹤任何未完成的業務。在默認的情況下，它會查找 TODO 和 FIXME 關鍵字。當然，你也可以添加自定義表達式。

10.Icon Fonts

這是一個能夠在項目中添加圖標字體的插件。該插件支持超過 20 個熱門的圖標集，包括了 Font Awesome、Ionicons、Glyphicons 和 Material Design Icons。

11.Minify

這是一款用於壓縮合併 JavaScript 和 CSS 文件的應用程序。它提供了大量自定義的設置，以及自動壓縮保存並導出為.min文件的選項。它能夠分別通過 uglify-js、clean-css 和 html-minifier，與 JavaScript、CSS 和 HTML 協同工作。

12.Change Case

雖然 VSCode 內置了開箱即用的文本轉換選項，但其只能進行文本大小寫的轉換。而此插件則添加了用於修改文本的更多命名格式，包括駝峰命名、下劃線分隔命名，snake_case 命名以及 CONST_CAS 命名等。

13.Regex Previewer

這是一個用於實時測試正則表達式的實用工具。它可以將正則表達式模式應用在任何打開的文件上，並高亮所有的匹配項。

14.Npm Intellisense

用於在import語句中自動填充npm模塊

15.htmltagwrap

可以在選中HTML標籤中外面套一層標籤 使用方法：選中要包裹的代碼，快捷鍵Alt+w，默認外包裹標籤為p，可以在設置里搜索htmltagwrap將外包裹標籤改為div

16.vscode-icons 各種漂亮的圖標

vscode-icons

17.filesize

左下角顯示文件大小的插件

filesize顯示效果

18.GitLens 能顯示每一行代碼的作者以及提交時間。

19.Git history Git 歷史

20.Vetur Vue多功能集成插件，包括：語法高亮，智能提示，emmet，錯誤提示，格式化，自動補全，debugger。vscode官方欽定Vue插件，Vue開發者必備。

21.React/Redux/react-router Snippets 　　React/Redux/react-router語法智能提示

22.Path Intellisense 　　自動提示文件路徑，支持各種快速引入文件

23.JavaScript(ES6) code snippets 　　ES6語法智能提示，以及快速輸入，不僅僅支持.js，還支持.ts，.jsx，.tsx，.html，.vue，省去了配置其支持各種包含js代碼文件的時間

24.HTML Snippets 　　智能提示HTML標籤，以及標籤含義

25.HTML CSS Support 　　智能提示CSS類名以及id

26.Debugger for Chrome 　　映射vscode上的斷點到chrome上，方便調試

image

27.Auto Close Tag 　　自動閉合HTML/XML標籤

image

28.Auto Rename Tag 　　自動完成另一側標籤的同步修改

image

29.Markdown Preview Enhanced 　　實時預覽markdown，markdown使用者必備

image

30.markdownlint 　　markdown語法糾錯

31.fileheader 　　頂部注釋模板，可定義作者、時間等信息，並會自動更新最後修改時間，快捷鍵ctrl+alt+i在文件開頭自動輸入作者信息和修改信息等內容

32.Vue VSCode Snippets 　　VUE代碼自動補全插件 33.VueHelper 　　snippet代碼片段

34.Document This(js 和typescript的注釋模板)

ctrl+alt+D，兩次（注意：新版的vscode已經原生支持,在function上輸入/** tab）

35.Project Manager 項目管理工具 這兩種方式對於需要經常切換項目時，比較耗時 為解決這個問題，vscode提供了Project Manager插件管理，開發時常用的項目

（1）command+ shift + p打開配置文件， 輸入 Project Manager: Edit Projects

[      {          "name": "nuxtest",          "rootPath": "e:\nuxtest",          "paths": [],          "group": ""      },      {          "name": "vuetest",          "rootPath": "e:\vuetest",          "paths": [],          "group": ""      }  ]  

預覽 （2）在左側圖標欄下就會有個小文件夾的選項，點擊進去就可以切換項目了。

36.jumpy

通過快捷鍵快速跳轉至某一個位置，對windows來說沒什麼用

37.Image Preview

鼠標懸浮在鏈接或者裝訂線(gutter)左邊可以預覽到圖片