好久沒有寫技術相關的內(nèi)容了，太慚愧了，想想去年的時候，有一段時間一直在瘋狂輸出，也有了一點點成效，不過很快就被自己給放棄了。

主要是最近換了工作，在新公司的所有軟件都得重新安裝一遍，然后在使用 VSCode 的時候，需要安裝很多的插件，這樣才能在 coding 的時候感受到美滋滋的效率。過程中發(fā)現(xiàn)除了一些基本的插件之外，其他使用起來很舒服的插件都記不清了，所以就整理一篇平時使用 VSCode 的一些插件和配置，這樣再換了一個環(huán)境一臺電腦之后，可以很快的按照平時的習慣 coding 了。

Chinese (Simplified) Language Pack for Visual Studio Code

這個插件主要的作用是用來設置?VSCode 的中文語言的，對于英文不太好的童鞋來說，這應該是在使用 VSCode 時安裝的第一個插件。

Auto Close Tag

這個插件的作用主要有助于在寫 HTML 文件的時候，在寫標簽的時候，插件會自動幫我們帶上結(jié)束的標簽。

HTML Snippets

這個插件的主要作用是在編寫 HTML 文件的時候，會提示我們需要寫的標簽，這樣就不需要我們一個一個代碼的敲擊出來。

Auto Rename Tag

這個插件的作用是在編寫 HTML 的時候，自動修改重命名配對的標簽。

JavaScript (ES6) code snippets

這個插件的主要作用是在編寫 js 的時候，會自動給出需要的提示。

Color Highlight

這個插件主要的作用是為了在編寫 CSS 顏色屬性的時候，讓顏色高亮顯示。

顏色高亮顯示

vscode-icons

這個插件的作用是給編輯器的目錄欄里的文件根據(jù)類型的不同，帶上不同的圖標來區(qū)分。(想起來公司電腦上的 VSCode 沒有安裝這個插件)

不同類型文件的icon

Document This

這個插件主要是給函數(shù)添加注釋格式用的，寫注釋的時候非常方便。

Path Intellisense

這個插件在引入資源文件的時候，會自動提示出當前文件下的所有資源文件，相當?shù)姆奖恪?/p>

Vetur

這個插件主要是讓 VSCode 支持 vue 單文件的語法高亮顯示。

Vue 2 Snippets

這個插件也是和 vue 相關的，支持 vue 的語法提示。

GitLens

這個插件是和 git 相關的。如果項目使用的是 git 作為版本管理工具，會在每個文件中能看到每一行代碼的提交記錄，會顯示出提交時間，修改者等內(nèi)容，非常的方便。

Bracket Pair Colorizer

這個插件的作用是用來區(qū)分代碼塊的，插件會自動根據(jù)不同層級的代碼塊添加上不同的顏色括號，這樣即使一個函數(shù)里嵌套的代碼塊層級很深，也能很快的區(qū)分出不同的代碼塊。

區(qū)分不同層級的代碼塊

One Dark Pro

一個編輯器顏色主題插件。

Polacode

一個生成代碼截圖圖片的插件，比起微信的截圖效果美觀多了。

代碼截圖

carbon

也是一個生成代碼截圖圖片的插件，不過這個插件會將選中的代碼復制到一個在線的工具上，然后再使用這個工具去生成圖片。效果如下：

高逼格

用戶代碼片段

說完了常用的插件之外，再來談談一個比較實用但平時用的少的功能，就是用戶代碼片段。之前一直不明白這個功能的作用，直到最近，公司項目因為要給每個項目文件都加上版權注釋，而其他同事用的都是 webstrom IDE，功能強而全，他們只需要通過 IDE 提供的配置，把注釋內(nèi)容設置好后，后面再新建文件就會自動在文件頭部添加上版權注釋。

作為一個習慣了輕量級編輯器的用戶來說，立刻讓我更換工具是不可能的，抱著不服輸?shù)膽B(tài)度，就去網(wǎng)上查資料，VSCode 關于這方面的功能，發(fā)現(xiàn)其實是可以同時配置用戶代碼片段自定義自己想要的提示內(nèi)容的，簡直是太棒了。

用戶代碼片段功能提供了全局配置和針對不同語言不同文件的配置。比如針對 javascript 語言的配置，可以在用戶代碼片段中找到 javascript.json 配置文件，里面有提供了配置的 DEMO 和說明，在使用的時候只需要配置好需要的內(nèi)容就可以了。

自定義配置

常用的使用插件和配置就這些了，后面發(fā)現(xiàn)有好用的功能再添加上去。