史上最全,用60+VsCode外掛,打造最強編輯器
本文不做任何編輯器的比較,只是我本人日常使用 vscode
進行開發,並且比較喜歡折騰 vscode
,會到處找這一些好玩的外掛,於是越攢越多,今天給大家推薦一下我收藏的 60
多個 vscode
外掛,據說外掛裝太多,編輯器會變卡,可能是我的電腦配置還頂得住,目前並沒有感覺到卡卡的。
接下來我會將會以 優化外觀 , 功能擴充套件 , 提升編碼效率 , 程式碼格式化 , 其它外掛 幾個分類來進行介紹。
一是把它們 分享 給有需要的小夥伴們,二是通過此文向小夥伴們 徵集 其它好玩的外掛,可以是任何型別的。有想要推薦其它外掛的請評論區補充一下,我看到後會新增到文章中並標註出你的 ID 。
注:本文只涉及外掛的基本使用,也就是讓你知道存在這樣一種外掛,以及大致瞭解這個外掛可以做什麼事,部分外掛的詳細配置過於複雜,有需要的小夥伴請自行衝浪。根據每個人電腦, vscode
配置,以及外掛的不同,部分外掛可能在你電腦上不會生效。文中提到的快捷鍵都是 windows
下的,其他作業系統的快捷鍵請自行了解。
優化外觀
好馬用好鞍,好看的編輯器外觀,可以提升程式設計師的編碼體驗,可以讓開發人員的心情變好,讓寫 bug
更有動力。
Better Comments
一款美化註釋的外掛,可以根據不同種類的註釋,顯示不同的顏色,一目瞭然。
![](http://mdimg.wxwenku.com/getimg/ccdf080c7af7e8a10e9b88444af98393c6498eb52d2ea68fe289a0da5ba9aecdf3a7a44a0d5f4112193a24f3d68a2c30.jpg)
安裝完以後,外掛會預設自帶幾種顏色的註釋,還可以通過 vscode
的配置檔案自定義任何顏色,型別的註釋。具體的配置方法我給你們找好了。
:point_right::point_right: vscode 外掛-better comments-程式碼註釋高亮 [1]
![](http://mdimg.wxwenku.com/getimg/6b990ce30fa9193e296dd37902816f4b8365681ce580233d7a7c289b3696e04642186d39974c59c2a37564f967f2d439.jpg)
Bracket Pair Colorizer / Bracket Pair Colorizer 2
這是一個找物件的外掛,不是幫你們找物件啊,是幫你找到括號的另一半。目前有兩個版本, Bracket Pair Colorizer 2
是增強版,具體我沒有深入研究具體增強了哪些內容。而且它有挺多的設定項,反正安裝完預設的配置已經夠用了,感興趣的同學自行發覺更多有趣玩法吧。
![](http://mdimg.wxwenku.com/getimg/356ed03bdc643f9448b3f6485edc229b643d928c8312a2029de836529c961f6b319c9a61b3db7fa54e5310aee622c670.jpg)
大家可以看到配對的括號是相同的顏色,並且當我選中一個括號以後,會出現一條線幫你找到它對應的另一半括號。
![](http://mdimg.wxwenku.com/getimg/356ed03bdc643f9448b3f6485edc229b941e2b383d702bc335409ec25f8e75e68d41a3a2220ce361b4d61edb23e202c1.jpg)
Highlight Matching Tag
這也是一個找物件的外掛,找的是標籤的物件,看我上一個外掛的演示圖片中,當我點選一下 html
標籤,配對的標籤就會出現下劃線來指示你誰和誰是一對。
![](http://mdimg.wxwenku.com/getimg/356ed03bdc643f9448b3f6485edc229b7013adc9a19052ea977e0a146eee8d05a6f66ef648ebc626650f4f761a805a68.jpg)
Chinese
讓你的 vscode
變成中文,像我這種英語弱雞才會用,大佬們略過。為什麼要放在優化外觀的分類裡,因為我覺得中文比英文好看 ,安裝完重啟就行了。
![](http://mdimg.wxwenku.com/getimg/356ed03bdc643f9448b3f6485edc229b22be99e32ad0aa36765d05504d6dd2dc02aadc913f4931c50e91f8843d8ad4df.jpg)
Color Highlight
![](http://mdimg.wxwenku.com/getimg/356ed03bdc643f9448b3f6485edc229b8c5835c1351ec6e2f6d6db3aaf6963dafe6ba564b42c98449ec1f4eb356a0416.jpg)
看名字就知道了,用於給我們程式碼中的顏色進行高亮展示的外掛。可以看到下圖中我設定的 css
顏色屬性,直觀的展示了出來。
![](http://mdimg.wxwenku.com/getimg/356ed03bdc643f9448b3f6485edc229b2e9a9f8ededc2cb30f93ecced0c5204b91ac05da74564b84b0c10e9b5f112472.jpg)
Community Material Theme / Material Theme
![](http://mdimg.wxwenku.com/getimg/356ed03bdc643f9448b3f6485edc229bb486f314529a6ef5b0c3d72608081e9ce4545327249c1881478a71672b0f83ae.jpg)
修改編輯器的主題,內建很多種,我用的是 Material Theme Palenight High Contrast
這一款。安裝完了以後點選 設定顏色主題
就可以了。
Material Theme Icons
![](http://mdimg.wxwenku.com/getimg/6b990ce30fa9193e296dd37902816f4bc1375c6b91dabc0adf6bc721bd747930b28a33068142ad41bc10c348dbbd2647.jpg)
設定檔案圖示的,這個外掛的長這個樣子,還有很多其它修改檔案圖示的外掛,不喜歡這一款的,大家可以自行找一找。
![](http://mdimg.wxwenku.com/getimg/356ed03bdc643f9448b3f6485edc229b0705f3f517655b31f0be23c1ce5638807e9c4d80731edeed5f38a8875e91cd0e.jpg)
Error Gutters
![](http://mdimg.wxwenku.com/getimg/6b990ce30fa9193e296dd37902816f4bdc28f86e86a64a371579046450e7144f4ab684b29500f7b59ecb0ccaf550c317.jpg)
報錯的地方都有大紅波浪線提示,可以說是非常的直觀了。
![](http://mdimg.wxwenku.com/getimg/ccdf080c7af7e8a10e9b88444af98393894e94ca0c656e6b49bb0028aef0f998b16647d751807fb52b69033d6695c224.jpg)
Image preview
![](http://mdimg.wxwenku.com/getimg/6b990ce30fa9193e296dd37902816f4b530e76fdb85cf38b4f5eb5bbf070bba0ea8879e5a34b88ff984eb59f13c538bc.jpg)
預覽程式碼中圖片的引用,滑鼠移上去就會有小窗展示圖片。
![](http://mdimg.wxwenku.com/getimg/ccdf080c7af7e8a10e9b88444af98393c584dd673b00a76fa2381d8dae139f3b64f658afbd65df8320307c79c1c82e2f.jpg)
indent-rainbow
![](http://mdimg.wxwenku.com/getimg/356ed03bdc643f9448b3f6485edc229bd71b0ac51bab0ab116eb8df1b520c4f13a4319e49f344ee203f7010c21454452.jpg)
看名字就知道了,彩虹縮排,就是把程式碼不同的縮排展示不同的顏色。
![](http://mdimg.wxwenku.com/getimg/6b990ce30fa9193e296dd37902816f4b63fdcfb6682b5e8d691932c4ffb87b61f42400d27dc20ee48a290b6f44e12965.jpg)
Indenticator
![](http://mdimg.wxwenku.com/getimg/6b990ce30fa9193e296dd37902816f4b44391eb86867ca4c1cb00485429fda7ad26792c650011463af1ab573a0d6eebb.jpg)
當你點選一個縮排部分的時候,會出現一條白線來告訴你當前處於的縮排層級,可以更方便的檢視程式碼結構。
![](http://mdimg.wxwenku.com/getimg/6b990ce30fa9193e296dd37902816f4bfdc371314bebd5e473bcf36e94d9811b4d98e1f40a9b14abd8493a7c11fa2610.jpg)
Trailing Spaces
![](http://mdimg.wxwenku.com/getimg/ccdf080c7af7e8a10e9b88444af9839371e4b39b136e692909c64febb5967bda55d23408fa1fe64d5d2562705ba0e5ba.jpg)
把尾隨空格顯示出來。
![](http://mdimg.wxwenku.com/getimg/ccdf080c7af7e8a10e9b88444af98393b74b1a80da41afae811e21021ad74eec9b78075ffe415b90c88d2b0d5b2f476a.jpg)
VSCode Great Icons
![](http://mdimg.wxwenku.com/getimg/6b990ce30fa9193e296dd37902816f4b195f183a87db9309968d102434fd9341b2ebefbb743884be32e249a8fb7fe94b.jpg)
另一個修改檔案圖示的外掛,我用的就是這個,相對於 Material Theme Icons
我更喜歡這個的風格,蘿蔔青菜可有所愛,大家各取所需。
![](http://mdimg.wxwenku.com/getimg/ccdf080c7af7e8a10e9b88444af983937a50d4f244ef2766f8fc8d33e18b665a28c39ba8776853a3f1d75c36373c8643.jpg)
功能擴充套件
編輯器自身的功能還是有限的,為了應付日常開發,不得不安裝很多其他的軟體進行輔助,不過也可以通過外掛的方式引入一些常用的輔助軟體,它們的功能可能沒有原生的強大,但是基本上已經夠用,並且是真的很方便。
AZ AL Dev Tools/AL Code Outline
用來梳理程式碼結構的外掛,安裝完後在檔案圖示裡就會多出一個 AL OUTLINE
的選項。
![](http://mdimg.wxwenku.com/getimg/6b990ce30fa9193e296dd37902816f4be7986a2d5826a4119c52f1cfdbba61c290e57b8f2377833a64719f781057aa8e.jpg)
為了演示我找了一個比較長,比較典型的 vue
檔案,請忽略我的程式碼內容,專注於外掛的功能 , 可以看到展開第一層是極具 vue
單檔案元件特點的 template
, script
, style
。逐層展開就可以看到 dom
節點, methods
裡面定義的函式等,然後點選就可以快速定位到目標所在位置,媽媽再也不用擔心我全域性搜啦!
注:它這個裡面好像是預設展開的,應該是可以設定是否預設展開,但我沒研究過,感興趣的大佬可以深入調查一下。
Code Runner
執行程式碼,可以在編輯器中檢視結果,前端同學可以在控制檯看 console.log
,還有很多其他玩法,具體使用參考此篇文章
:point_right::point_right: VSCode外掛推薦 | Code Runner: 程式碼一鍵執行,支援超過40種語言 [2]
![](http://mdimg.wxwenku.com/getimg/ccdf080c7af7e8a10e9b88444af98393b5145f305537550a2fed654e98d5836158ceb069558bd52eab74838adfcc0dd6.jpg)
CodeIf
![](http://mdimg.wxwenku.com/getimg/6b990ce30fa9193e296dd37902816f4b787035af33ad8c7dcc91a74a546a3dc6d81687f93fa084c542683fb7a39c22ea.jpg)
在網上看到一句話, 在電腦科學中只有兩件難事:快取失效和命名 。哈哈哈,確實如此,當開發專案時,命名一直都是一種讓人痛苦的事情。
但是命名又是開發過程中一項非常重要的事情,一個好的函式命名,能夠讓你瞬間明白它實現的功能,所以,每當開發過程中遇到要命名的變數、函式、類時就要冥思苦想,各種翻譯。
但是, CodeIf
的出現讓這個問題迎刃而解,它通過搜尋 GitHub
, Bitbucket
, GitLab
來找到真實的使用變數名,為你提供一些高頻使用的詞彙。
使用時只需要選中變數名,然後 右鍵
選擇 CodeIf
就可以跳轉到網頁,顯示候選命名。
![](http://mdimg.wxwenku.com/getimg/356ed03bdc643f9448b3f6485edc229b9da6496779fed5a61f42d501c96cd20aefbf51479193d55e8d9ba0f0315de597.jpg)
Color Info
![](http://mdimg.wxwenku.com/getimg/356ed03bdc643f9448b3f6485edc229b076294811277c4f61399692a5ce3f70c637ded8224bed03988593d53d5c76af5.jpg)
檢視顏色詳細資訊的外掛,可以小視窗顯示顏色值,rgb,hsl,cmyk,hex等等,可以在配置項裡新增要展示的資訊型別。
![](http://mdimg.wxwenku.com/getimg/6b990ce30fa9193e296dd37902816f4bfd1a2d73b9b41c9ea0d89fe821e8111a9e381d6d05af2c7119a1118d8786238f.jpg)
Code Spell Checker
![](http://mdimg.wxwenku.com/getimg/356ed03bdc643f9448b3f6485edc229beec6038a721ec3934346f969f371722a41671c2798f2b75d7a37b2614b41eaf5.jpg)
檢查程式碼中單詞拼寫是否正確,當單詞不正常的時候,就會在下方出現波浪線進行提示,還可以自定義詞典,忽略某個單詞的檢查等,更多用法參考下面連結。
:point_right::point_right: VSCode中外掛Code Spell Checker [3]
![](http://mdimg.wxwenku.com/getimg/6b990ce30fa9193e296dd37902816f4b472cea21781cbe6f42c5051d631f1fbfefb436dcae54d1e9a320d705c347655a.jpg)
Debugger for Chrome
這款外掛是專門為前端除錯開發的,很方便除錯,跟谷歌的控制檯是一樣的功能,安裝以後,無需開啟瀏覽器的控制檯就能進行斷點除錯。對應的還有 Debugger for Firefox
, Debugger for Microsoft Edge
等,其他的我沒用過,大家按需安裝即可,使用方法應該都大同小異。
![](http://mdimg.wxwenku.com/getimg/ccdf080c7af7e8a10e9b88444af983931526aff441330092927d7be8ef38c6cd28643aa41c34528228bfddf1ebad6834.jpg)
安裝完以後,左邊會出現一個除錯的小圖示,開啟以後再點選上方小齒輪進行配置。根目錄下會自動新建 .vscode
資料夾以及 launch.json
檔案,不用管。
![](http://mdimg.wxwenku.com/getimg/ccdf080c7af7e8a10e9b88444af98393ad2a39cacd6b62b2657a102cf143dce7886ae283842cca58f9e223ef13e57409.jpg)
配置檔案的具體內容和使用方法可以看這一篇,很詳細。
:point_right::point_right: VSCode配置 Debugger for Chrome外掛 [4]
Git History
![](http://mdimg.wxwenku.com/getimg/6b990ce30fa9193e296dd37902816f4b44c7e410b5e5f744ec02d6ee1d973647f96f499f4c6452bdbb12c3cb6aa97df7.jpg)
右鍵單擊檔案選擇 Git:View File History
來以列表的形式檢視所有的提交記錄。
GitLens — Git supercharged
這個也是跟 git
相關的外掛,功能比上一個要強大一些。上一個外掛的演示圖片中可以看到我的每一行程式碼都有上一次 git
提交的記錄,那就是這個外掛的功勞。
還有其他很多的操作,詳情查閱下方連結。
:point_right::point_right: VsCode中好用的git原始碼管理外掛GitLens [5]
![](http://mdimg.wxwenku.com/getimg/ccdf080c7af7e8a10e9b88444af983930466720ec68aa8605927a252e9b610b6199e2305a4d87364de71b59f32c48273.jpg)
LeetCode
可以在 vscode
中刷演算法題的。我自己沒用過:persevere::persevere:
![](http://mdimg.wxwenku.com/getimg/6b990ce30fa9193e296dd37902816f4b8091f86d3b0dc7a8b8d4aa87549a797e9a001e442040514aa5d45cc91a2531e8.jpg)
Local History
![](http://mdimg.wxwenku.com/getimg/6b990ce30fa9193e296dd37902816f4b82ff76a484a472f4630be37f3636ab6447908448b05733bb6aefe76b2aa76474.jpg)
這個就很強了,原生代碼的修改記錄。通常我們寫錯程式碼了可以撤銷,但是撤銷完以後再修改,想要取消撤銷就難了。有了這個外掛直接看程式碼的修改記錄。還可以跟當前版本進行對比,神器。
安裝完以後,專案根目錄下會自動生成 .history
的資料夾。程式碼的修改記錄就會放在這裡面。記得新增 .gitignore
,不然每次提交程式碼的時候就要遭重了。
![](http://mdimg.wxwenku.com/getimg/356ed03bdc643f9448b3f6485edc229b83cd7d0588f847ffb215c2fa86919d00db04f157875e4e5c04706655c1eb8b2e.jpg)
open in browser
在瀏覽器中開啟 html
檔案。
![](http://mdimg.wxwenku.com/getimg/ccdf080c7af7e8a10e9b88444af9839391bd5a0e4b138b550c9b413ddb49b52ff0872f56e71a00670b65f20c99a14389.jpg)
安裝完以後在目標的 html
檔案上右擊,選擇 open in default browser
即可開啟使用瀏覽器開啟檔案。
![](http://mdimg.wxwenku.com/getimg/356ed03bdc643f9448b3f6485edc229bf31322e8016fb3fac19988ceba1c67cbcc023b7cf5a2d18738ce9df4b7e8e568.jpg)
Partial Diff
![](http://mdimg.wxwenku.com/getimg/6b990ce30fa9193e296dd37902816f4bb820d0d98a3278c4e115305c17b3694f0dd49c50d9035e1489b581d72bfd6cd6.jpg)
檔案比較界的大拿肯定是 Beyond Compare
了,但是它是收費的!那麼 Partial Diff
這款神奇的外掛就成為了良好的替代品,選中一程式碼,右鍵 Select Text for Compare
,選中另外一部分程式碼,右鍵 Compare Text with Previous Selection
即可。我的是中文的,就更明顯了
Postcode
Postman
都聽說過吧,這個外掛就基本上可以理解為,在 vscode
裡面使用 postman
。
![](http://mdimg.wxwenku.com/getimg/6b990ce30fa9193e296dd37902816f4b1ecc4c7b0b855c763c2a557305f1ab433b0e409a7d1e4d7c4cbab16aa9847624.jpg)
安裝完以後左側選單會出現一個 小盒子
的圖示,點開以後點選 Create Request
就可以正常使用了。
![](http://mdimg.wxwenku.com/getimg/ccdf080c7af7e8a10e9b88444af983930c1849547b1aa7921f592404e4d00b03f29dbc5d0f9de1e9ca5e0eb17af7d149.jpg)
Project Manager
![](http://mdimg.wxwenku.com/getimg/6b990ce30fa9193e296dd37902816f4bc559dda1a5396207f3e0b55ca485fec16f4c964000b5a5c0d1c7a5e822305365.jpg)
專案管理器,適用於經常切換專案的大佬,雖然我平時接觸的專案也不多,不過自己搞著玩的工程也不少。有了這個外掛,就不用新視窗開啟專案了。
安裝完以後左側列表會出現一個 資料夾
的小圖示,點開以後就可以進行專案管理了,通常都是操作 projects.json
這個檔案,點選專案名字就可以切換了,也可以新視窗開啟。
![](http://mdimg.wxwenku.com/getimg/6b990ce30fa9193e296dd37902816f4b2a80256b4e12f830ac8b52ce1a49be6154c081a59e02244a3663a70f5f907760.jpg)
Quokka.js
![](http://mdimg.wxwenku.com/getimg/ccdf080c7af7e8a10e9b88444af9839371f556e12b1c1a95ff0beeecc95a7767fd797ea928259f653df6931dd79f56e0.jpg)
實時顯示程式碼的執行結果,使用方法請跳轉連結
:point_right::point_right: VS Code外掛之Quokka.js [6]
![](http://mdimg.wxwenku.com/getimg/6b990ce30fa9193e296dd37902816f4b1b03d010cfd797abd573c90360ea1ca8a306d1716fd806608529a6a7ce41c51b.jpg)
提升編碼效率
如何達到極致的編碼效率,當然是能不手寫則不手寫。下面這些外掛就是輔助大家進行一些自動化,這樣就可以節省下很多的時間用來摸魚了。
Auto Import
Typescript
自動匯入,其實現在很多的外掛基本都內建了這種功能,已經不是必須品了。可能是因為我裝了各種奇奇怪怪的外掛,我現在想匯入什麼東西的時候,一大堆的提示,隨便選一個都能導進來:joy:
![](http://mdimg.wxwenku.com/getimg/356ed03bdc643f9448b3f6485edc229b28218b0081ce5ce6d2f44fd4dda66764c6d4b449e34e76f56a7c82d469c383d4.jpg)
Auto Rename Tag
自動修改標籤名,重新命名一個開始標籤時,自動重新命名配對的結束標籤。
![](http://mdimg.wxwenku.com/getimg/ccdf080c7af7e8a10e9b88444af98393084de4882fe383f9d33c242c4daaddb80504aa1241eabc4698c2e64f7c632712.jpg)
一下子就對應的全修改掉了,是不是很 nice
。
![](http://mdimg.wxwenku.com/getimg/ccdf080c7af7e8a10e9b88444af9839361d2a9a69df4e9fee08ff4266251ddb26e3e6164b6de9ce2cf96782c8bb520af.jpg)
change-case
![](http://mdimg.wxwenku.com/getimg/6b990ce30fa9193e296dd37902816f4bf4e13de11b1f1f0bb747617ed01e5cffed99ce3b1c9f134de451f28ed416b2cb.jpg)
快速切換變數格式,什麼大坨峰,小駝峰,下劃線等等,它裡面有很多型別。使用方法按 F1(windows)
,輸入對應命令即可。
![](http://mdimg.wxwenku.com/getimg/6b990ce30fa9193e296dd37902816f4b59c9dc8b3bfbffe1325789f98231a084130f0bb46dbe4d846b16a502b8bf2227.jpg)
CSS Peek
可以通過點選類名迅速定位到樣式的定義。不知道是不是我自己的原因,有的時候會失效,需要點選 禁用 ,再點選 啟用 就好使了。具體使用方法參考連結
:point_right::point_right: cssPeek外掛大大提升你的開發效率 [7]
![](http://mdimg.wxwenku.com/getimg/ccdf080c7af7e8a10e9b88444af98393b56fe01cc11dc05d171842318daddddbac2d064895e5ea720544b824df800853.jpg)
ECMAScript Quotes Transformer
用於 模板字串 和 普通字串拼接 的相互轉化,但其實我日常開發基本上都是統一使用模板字串的,很少有這種互相轉化的需求。
![](http://mdimg.wxwenku.com/getimg/356ed03bdc643f9448b3f6485edc229b2fe17710975d09290cc98677814ec1dc4c0fad311f22bb34ccfc3c8ab9c13469.jpg)
用法也是非常簡單,選中需要轉化的行,按 f1
輸入命令即可,一般輸入 esq
就出現提示了。
![](http://mdimg.wxwenku.com/getimg/6b990ce30fa9193e296dd37902816f4b2a0aff8305d2edc5f345f720220b9f19a9518cb32bbec422d9bad5a2c71db1ce.jpg)
embrace
快速的在選中程式碼兩邊新增各種引號、括號,不用來回移動游標,不過好像現在市面上的編輯器大多都內建這功能了吧
![](http://mdimg.wxwenku.com/getimg/6b990ce30fa9193e296dd37902816f4b9af3413bbab5e4e80fcc5bad5d7fef705b71bc1f265176e0165891a193a744bb.jpg)
File Utils
![](http://mdimg.wxwenku.com/getimg/6b990ce30fa9193e296dd37902816f4be315a2ac4b5bafd61978cc14f0a1395cc24e5f5f252531abb12a6bb32d309394.jpg)
建立,複製,移動,重新命名,刪除檔案和目錄的便捷方法,演示圖片來自官網。
![](http://mdimg.wxwenku.com/getimg/6b990ce30fa9193e296dd37902816f4b5dc0bb18840cdde1479f3489d2fe800edb9e90e4e5d1bdaa48cb02f867061267.jpg)
javascript console utils
![](http://mdimg.wxwenku.com/getimg/ccdf080c7af7e8a10e9b88444af98393fbc91db5f42c95edadbf985878a0bc8ef16e9bff96ecf76e15e23437bebbb3af.jpg)
前端人員的除錯少不了 console.log
,那麼這就是一款快速生成 console.log
的外掛。使用方法非常簡單, 選中變數,然後按 ctrl + shift + L
就可以生成了。需要刪除的時候按 ctrl + shift + D
即可刪除。
![](http://mdimg.wxwenku.com/getimg/6b990ce30fa9193e296dd37902816f4ba3767f96aa2b9b7e0fd14fbf07f28f556157916778a2cb5576af498b864810fc.jpg)
json2ts
![](http://mdimg.wxwenku.com/getimg/ccdf080c7af7e8a10e9b88444af983938e6b038fa3b92e594de40ab1e4def609b98249eb9ac2bf402c826dc7842622f0.jpg)
自動把 json
格式轉成 ts
的型別,複製 json
之後按 ctrl + alt + v
即可。
![](http://mdimg.wxwenku.com/getimg/356ed03bdc643f9448b3f6485edc229b8a1a37949cda5c94402bf0cff0fa65aac37d4730613bd5d618f81a30d0dcc155.jpg)
koroFileHeader
![](http://mdimg.wxwenku.com/getimg/356ed03bdc643f9448b3f6485edc229b3c8f2c8beb4ad0047affe63c064f184e9418ba85981cc5ddc63961c8fba9949a.jpg)
自動新增 頭部註釋
和 函式註釋
的外掛。支援自定義內容,需要在 settings.json
中進行自定義配置。
![](http://mdimg.wxwenku.com/getimg/6b990ce30fa9193e296dd37902816f4b6ff98f8b970666dcb8e7a39358df0b9972cd54f1dc55ce36b2eaf462f76f31c5.jpg)
//自動生成註釋外掛 檔案頭部註釋
"fileheader.customMade": {
"Author": "一尾流鶯",
"Description": "",
"Date": "Do not edit",
"LastEditTime": "Do not edit",
"FilePath": ""
},
//自動生成註釋外掛 函式註釋
"fileheader.cursorMode": {
"description": "",
"param": "",
"return": ""
},
複製程式碼
Mithril Emmet
快速生成程式碼結構,不過好像新版本 vscode
已經內建了。
![](http://mdimg.wxwenku.com/getimg/6b990ce30fa9193e296dd37902816f4b502b8cfc782d04b0dc309c210d3243ece635b9718b87a0cf6181e9b08f961cb7.jpg)
Path Intellisense
![](http://mdimg.wxwenku.com/getimg/356ed03bdc643f9448b3f6485edc229bfdc58b02c134162c3b7c3e22e1b7590e4775caa4a5e71a24dc05adbcaa1bf705.jpg)
引入檔案的時候,路徑自動補全。
![](http://mdimg.wxwenku.com/getimg/356ed03bdc643f9448b3f6485edc229b05555123315cf93ff0ff83674dfa78caf0348073a45bdf517dc6b27d41463573.jpg)
Npm Intellisense
![](http://mdimg.wxwenku.com/getimg/6b990ce30fa9193e296dd37902816f4bcaf09d7ba7a464910e46db2621b1c3b115528f435c2d5a79e3d34f4e8c69323d.jpg)
匯入 npm
包的時候,智慧提示。
![](http://mdimg.wxwenku.com/getimg/ccdf080c7af7e8a10e9b88444af983935d5e33807c3621337ef939cf672a471545e5dae16a357c0fa0f6b5e188aded0e.jpg)
px to rem & rpx (cssrem)
自動換算單位的外掛。
![](http://mdimg.wxwenku.com/getimg/ccdf080c7af7e8a10e9b88444af983937185b98c9d6878b467cfd3cfd54f541b7f0d9e13d0f1886626f2088f221f2f87.jpg)
很簡單,出現提示以後回車即可。
![](http://mdimg.wxwenku.com/getimg/356ed03bdc643f9448b3f6485edc229b42661837ebf7e238461dce3cee4cd38309e084874f2f82dcf391f6f7dbb2b961.jpg)
Turbo Console Log
![](http://mdimg.wxwenku.com/getimg/356ed03bdc643f9448b3f6485edc229b77cfc13b82ef13ae9b6c5e034e024aff4948d8f5bf203aebb54f03dd4c6080c3.jpg)
另一個用來生成 console.log
的外掛,不同的是,他支援自定義 console.log
的內容,包括檔名,路徑,大小等,還可以新增自己喜歡的 emoji
表情,快捷鍵 ctrl + alt + L
。
![](http://mdimg.wxwenku.com/getimg/ccdf080c7af7e8a10e9b88444af98393ba9b71471d89407173833e57f91bac5e8dbcba14a0ab33d3701a20912d07fc71.jpg)
程式碼片段類外掛
這一類的外掛都很多,但功能都是提供程式碼片段,作用就是使用幾個字元的簡寫,就可以敲出整段程式碼。
![](http://mdimg.wxwenku.com/getimg/ccdf080c7af7e8a10e9b88444af98393832a5b1d996c7ac82f28d0970756ae51dc913a2067fc6c1044105a726f783709.jpg)
-
JavaScript (ES6) code snippets
-
Jest Snippets
-
HTML Snippets
-
Vue VSCode Snippets
-
Vue 3 Snippets
-
... ...
![](http://mdimg.wxwenku.com/getimg/ccdf080c7af7e8a10e9b88444af98393b52ca3a3b9a631169c05a90dea1209a59dbf9e9e94c04f3cf76932e65e29ca8c.jpg)
程式碼格式化
Beautify
用來程式碼格式化的,但是我好像安裝了沒怎麼用,我一直都是 eslint + prettier
,有正在用的小夥伴可以在評論區發表一下看法,感興趣的請自己搜尋使用方法。
![](http://mdimg.wxwenku.com/getimg/ccdf080c7af7e8a10e9b88444af9839341a15b9cac46cceee235e95ce62e712b08a5df74ae7d0a87f103620525cb6525.jpg)
ESLint
這個就不用說了吧,程式碼檢查,不符合規範的就會跟你報錯,或者警告。具體的規範需要在根目錄下新建 .eslintrc.js
檔案去配置,也可以用很多大公司現有的規範,太複雜了就不細講了,貼出教程連結。
:point_right::point_right: Eslint 超簡單入門教程 [8]
![](http://mdimg.wxwenku.com/getimg/ccdf080c7af7e8a10e9b88444af983932e9eb00de3b975292f2360edb69659505c3e9a73b200bcfc3bf7d5ddf22f8986.jpg)
Prettier - Code formatter
程式碼格式化外掛,這個外掛通常搭配 eslint
使用,也可以單獨使用。
![](http://mdimg.wxwenku.com/getimg/ccdf080c7af7e8a10e9b88444af983935e23c0e14ad5fa66e57217535d372ca01a83c3ed086dd67ac79a153d2f51c7e6.jpg)
在根目錄下新建 .prettierrc.json
檔案,在裡面書寫自己想要的格式就行了。更具體的配置內容檢視連結
:point_right::point_right: \# vscode 使用Prettier外掛格式化配置使用 [9]
![](http://mdimg.wxwenku.com/getimg/356ed03bdc643f9448b3f6485edc229bf0699baf66947ce929c55b61fd59d03c1233cf90c8fe3b538a3d1bba0e02fd08.jpg)
vetur / volar
![](http://mdimg.wxwenku.com/getimg/356ed03bdc643f9448b3f6485edc229b4db62f4e37f9b32d56655ae0b667d11c7c8645b55aa22b15abb52ceb5362d044.jpg)
![](http://mdimg.wxwenku.com/getimg/6b990ce30fa9193e296dd37902816f4bd7182d5ab1b111400a9aa93382827c33c10d1821377c5963a325d84ec245bf39.jpg)
使用 vue
進行開發的小夥伴都少不了跟它們打交道, volar
是跟 vue3
更配的,功能也能多,由於這兩個外掛功能過於龐大,就不展開講了,感興趣的自行搜尋使用。
其他好玩的外掛
除了功能性外掛,當然還有很多花裡胡哨的玩意。下面給大家介紹幾款可能對開發影響不大,但是非常好玩的外掛。
小霸王
還記得小時候玩的手柄遊戲嗎?大佬已經給我們出了外掛了,不過我還是要友情提醒一句:遊戲有風險,摸魚需謹慎!
![](http://mdimg.wxwenku.com/getimg/6b990ce30fa9193e296dd37902816f4b9cf102d673b371ac44f4f0b1913f001b90a2b2fe739e061614e4a8ad4f924344.jpg)
操作非常簡單,安裝完左側會出現遊戲手柄圖示,點選開啟就可以下載遊戲進行玩耍。
![](http://mdimg.wxwenku.com/getimg/ccdf080c7af7e8a10e9b88444af9839350376e6c95b6c224ecd913a723164db6c6a26bb6e4ea788950a658a9796a8393.jpg)
Emoji
![](http://mdimg.wxwenku.com/getimg/ccdf080c7af7e8a10e9b88444af983936ed91251ecfbad95fe828576882e2a0008553acae2c59185e9b77f1a28254349.jpg)
在程式碼中新增 emoji
表情,我自己除了寫一些註釋, console.log
之外,基本沒有別的作用,但是挺好玩的,別人看你的程式碼中各種小表情,也會覺得你是一個可愛的人吧。
它的官方示例裡面還可以把 emoji
設為變數名,我可不建議你們這樣做。使用方法也是非常的簡單,按 f1(windows)
輸入 emoji
,可以看到有三個選項,分別是 emoji
表情, markdown
下的 emoji
,還有 unicode
下的 emoji
。選中一個模式回車進入列表,再回車就可以輸入到程式碼中了。
![](http://mdimg.wxwenku.com/getimg/356ed03bdc643f9448b3f6485edc229bbaee89bfecc9b2f3b6f07eaf21898957eefea1585f2e92ee8b65cc2401694f8b.jpg)
Settings Sync
![](http://mdimg.wxwenku.com/getimg/ccdf080c7af7e8a10e9b88444af98393a84188173bb7d526005e5d74f604bb0e3ece5a1039703bd45a0df867b0a39022.jpg)
可以同步 vscode
配置的外掛,由於我沒有換過電腦,所以還沒親測,但是網上用的人還是蠻多的。
彩虹屁外掛
參考
感覺有用的小夥伴請點個:+1:,有其它外掛分享的請在評論區留言,謝謝啦!
關於本文
來源:一尾流鶯
http://juejin.cn/post/6994327298740600839
推薦閱讀:
VUE中文社群
程式設計技巧 · 行業祕聞 · 技術動向
- 史上最全,用60 VsCode外掛,打造最強編輯器
- 純 CSS 實現十個還不錯的 Loading 效果
- 前端摸魚神器,一小時打卡下班!
- 前端工程化&掌握Webpack極速配置技巧
- 如何修改 node_modules 裡的檔案
- 萬字長文:分享前端效能優化知識體系
- 大檔案的分片上傳、斷點續傳及其相關拓展實踐
- 58個面向 Web 開發人員的JavaScript技巧彙總
- 我的第一次webpack優化,首屏渲染從9s到1s
- Vue3 對比Vue2,你找到哪些變化?
- 手摸手教你封裝幾個Vue3中很有用的組合式API
- 10 個“哇塞”的 Web 資源,收藏等於學會~
- 梳理 Vue3 相比於 Vue2 的有哪些 “與眾不同” ?
- 22 個用於網站設計的 CSS 庫
- 82個Web開發者工具彙總
- 收藏 | 70道Vue相關面試題,一篇文章打包帶走
- 前端架構師神技,三招統一團隊程式碼風格
- 響應式佈局,你需要知道的一切
- 畫了5張圖,助你輕鬆打敗動態許可權路由!!
- 前端人一定不能錯過這個神器,告別切圖,一鍵成稿!