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

Visual Studio Code 是由微軟開發的一款免費、跨平臺的文本編輯器。因爲其卓越的性能和豐富的功能，它很快就受到了你們的喜好。

就像大多數 IDE 同樣，VSCode 也有一個擴展和主題市場，包含了數以千計質量不一樣的插件。下面我列出一些VSCode前端必備插件，並配有圖文介紹，快來看看你是否都會使用呢？

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.Language and Framework Packs

VSCode 默認支持大量的主流編程語言，但若是你所使用的編程語言不包括在內，也能夠經過下載擴展包來自動添加。同時，你還能夠添加一些像 React Native 與 Vue 的相關 Web 開發插件包。

15.Themes

固然，在衆多的實用插件中，豈能少了漂亮的主題呢？你天天都會與你的 VSCode 編輯器進行「親密的接觸」，爲什麼不把它打扮得更漂亮些呢？這裏有一些幫助你更改側邊欄的配色方案，以及圖標的相關主題，與你們分享：

16.vscode-icons

各類漂亮的圖標

17.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上，方便調試

27.Auto Close Tag

自動閉合HTML/XML標籤

28.Auto Rename Tag

自動完成另外一側標籤的同步修改

29.Markdown Preview Enhanced

實時預覽markdown，markdown使用者必備

30.markdownlint

markdown語法糾錯

31.KoroFileHeader（頭部註釋及函數註釋插件）

在vscode左下角點擊設置按鈕，選擇「設置」，而後輸入「fileheader」,

隨便點擊哪一個"在setting.json"中編輯，輸入如下設置後保存，而後重啓vscode更新設置：

// 插件KoroFileHeader
  // 文件頭部註釋-快捷鍵crtl+alt+i（window）,ctrl+cmd+t (mac)
  "fileheader.customMade": {
    "Descripttion": "",
    "version": "",
    "Author": "voanit",
    "Date": "Do not edit",
    "LastEditors": "voanit",
    "LastEditTime": "Do not Edit"
  },
  //函數註釋-快捷鍵ctrl+alt+t (window), ctrl+alt+t(mac)
  "fileheader.cursorMode": {
    "name": "",
    "test": "test font",
    "msg": "",
    "param": "",
    "return": ""
  }
複製代碼

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": "/Users/tianer/WebstormProjects/sales-crm-web",//添加你的本地項目
		"paths": [],
		"group": ""
	},
	{
		"name": "vuetest",
		"rootPath": "/Users/tianer/WebstormProjects/sales-crm-web",//添加你的本地項目
		"paths": [],
		"group": ""
	}
]
複製代碼

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

paths裏面可放子項目

36.Live Server

本地開發搭建臨時服務

打開命令面板，輸入settings，點擊首選項

搜索live sever配置項，將左側須要修改的配置項複製到右側用戶設置並修改

設置完畢後，重啓vscode，並選擇須要瀏覽的文件，右鍵開啓服務，就能夠在瀏覽器中瀏覽網頁啦

結尾彩蛋

歡迎關注前端之階公衆號，獲取更多前端知識，加入前端大羣，與知名互聯網大佬作朋友，開啓共同窗習新篇章！