1. 程式人生 > >超實用VS Code外掛推薦——持續更新!

超實用VS Code外掛推薦——持續更新!

基礎必備外掛:

1、View In Browser

在瀏覽器裡預覽網頁必備

2、vscode-icons

改變編輯器裡面的檔案圖示。個人比較稀飯這個,其他的你們可以自行選擇。
在這裡插入圖片描述

3、Sublime Text Keymap and Settings Importer

這個名字挺長,說白了就是 sublime的快捷鍵外掛
由於以前我是用sublime這款編輯器的,所以換成vs code之後沒有sublime的快捷鍵真的難受。還好有這個外掛啦!

vs code的歡迎頁也會推薦這個外掛:
在這裡插入圖片描述

進價必備外掛

4、HTML Boilerplate

雖然vs code已經內建了一鍵生成html模板的快捷方式,但這個更詳細些。
在這裡插入圖片描述

5、Path Intellisense

智慧路徑提示,可以在你輸入檔案路徑時智慧提示。
在這裡插入圖片描述

6、Auto Rename Tag

同時修改對應的html標籤
在這裡插入圖片描述

7、Highlight Matching Tag

高亮對應的html標籤 以及 標識出對應的括號、花括號
在這裡插入圖片描述

8、Prettier (牆裂推薦)

格式化外掛。有的人可能會推薦Beautify。我原來也是一直用這個,後來發現這個並不能格式化React的程式碼。所以果斷換成Prettier

9、Bracket Pair Colorizer (牆裂推薦)

給巢狀的括號、花括號、中括號加上不同的顏色
在這裡插入圖片描述

10、Turbo Console Log (牆裂牆裂推薦)

快捷新增console.log,一鍵 註釋 / 啟用 / 刪除 所有console.log

簡直好用到犯規!
在這裡插入圖片描述

簡單說下這個外掛要用到的快捷鍵:

ctrl + alt + l 選中變數之後,使用這個快捷鍵生成console.log
alt + shift + c 註釋所有console.log
alt + shift + u 啟用所有console.log
alt + shift + d 刪除所有console.log

11、Change Case

轉換命名風格
在這裡插入圖片描述

12、CSS Peek

定位css


在這裡插入圖片描述

13、css-auto-prefix

自動新增css私有字首
在這裡插入圖片描述

14、Regex Previewer

實時預覽正則表示式的效果
在這裡插入圖片描述

15、Markdown Preview

實時預覽markdown

16、GitLens

詳細的git提交日誌
git重度使用者必備,尤其是多人協作時。哪一行程式碼,何時、何人提交都有記錄。
在這裡插入圖片描述

在這裡插入圖片描述

媽媽再也不用擔心我背鍋了!

17、settings sync

在不同電腦間同步你的外掛
安裝了這麼多外掛,換了臺電腦又得重新安裝,所以,這個外掛不考慮入手嗎?
在這裡插入圖片描述

其他有用的外掛推薦

18、TODO Highlight

高亮TODO,FIXME、還可以自己配置要高亮的關鍵字

我猜小夥伴們在跑程式碼時一定和我一樣,經常打一些TODO標記吧?
所以,這個外掛很適合你!
在這裡插入圖片描述

19、Minify

壓縮html,css,js程式碼

在這裡插入圖片描述

20、:emojisense:

快速挑選markdown中的emoji
在這裡插入圖片描述

當然不想下載這個外掛,可以去這個網站找你想用的 markdown emojiEmoji cheat sheet for Github

亦可下載瀏覽附加外掛,也能找到你想要的 markdown emoji
在這裡插入圖片描述
在這裡插入圖片描述

21、Icon Fonts

新增字型圖示

在這裡插入圖片描述

22、px to rem

畫素轉rem

23、SVG View

預覽SVG
在這裡插入圖片描述

24、React/Redux/react-router Snippets

React程式碼快捷生成

在這裡插入圖片描述

TODO~

持續更新!

喜歡可以先收藏~