一、代碼片段類插件
英文叫做Snippets，就是把常見的代碼模式抽出來，通過 2~3 個(gè)鍵就能展開 N 行代碼。
VS Code JavaScript(ES6) snippets
當(dāng)前最流行的，已有超過 120 萬的下載量。這個(gè)插件為 JavaScript、TypeScript、HTML、React 和 Vue 提供了 ES6 的語法支持；
React-Redux ES6 Snippets
jQuery Code Snippets
二、自動(dòng)補(bǔ)全類插件
Path Intellisense
自動(dòng)路勁補(bǔ)全
Visual Studio IntelliCode
從? GitHub 上高星的開源項(xiàng)目經(jīng)過大量的機(jī)器學(xué)習(xí)訓(xùn)練，給開發(fā)者提供最合適的 IntelliSense 上下文建議功能，除此之外，還有代碼格式化和規(guī)則推測等功能。
Npm Intellisense
用于在import語句中自動(dòng)填充npm模塊
IntelliSense for CSS class names
智能提示 css 的 class 名，目前也沒有用
Vetur
Vue 的語法高亮、智能感知、Emmet 等；
Surround
在你的代碼塊中增加外包裹模板
htmltagwrap
可以在選中HTML標(biāo)簽中外面套一層標(biāo)簽
使用方法：選中要包裹的代碼，快捷鍵Alt+w，默認(rèn)外包裹標(biāo)簽為p，可以在設(shè)置里搜索htmltagwrap將外包裹標(biāo)簽改為div
Image Preview
鼠標(biāo)懸浮在鏈接或者裝訂線(gutter)左邊可以預(yù)覽到圖片
HTML CSS Support
讓 html 標(biāo)簽上寫class 智能提示當(dāng)前項(xiàng)目所支持的樣式。目前沒有用，可能是因?yàn)楫?dāng)前作者的開發(fā)模式是html和css分開文件開發(fā)的。
三、功能增強(qiáng)插件
Debugger for Chrome
讓 vscode 映射 chrome 的 debug 功能，靜態(tài)頁面都可以用 vscode 來打斷點(diǎn)調(diào)試，需要另外配置，有點(diǎn)麻煩；
Project Manager
在多個(gè)項(xiàng)目之前快速切換的工具
工程項(xiàng)目過多時(shí)，shift+cmd+p(shift+ctrl+p) 然后輸入project，第一次選擇edit Project編輯自己的工程項(xiàng)目，之后就可以直接選擇open打開你的項(xiàng)目
jumpy
通過快捷鍵快速跳轉(zhuǎn)至某一個(gè)位置，對windows來說沒什么用
language-stylus
為Stylus文件添加語法突出顯示，stylus是 CSS 的預(yù)處理框架
code spell checker
檢查你的英文單詞拼寫是否有誤，如果有庫里不存在的單詞則會(huì)下下波浪線
Settings Sync
Visual Studio代碼設(shè)置同步，需要github賬號輔助的
JS Refactor
自動(dòng)重構(gòu)工具，目前沒發(fā)現(xiàn)沒怎么用
turbo console log
自動(dòng)編寫有意義的日志消息
以下是作者本人的快捷鍵設(shè)置
turboConsoleLog.displayLogMessage//control+option+L
change case
雖然 VSCode 內(nèi)置了開箱即用的文本轉(zhuǎn)換選項(xiàng)，但其只能進(jìn)行文本大小寫的轉(zhuǎn)換。而此插件則添加了用于修改文本的更多命名格式，包括駝峰命名、下劃線分隔命名，snake_case 命名以及 CONST_CAS 命名等。
在快捷鍵配置中配置
extension.changeCase.camel//快捷鍵設(shè)置為ctrl+alt+u /commond+option+u將下劃線轉(zhuǎn)駝峰e(cuò)xtension.changeCase.snake//快捷鍵設(shè)置為alt+u /control+option+u 將駝峰轉(zhuǎn)為下劃線
四、markdown相關(guān)插件
Markdown All in One
讓vscode支持markdown? .md文件
Markdown Preview Enhanced（未用）
實(shí)時(shí)預(yù)覽markdown，markdown使用者必備
markdownlint
markdown語法糾錯(cuò)
五、Git相關(guān)插件
GitLens
豐富的 git 日志插件，非常強(qiáng)大，具體看官方介紹或者https://segmentfault.com/a/1190000015360390
Git blame
blame是追溯的意思，查看當(dāng)前文件歷史上誰修改過
編輯器左下角能看到是最近一次的編輯信息，點(diǎn)擊右下角彈窗可直接打開網(wǎng)頁gitlab，查看提交記錄
.Git History
以圖表的形式查看以及根據(jù)條件搜索git日志
在當(dāng)前文件右鍵點(diǎn)擊Git:viewFileHistory，就能查看當(dāng)前文件的所有提交信息，并且支持篩選，搜索。
gi
gi是gitignore縮寫，它可以在Visual Studio Code內(nèi)部生成.gitignore文件的擴(kuò)展。gi使用gitignore.ioAPI來更新操作系統(tǒng)，IDE和編程語言列表。
六、代碼檢測相關(guān)插件
ESlint
ESlint 接管原生 js 提示，可以自定制提示規(guī)則；
TSLint
Regex Previewer
這是一個(gè)用于實(shí)時(shí)測試正則表達(dá)式的實(shí)用工具。它可以將正則表達(dá)式模式應(yīng)用在任何打開的文件上，并高亮所有的匹配項(xiàng)。
在并排文檔中顯示當(dāng)前正則表達(dá)式的匹配項(xiàng)
七、美化編輯器類
Bracket Pair Colorizer
讓括號擁有獨(dú)立的顏色，易于區(qū)分?？梢耘浜先我庵黝}使用
使用結(jié)果：
vscode-icon
讓 vscode 資源樹目錄加上圖標(biāo)
color highlight
Output Colorizer
輸出提示的文字顏色有一些變化，方便獲取關(guān)鍵信息
Guides
指導(dǎo)線，當(dāng)前所在的級別縮進(jìn)線會(huì)變紅，當(dāng)前在哪一級一目了然。
Log File Highlighter
日志文件(.log后綴的文件)高亮
八、其他
Laravel goto view
跳轉(zhuǎn)到相應(yīng)的文件路徑
open in browser
當(dāng)前的 html 文件用瀏覽器打開，快捷鍵alt+b，或者右鍵點(diǎn)擊html文件，選擇open in default Browsers
sass
TypeScript Hero
Remote
遠(yuǎn)程開發(fā)用的
TODO相關(guān)
Todo Tree
TODO Highlight
能夠在你的代碼中標(biāo)記出所有的 TODO 注釋，以便更容易追蹤任何未完成的業(yè)務(wù)
提示類
Import Cost
在編輯器中顯示引入包的大小
filesize
在底部狀態(tài)欄顯示當(dāng)前文件大小，點(diǎn)擊后還可以看到詳細(xì)創(chuàng)建、修改時(shí)間
Quokka.js
實(shí)時(shí)觀看 javascript 的變量的變化
先shift+cmd+p （ctrl+shift+p）輸入 quokka 選擇 new javascript 就行了
CSS peek
使用此插件，你可以追蹤至樣式表中 CSS 類和 ids 定義的地方。當(dāng)你在 HTML 文件中右鍵單擊選擇器時(shí)，選擇“ Go to Definition 和 Peek definition ”選項(xiàng)，它便會(huì)給你發(fā)送樣式設(shè)置的 CSS 代碼。
注釋類
1.Better Comments
使注釋有人性化的高亮顯示
使用方法：
/**
? ? * 我的方法
? ? * *重要的信息會(huì)被高亮顯示
? ? * !及其反對的代碼,不要使用
? ? * TODO 重構(gòu)此方法
? ? * @param 該方法的參數(shù)
? ? */
Document This
快速注釋
fileheader
頂部注釋模板，可定義作者、時(shí)間等信息，并會(huì)自動(dòng)更新最后修改時(shí)間
ctrl + alt + i你可以在頭部插入注釋，ctrl + s保存文件后，自動(dòng)更新時(shí)間和作者。
圖片相關(guān)
SVG Viewer
無需離開編輯器，便可以打開 SVG 文件并查看它們
原著：http://www.itdecent.cn/p/3eebde5748a6
