12 個我最喜歡的 VSCode 擴展

2022-01-20 前端新世界

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

相關焦點

  • 我最喜歡的 12 個VSCode 插件!
    以下是一些我最喜歡的VSCode 插件。1. Rainbow Brackets地址:https://marketplace.visualstudio.com/items?itemName=esbenp.prettier-vscode
  • 那些你應該考慮卸載的 VSCode 擴展
    這個擴展的作者開發了很多優秀的 VSCode 擴展,包括這個和下面的 Auto Rename Tag,最有名的應該是 Code Runner。我覺得有些擴展的功能被內置一方面也是好事,畢竟人的精力是有限的,維護開源項目還是很累的。
  • 誰會不愛讓代碼騷裡騷氣的VSCode擴展插件呢?
    itemName=WakaTime.vscode-wakatime  這是筆者最喜愛的擴展插件之一,它要是能全部免費就更好了。  它有什麼用?簡單來說就是這款插件可以記錄你的所有編程活動:你每天花多長時間寫代碼,你正在做的所有項目,你使用的所有程式語言,你對每門語言的熟練程度等等。  這一點太絕了!
  • 2020 vscode 好用的十佳擴展
    vscode作為免費開源的文本編輯器,它已經越來越受開發者喜愛。因為豐富的插件,它可以媲美IDE,同時它還有著不俗的啟動速度,可以說它是一款披著文本編輯器的IDE一點也不為過。vscode有著無數的插件,今天我們就來盤點一下2020年vscode相對來說非常好用的十佳擴展。Import Cost在開發過程中,我們可能經常會發現自己在項目中添加了依賴項。儘管模塊化開發已成為當今軟體開發的關鍵部分,但最好還是確保對依賴的過度依賴。
  • 2019年JavaScript開發者必備的10個vscode插件
    今天給大家推薦的這個10個插件希望對大家有所幫助。之前我們還熱衷使用Atom,webstorm,在前兩年的時候改用了vscode,感覺非常好,性能也不錯。而且vscode的社區和市場也日漸強大,這也是我選擇vscode的原因之一。
  • vscode入門:熟悉vscode和初級配置
    登錄vscode官網,下載對應平臺的安裝包安裝即可,下載安裝的過程中可以了解一下release notes,看看官方文檔。默認是英文界面,可以修改成中文(初期為了熟悉工具,最好使用熟悉的語言,英語大神可以跳過這一步)。點擊界面左下角的設置按鈕,選擇最上面的Command Palette...
  • vscode插件體系詳解
    事實上很多 vscode 的核心功能也是通過插件實現的。本文我們將從以下三個方面詳述 vscode 的插件機制:閱讀本文後續內容,需要對 vscode 的插件開發有基本的了解。關於 vscode 的插件開發可參考 vscode 的官方教程 。1.
  • VSCode 2019 August版本發布,新功能嘗鮮
    調用堆棧視圖改進我們對Call Stack視圖做了一些改進,最值得注意的是:當調試會話只有一個線程時,將始終隱藏線程並直接顯示調用堆棧。單擊"調用堆棧"視圖中的線程和調試會話不再展開/摺疊。當明確點擊twistie才會進行擴展。
  • HBuilderX 2.7.x 發布,插件系統開放,C++ 版的 vscode 來了
    考慮到HBuilderX主要是為前端工程師打造的工具,我們將插件的開發語言定為了JavaScript,插件API及規範則參考了vscode,實現對vscode插件的兼容,這樣vscode的插件也可以快速的移植到HBuilderX中。下圖為HBuilderX的插件架構:
  • 使用代碼片段的正確姿勢,打造高效的vscode開發環境
    去建設去維護一個項目模板是一件需要權衡的事情使用gist 呢,我一直沒有找到使用gist的正確姿勢,我可以很開心的寫gist,也可以很開心的看,但 我如何使用呢?打開網頁,搜索,然後?複製粘貼,但這不又回去了(沒有簡化太多使用code snippet 可以參看vscode官方文檔如何書寫snippets,寫起來說複雜也不複雜,但是感覺維護和管理也是一個問題。
  • SAST Weekly | vscode 插件PlatformIO簡介
    我們習慣了vscode舒適的編程環境,面對蒼白的界面不禁感慨人世的艱辛。誒,代碼補全功能沒有嗎?誒,我的代碼高亮去哪了?    誒,我的頭髮呢?    這些看似細微的功能的缺失直接影響著開發者的開發體驗。
  • vscode:看起來我運行在Windows上,其實我運行在Linux上
    vscode插件:remote-wsl,讓vscode真正的運行在Linux上。vscode已經出來好幾年了,這些年也發展得越來越好,很多人都已經用它代替笨重的ide了。後來就有了這樣一種解決方案,在wsl上配置編譯環境,使用vscode編輯,將vscode的終端默認設置為wsl就好了。但是wsl畢竟是wsl,vscode始終運行在Windows上,這樣就導致運行在Windows上的vscode檢測不到安裝在wsl上的環境,從而無法使用自動補全之類的功能。
  • 提高 VSCode 寫代碼效率的技巧
    那是你沒用過 vscode 自帶的這個功能。vscode 會掃描所有的 npm scripts,然後列出來,直接點擊 run 就會打開 terminal 來跑,而且高版本 vscode 還可以直接 debug 來跑。根本不需要自己輸入 npm run xxx。在側欄打開文件當打開文件的時候,默認會在當前編輯器打開,如果想新開一個編輯器打開呢?
  • JavaScript開發者的27個神奇VSCode工具
    由於其內置開發工具支持TypeScript和Chrome開發者工具,這款編輯器讓人越用越喜歡。每個人都能使用和修改的無限擴展的開放原始碼,誰不愛呢?希望這篇文章能幫你找到擴充開發工具箱的新工具。雖然下列工具並不都是JavaScript語言專用,但它們都是JavaScript開發者會感興趣的。
  • 分享幾個我日常使用的VS Code插件
    在這篇文章中,我想介紹一下自己日常使用中最喜歡的Visual Studio Code擴展。大多數時候,我用VS Code編寫的是JavaScript應用程式(標準JavaScript、React、Angular、NodeJS……各式各樣)。
  • 眾所周知,擁有了vscode就擁有了一切
    vscode是由微軟推出的一款的編輯器,免費開源且功能強大,自從用上之後,基本上不會再使用其他的編輯器,在我看來它幾乎可以用來幹任何事情。常規用法vscode 寫代碼支持各種流行的程式語言,包括c++, Java, js等等。通過相應的插件你甚至能夠對它們進行編澤運行。
  • vscode實用插件推薦
    筆者使用vscode接近兩年了,雖然感覺還不算是很順手,但是總歸還是磨合了不少,使用了比較多的插件,最後還剩下一些使用頻率比較高的,所以和大家分享一下,拋磚引玉,也希望有同學能夠給出更多能夠提高效率的工具。
  • vscode常用插件推薦
    通用插件Chinese: 使vscode顯示為中文One Dark Pro: 一個非常好看的主題插件SettingsSync:同步vscode設置和插件的插件,僅需登錄GitHub選擇gist即可使用Alt+Shift+D下載,Alt+Shift+U上傳。
  • VSCode 插件Quokka.js用法(圖)
    該擴展易於配置,對於使用 JSX 或 TypeScript 的項目可直接使用。項目地址:https://quokkajs.com/Quokka.js 是一個用於 JavaScript 和 TypeScript 的實時運行代碼平臺。 這意味著它會在你輸入後立即運行您的代碼,並在您的代碼編輯器中顯示各種執行結果。 建議你親自嘗試一下。
  • PyCharm vs VSCode,是時候改變你的 IDE 了!
    Stack Overflow 表明,2015 年 VSCode 的最初版本一經發布,它就已經成為了最受歡迎的 IDE。 但其實我考慮到自己並沒有真正花很多的時間使用 VSCode 及其提供的功能,所以把它與 PyCharm 相比較,找出他們的優點,以便更好的決定該使用哪一個? 1.