原者：Katherine Peterson
譯者：前端小智
來源：dev
點贊再看，微信搜索**【大遷世界】,B站關注【前端小智】**這個沒有大廠背景，但有著一股向上積極心態人，本文
GitHubhttps://github.com/qq449245884/xiaozhi 上已經收錄，文章的已分類，也整理了很多我的檔案，和教程資料，
VSCode 之所以是如此出色的代碼編輯器，其原因之一是由社區創建的龐大的插件庫，從而提高了開發人員的作業效率， 以下是一些我最喜歡的VSCode 插件，
1. Rainbow Brackets
地址：https://marketplace.visualstudio.com/items?itemName=2gua.rainbow-brackets
這個插件讓我們的括號變成五顏六色，這樣很容易就能找到匹配的對，
2. Auto Rename Tag
地址：https://marketplace.visualstudio.com/items?itemName=formulahendry.auto-rename-tag
重命名一個HTML / XML標簽時，自動重命名配對的HTML / XML標簽，
3. Relative Path
地址：https://marketplace.visualstudio.com/items?itemName=jakob101.RelativePath
此插件節省了我很多時間來撰寫匯入陳述句， 使用簡單的鍵盤快捷鍵即可輕松獲取作業區中任何檔案的相對路徑，
4. Prettier
地址：https://marketplace.visualstudio.com/items?itemName=esbenp.prettier-vscode
和esLint不同在于，ESLint只是一個代碼質量工具(確保沒有未使用的變數、沒有全域變數，等等)，而 Prettier 只關心格式化檔案(最大長度、混合標簽和空格、參考樣式等)，可見，代碼格式統一的問題，交給 Prettirer 再合適不過了，和 Eslint 配合使用，風味更佳，
5. htmltagwrap
地址：https://marketplace.visualstudio.com/items?itemName=bradgashler.htmltagwrap
可以在選中HTML標簽中外面套一層標簽，
6. Markdown Preview Enhanced
地址：ttps://marketplace.visualstudio.com/items?itemName=shd101wyy.markdown-preview-enhanced
如果你寫過markdown檔案，有一個實時預覽是非常有用的，
7. Polacode
地址：https://marketplace.visualstudio.com/items?itemName=pnp.polacode
這個插件可以將你的代碼保存成圖片分享給別人！
8. Random Everything
地址：https://marketplace.visualstudio.com/items?itemName=helixquar.randomeverything
這個插件可以根據資料型別自動生成隨機資料，特別適合生成測驗資料，
9. CSS Peek
地址：https://marketplace.visualstudio.com/items?itemName=pranaygp.vscode-css-peek
CSS Peek插件擴展了HTML和ejs代碼編輯功能，支持在源代碼中的字串中找到css/scss/less(類和id)，這在很大程度上是受方括號中稱為CSS行內編輯器的類似功能的啟發，
10. Turbo Console Log
地址：https://marketplace.visualstudio.com/items?itemName=ChakrounAnas.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. Simple React Snippets
地址：https://marketplace.visualstudio.com/items?itemName=burkeholland.simple-react-snippets
快速生成 React 模板片段~
12. Snippet Creator
地址:ttps://marketplace.visualstudio.com/items?itemName=ryanolsonx.snippet-creator
有許多代碼段擴展，如上面的React，但有時我們可能想要制作自己的自定義代碼段，這個插件可以讓你輕松做到這一點，
完，我是小智，我要去刷碗了~
原文：https://dev.to/katherinecodes/my-12-favorite-vscode-extensions-cld
代碼部署后可能存在的BUG沒法實時知道，事后為了解決這些BUG，花了大量的時間進行log 除錯，這邊順便給大家推薦一個好用的BUG監控工具 Fundebug，
交流
文章每周持續更新，可以微信搜索**【大遷世界 】第一時間閱讀，回復【福利】**有多份前端視頻等著你，本文 GitHub https://github.com/qq449245884/xiaozhi 已經收錄，歡迎Star，
CSDN認證博客專家
TypeScript
ECMAScript 6
前端框架
轉載請註明出處，本文鏈接：https://www.uj5u.com/qita/265845.html
標籤：AI
上一篇：“5G 太耗電，關掉它！”