工欲善其事必先利其器绞铃，以下是本人為前端開發(fā)收集的vscode插件碴萧，有需要的話趕緊mark起來吧~
一侥啤、代碼片段類插件
英文叫做 Snippets，就是把常見的代碼模式抽出來熙揍，通過 2~3 個鍵就能展開 N 行代碼职祷。
VS Code JavaScript(ES6) snippets
當(dāng)前最流行的，已有超過 120 萬的下載量。這個插件為 JavaScript有梆、TypeScript是尖、HTML、React 和 Vue 提供了 ES6 的語法支持泥耀；
React-Redux ES6 Snippets
jQuery Code Snippets
二饺汹、自動補全類插件
Path Intellisense
自動路勁補全
Visual Studio IntelliCode
從 GitHub 上高星的開源項目經(jīng)過大量的機器學(xué)習(xí)訓(xùn)練，給開發(fā)者提供最合適的 IntelliSense 上下文建議功能痰催，除此之外兜辞，還有代碼格式化和規(guī)則推測等功能。
Npm Intellisense
用于在import語句中自動填充npm模塊
IntelliSense for CSS class names
智能提示 css 的 class 名夸溶，目前也沒有用
Vetur
Vue 的語法高亮弦疮、智能感知、Emmet 等蜘醋；
Surround
在你的代碼塊中增加外包裹模板
htmltagwrap
可以在選中HTML標簽中外面套一層標簽
使用方法：選中要包裹的代碼胁塞，快捷鍵Alt+w，默認外包裹標簽為p压语，可以在設(shè)置里搜索htmltagwrap將外包裹標簽改為div
Image Preview
鼠標懸浮在鏈接或者裝訂線(gutter)左邊可以預(yù)覽到圖片
HTML CSS Support
讓 html 標簽上寫class 智能提示當(dāng)前項目所支持的樣式啸罢。目前沒有用，可能是因為當(dāng)前作者的開發(fā)模式是html和css分開文件開發(fā)的胎食。
三扰才、功能增強插件
Debugger for Chrome
讓 vscode 映射 chrome 的 debug 功能，靜態(tài)頁面都可以用 vscode 來打斷點調(diào)試厕怜，需要另外配置衩匣，有點麻煩；
Project Manager
在多個項目之前快速切換的工具
工程項目過多時粥航，shift+cmd+p(shift+ctrl+p) 然后輸入project琅捏，第一次選擇edit Project編輯自己的工程項目，之后就可以直接選擇open打開你的項目
jumpy
通過快捷鍵快速跳轉(zhuǎn)至某一個位置递雀，對windows來說沒什么用
language-stylus
為Stylus文件添加語法突出顯示柄延，stylus是 CSS 的預(yù)處理框架
code spell checker
檢查你的英文單詞拼寫是否有誤，如果有庫里不存在的單詞則會下下波浪線
Settings Sync
Visual Studio代碼設(shè)置同步缀程，需要github賬號輔助的
JS Refactor
自動重構(gòu)工具搜吧，目前沒發(fā)現(xiàn)沒怎么用
turbo console log
自動編寫有意義的日志消息
以下是作者本人的快捷鍵設(shè)置
turboConsoleLog.displayLogMessage //control+option+L
change case
雖然 VSCode 內(nèi)置了開箱即用的文本轉(zhuǎn)換選項，但其只能進行文本大小寫的轉(zhuǎn)換杨凑。而此插件則添加了用于修改文本的更多命名格式滤奈，包括駝峰命名、下劃線分隔命名撩满，snake_case 命名以及 CONST_CAS 命名等蜒程。
在快捷鍵配置中配置
extension.changeCase.camel //快捷鍵設(shè)置為ctrl+alt+u /commond+option+u將下劃線轉(zhuǎn)駝峰
extension.changeCase.snake //快捷鍵設(shè)置為alt+u /control+option+u 將駝峰轉(zhuǎn)為下劃線
四绅你、markdown相關(guān)插件
Markdown All in One
讓vscode支持markdown .md文件
Markdown Preview Enhanced（未用）
實時預(yù)覽markdown，markdown使用者必備
markdownlint
markdown語法糾錯
五搞糕、Git相關(guān)插件
GitLens
豐富的 git 日志插件，非常強大曼追，具體看官方介紹或者https://segmentfault.com/a/1190000015360390
Git blame
blame是追溯的意思窍仰，查看當(dāng)前文件歷史上誰修改過
編輯器左下角能看到是最近一次的編輯信息，點擊右下角彈窗可直接打開網(wǎng)頁gitlab礼殊，查看提交記錄
.Git History
以圖表的形式查看以及根據(jù)條件搜索git日志
在當(dāng)前文件右鍵點擊Git:viewFileHistory驹吮，就能查看當(dāng)前文件的所有提交信息，并且支持篩選晶伦，搜索碟狞。
gi
gi是gitignore縮寫，它可以在Visual Studio Code內(nèi)部生成.gitignore文件的擴展婚陪。gi使用gitignore.io API來更新操作系統(tǒng)族沃，IDE和編程語言列表。
六泌参、代碼檢測相關(guān)插件
ESlint
ESlint 接管原生 js 提示脆淹，可以自定制提示規(guī)則；
TSLint
Regex Previewer
這是一個用于實時測試正則表達式的實用工具沽一。它可以將正則表達式模式應(yīng)用在任何打開的文件上盖溺，并高亮所有的匹配項。
在并排文檔中顯示當(dāng)前正則表達式的匹配項
七铣缠、美化編輯器類
Bracket Pair Colorizer
讓括號擁有獨立的顏色烘嘱，易于區(qū)分』韧埽可以配合任意主題使用
使用結(jié)果：
vscode-icon
讓 vscode 資源樹目錄加上圖標
color highlight
Output Colorizer
輸出提示的文字顏色有一些變化蝇庭，方便獲取關(guān)鍵信息
Guides
指導(dǎo)線，當(dāng)前所在的級別縮進線會變紅捡硅，當(dāng)前在哪一級一目了然遗契。
Log File Highlighter
日志文件(.log后綴的文件)高亮
八、其他
Laravel goto view
跳轉(zhuǎn)到相應(yīng)的文件路徑
open in browser
當(dāng)前的 html 文件用瀏覽器打開病曾，快捷鍵alt+b牍蜂，或者右鍵點擊html文件，選擇open in default Browsers
sass
TypeScript Hero
Remote
遠程開發(fā)用的
TODO相關(guān)
Todo Tree
TODO Highlight
能夠在你的代碼中標記出所有的 TODO 注釋泰涂，以便更容易追蹤任何未完成的業(yè)務(wù)
提示類
Import Cost
在編輯器中顯示引入包的大小
filesize
在底部狀態(tài)欄顯示當(dāng)前文件大小鲫竞，點擊后還可以看到詳細創(chuàng)建、修改時間
Quokka.js
實時觀看 javascript 的變量的變化
先shift+cmd+p （ctrl+shift+p）輸入 quokka 選擇 new javascript 就行了
CSS peek
使用此插件逼蒙，你可以追蹤至樣式表中 CSS 類和 ids 定義的地方从绘。當(dāng)你在 HTML 文件中右鍵單擊選擇器時，選擇“ Go to Definition 和 Peek definition ”選項，它便會給你發(fā)送樣式設(shè)置的 CSS 代碼僵井。
注釋類
1.Better Comments
使注釋有人性化的高亮顯示
使用方法：
/**
* 我的方法
* *重要的信息會被高亮顯示
* !及其反對的代碼,不要使用
* TODO 重構(gòu)此方法
* @param 該方法的參數(shù)
*/
Document This
快速注釋
fileheader
頂部注釋模板陕截，可定義作者、時間等信息批什，并會自動更新最后修改時間
ctrl + alt + i你可以在頭部插入注釋农曲，ctrl + s保存文件后，自動更新時間和作者驻债。
圖片相關(guān)
SVG Viewer(目前還沒用)
無需離開編輯器乳规，便可以打開 SVG 文件并查看它們
