VSCode之所以能成為如此出色的代碼編輯器,其原因之一是由社區創建的龐大的擴展庫,可以大大提高開發人員的工作效率。以下是一些我最喜歡的VSCode擴展。
1. Rainbow Brackets這個簡單的擴展可以使代碼裡括號的顏色變得豐富多彩,以便我們輕鬆找到匹配對。
擴展地址:https://marketplace.visualstudio.com/items?itemName=2gua.rainbow-brackets
2. Auto Rename Tag是的,在實際操作中,我們往往在更改html標記的同時也想要更改相應的開始/結束標記(opening/closing tag)。使用此擴展將會同時自動更改兩者。
擴展地址:https://marketplace.visualstudio.com/items?itemName=formulahendry.auto-rename-tag
3. Relative Path此擴展幫我節省了很多時間來編寫導入語句。通過簡單的鍵盤快捷鍵即可輕鬆獲取工作空間中任何文件的相對路徑。
擴展地址:https://marketplace.visualstudio.com/items?itemName=jakob101.RelativePath
4. Prettier使代碼樣式與此格式化程序保持一致。你可以完全按照自己的喜好來配置,然後使用快捷鍵或保存時設置代碼格式。
擴展地址:https://marketplace.visualstudio.com/items?itemName=esbenp.prettier-vscode
5. htmltagwrap突出顯示代碼塊,並使用快捷方式將其包裝在任何html標記中。
擴展地址:https://marketplace.visualstudio.com/items?itemName=bradgashler.htmltagwrap
6. Markdown Preview Enhanced如果你曾經編寫過markdown文件,那麼就會懂得進行實時預覽非常有用。
擴展地址:https://marketplace.visualstudio.com/items?itemName=shd101wyy.markdown-preview-enhanced
7. Polacode此擴展可以截取漂亮的代碼屏幕截圖。
擴展地址:https://marketplace.visualstudio.com/items?itemName=pnp.polacode
8. Random Everything我們不應該把大量的時間花在生成模擬數據上,這個擴展可以幫助你快速添加隨機數據到代碼中,例如名稱,電子郵件,顏色等。
擴展地址:https://marketplace.visualstudio.com/items?itemName=helixquar.randomeverything
9. CSS Peek「偷窺」任何CSS類,id或HTML標記的樣式。打開內聯樣式,或快速跳轉到樣式文件。
擴展地址:https://marketplace.visualstudio.com/items?itemName=pranaygp.vscode-css-peek
10. Turbo Console Log使用快捷鍵將變量名及其值輕鬆記錄到控制臺。為了便於調試,可以在日誌文件中配置文件名和行號之類的內容。
擴展地址:https://marketplace.visualstudio.com/items?itemName=ChakrounAnas.turbo-console-log
11. Simple React Snippets提供了許多你經常會寫的React代碼片段,提高你的開發效率。
擴展地址:https://marketplace.visualstudio.com/items?itemName=burkeholland.simple-react-snippets
12. Snippet Creator該擴展提供了很多常用的代碼片段,與上面那個擴展不同的是,如果你想製作自定義的代碼片段,那麼此擴展程序可以輕鬆地做到這一點。
擴展地址:https://marketplace.visualstudio.com/items?itemName=ryanolsonx.snippet-creator