一亮隙、代碼片段類插件
英文叫做Snippets剥懒，就是把常見(jiàn)的代碼模式抽出來(lái)壁榕，通過(guò) 2~3 個(gè)鍵就能展開(kāi) N 行代碼。
VS Code JavaScript(ES6) snippets
當(dāng)前最流行的，已有超過(guò) 120 萬(wàn)的下載量耙厚。這個(gè)插件為 JavaScript、TypeScript岔霸、HTML薛躬、React 和 Vue 提供了 ES6 的語(yǔ)法支持；
React-Redux ES6 Snippets
jQuery Code Snippets
二呆细、自動(dòng)補(bǔ)全類插件
Path Intellisense
自動(dòng)路勁補(bǔ)全
Visual Studio IntelliCode
從? GitHub 上高星的開(kāi)源項(xiàng)目經(jīng)過(guò)大量的機(jī)器學(xué)習(xí)訓(xùn)練泛豪，給開(kāi)發(fā)者提供最合適的 IntelliSense 上下文建議功能，除此之外，還有代碼格式化和規(guī)則推測(cè)等功能诡曙。
Npm Intellisense
用于在import語(yǔ)句中自動(dòng)填充npm模塊
IntelliSense for CSS class names
智能提示 css 的 class 名臀叙，目前也沒(méi)有用
Vetur
Vue 的語(yǔ)法高亮、智能感知价卤、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)簽上寫(xiě)class 智能提示當(dāng)前項(xiàng)目所支持的樣式。目前沒(méi)有用胸私，可能是因?yàn)楫?dāng)前作者的開(kāi)發(fā)模式是html和css分開(kāi)文件開(kāi)發(fā)的厌处。
三、功能增強(qiáng)插件
Debugger for Chrome
讓 vscode 映射 chrome 的 debug 功能岁疼，靜態(tài)頁(yè)面都可以用 vscode 來(lái)打斷點(diǎn)調(diào)試阔涉，需要另外配置慷暂，有點(diǎn)麻煩疼进；
Project Manager
在多個(gè)項(xiàng)目之前快速切換的工具
工程項(xiàng)目過(guò)多時(shí)瓣俯，shift+cmd+p(shift+ctrl+p) 然后輸入project凤优，第一次選擇edit Project編輯自己的工程項(xiàng)目，之后就可以直接選擇open打開(kāi)你的項(xiàng)目
jumpy
通過(guò)快捷鍵快速跳轉(zhuǎn)至某一個(gè)位置遵岩，對(duì)windows來(lái)說(shuō)沒(méi)什么用
language-stylus
為Stylus文件添加語(yǔ)法突出顯示支竹，stylus是 CSS 的預(yù)處理框架
code spell checker
檢查你的英文單詞拼寫(xiě)是否有誤牧挣，如果有庫(kù)里不存在的單詞則會(huì)下下波浪線
Settings Sync
Visual Studio代碼設(shè)置同步字逗，需要github賬號(hào)輔助的
JS Refactor
自動(dòng)重構(gòu)工具京郑，目前沒(méi)發(fā)現(xiàn)沒(méi)怎么用
turbo console log
自動(dòng)編寫(xiě)有意義的日志消息
以下是作者本人的快捷鍵設(shè)置
turboConsoleLog.displayLogMessage//control+option+L
change case
雖然 VSCode 內(nèi)置了開(kāi)箱即用的文本轉(zhuǎn)換選項(xiàng)，但其只能進(jìn)行文本大小寫(xiě)的轉(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語(yǔ)法糾錯(cuò)
五、Git相關(guān)插件
GitLens
豐富的 git 日志插件资铡，非常強(qiáng)大电禀，具體看官方介紹或者https://segmentfault.com/a/1190000015360390
Git blame
blame是追溯的意思，查看當(dāng)前文件歷史上誰(shuí)修改過(guò)
編輯器左下角能看到是最近一次的編輯信息笤休，點(diǎn)擊右下角彈窗可直接打開(kāi)網(wǎng)頁(yè)gitlab尖飞，查看提交記錄
.Git History
以圖表的形式查看以及根據(jù)條件搜索git日志
在當(dāng)前文件右鍵點(diǎn)擊Git:viewFileHistory，就能查看當(dāng)前文件的所有提交信息，并且支持篩選政基，搜索贞铣。
gi
gi是gitignore縮寫(xiě)，它可以在Visual Studio Code內(nèi)部生成.gitignore文件的擴(kuò)展沮明。gi使用gitignore.ioAPI來(lái)更新操作系統(tǒng)辕坝，IDE和編程語(yǔ)言列表。
六荐健、代碼檢測(cè)相關(guān)插件
ESlint
ESlint 接管原生 js 提示酱畅，可以自定制提示規(guī)則；
TSLint
Regex Previewer
這是一個(gè)用于實(shí)時(shí)測(cè)試正則表達(dá)式的實(shí)用工具江场。它可以將正則表達(dá)式模式應(yīng)用在任何打開(kāi)的文件上纺酸，并高亮所有的匹配項(xiàng)。
在并排文檔中顯示當(dāng)前正則表達(dá)式的匹配項(xiàng)
七址否、美化編輯器類
Bracket Pair Colorizer
讓括號(hào)擁有獨(dú)立的顏色餐蔬，易于區(qū)分≡谡牛可以配合任意主題使用
使用結(jié)果：
vscode-icon
讓 vscode 資源樹(shù)目錄加上圖標(biāo)
color highlight
Output Colorizer
輸出提示的文字顏色有一些變化用含，方便獲取關(guān)鍵信息
Guides
指導(dǎo)線，當(dāng)前所在的級(jí)別縮進(jìn)線會(huì)變紅帮匾，當(dāng)前在哪一級(jí)一目了然啄骇。
Log File Highlighter
日志文件(.log后綴的文件)高亮
八、其他
Laravel goto view
跳轉(zhuǎn)到相應(yīng)的文件路徑
open in browser
當(dāng)前的 html 文件用瀏覽器打開(kāi)瘟斜，快捷鍵alt+b缸夹，或者右鍵點(diǎn)擊html文件，選擇open in default Browsers
sass
TypeScript Hero
Remote
遠(yuǎn)程開(kāi)發(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ì)被高亮顯示
? ? * !及其反對(duì)的代碼,不要使用
? ? * 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
無(wú)需離開(kāi)編輯器末誓，便可以打開(kāi) SVG 文件并查看它們
原著：http://www.reibang.com/p/3eebde5748a6
