精選!15 個必備的 VSCode 插件
Visual Studio Code 是由微軟開發的一款免費、跨平台的文本編輯器。由於其卓越的性能和豐富的功能,它很快就受到了大家的喜愛。
就像大多數 IDE 一樣,VSCode 也有一個擴展和主題市場,包含了數以千計質量不同的插件。為了幫助大家挑選出值得下載的插件,我們針對性的收集了一些實用、有趣的插件與大家分享。
1. Open-In-Browser
由於 VSCode 沒有提供直接在瀏覽器中打開文件的內置界面,所以此插件在快捷菜單中添加了在默認瀏覽器查看文件選項,以及在客戶端(Firefox,Chrome,IE)中打開命令面板選項。
2. Quokka
Quokka 是一個調試工具插件,能夠根據你正在編寫的代碼提供實時反饋。它易於配置,並能夠預覽變數的函數和計算值結果。另外,在使用 JSX 或 TypeScript 項目中,它能夠開箱即用。
3. Faker
使用流行的 JavaScript 庫 – Faker,能夠幫你快速的插入用例數據。Faker 可以隨機生成姓名、地址、圖像、電話號碼,或者經典的亂數假文段落,並且每個類別還包含了各種子類別,你可以根據自身的需求來使用這些數據。
4. CSS Peek
使用此插件,你可以追蹤至樣式表中 CSS 類和 ids 定義的地方。當你在 HTML 文件中右鍵單擊選擇器時,選擇「 Go to Definition 和 Peek definition 」選項,它便會給你發送樣式設置的 CSS 代碼。
5. HTML Boilerplate
通過使用 HTML 模版插件,你就擺脫了為 HTML 新文件重新編寫頭部和正文標籤的苦惱。你只需在空文件中輸入 html,並按 Tab 鍵,即可生成乾淨的文檔結構。
6. Prettier
Prettier 是目前 Web 開發中最受歡迎的代碼格式化程序。安裝了這個插件,它就能夠自動應用 Prettier,並將整個 JS 和 CSS 文檔快速格式化為統一的代碼樣式。如果你還想使用 ESLint,那麼還有個 Prettier – Eslint 插件,你可不要錯過咯
7. Color Info
這個便捷的插件,將為你提供你在 CSS 中使用顏色的相關信息。你只需在顏色上懸停游標,就可以預覽色塊中色彩模型的(HEX、 RGB、HSL 和 CMYK)相關信息了。
8. SVG Viewer
此插件在 Visual Studio 代碼中添加了許多實用的 SVG 程序,你無需離開編輯器,便可以打開 SVG 文件並查看它們。同時,它還包含了用於轉換為 PNG 格式和生成數據 URI 模式的選項。
9. TODO Highlight
這個插件能夠在你的代碼中標記出所有的 TODO 注釋,以便更容易追蹤任何未完成的業務。在默認的情況下,它會查找 TODO 和 FIXME 關鍵字。當然,你也可以添加自定義表達式。
10. Icon Fonts
這是一個能夠在項目中添加圖標字體的插件。該插件支持超過 20 個熱門的圖標集,包括了 Font Awesome、Ionicons、Glyphicons 和 Material Design Icons。
11. Minify
這是一款用於壓縮合并 JavaScript 和 CSS 文件的應用程序。它提供了大量自定義的設置,以及自動壓縮保存並導出為.min文件的選項。它能夠分別通過 uglify-js、clean-css 和 html-minifier,與 JavaScript、CSS 和 HTML 協同工作。
12. Change Case
雖然 VSCode 內置了開箱即用的文本轉換選項,但其只能進行文本大小寫的轉換。而此插件則添加了用於修改文本的更多命名格式,包括駝峰命名、下劃線分隔命名,snake_case 命名以及 CONST_CAS 命名等。
13. Regex Previewer
這是一個用於實時測試正則表達式的實用工具。它可以將正則表達式模式應用在任何打開的文件上,並高亮所有的匹配項。
14. Language and Framework Packs
VSCode 默認支持大量的主流編程語言,但如果你所使用的編程語言不包括在內,也可以通過下載擴展包來自動添加。同時,你還可以添加一些像 React Native 與 Vue 的相關 Web 開發插件包。
15. Themes
當然,在眾多的實用插件中,豈能少了漂亮的主題呢?你每天都會與你的 VSCode 編輯器進行「親密的接觸」,為何不把它打扮得更漂亮些呢?這裡有一些幫助你更改側邊欄的配色方案,以及圖標的相關主題,與大家分享:
※CSS 布局經典問題初步整理
※MySQL-事務的啟動/設置/鎖/解鎖——入門
※演算法-快速排序演算法
※JDBC與JAVA資料庫編程
※網路TCP連接三次握手與四次揮手
TAG:青峰科技 |
※11個SEO人員必須知道的Chrome擴展插件
※FCPX插件:Cineflare Hand Held 2.0 模擬手持攝像機鏡頭抖動
※20個非常絢麗的HTML5/CSS3應用插件
※國內首款 5G 機型開售;Google Chrome 大部分插件無人用;Firefox 69 Beta 9 發布 | 極客頭條
※VS Code 神器插件:代碼一鍵運行,支持超過 40 種語言!
※10 款口碑爆表的 Chrome 插件,Max 你的工作效率!
※SQLiPy-Burp套件的SQLMap插件
※iOS11必裝的一款插件!
※TC Electronic(TC 電子)發布DVR250-DT插件,模擬
※吐血推薦 5個Chrome 瀏覽器插件
※UE4 Bugly插件
※5.10 VR掃描:《星際迷航:下一代》DLC即將上線;AMD發布Radeon ProRender插件
※89款Chrome插件遭殭屍網路Droidclub利用 超過42萬用戶受影響
※這份「插件英雄榜Top20」才是Chrome的正確打開方式!
※這15個Chrome 插件,讓你擁有最好用的瀏覽器
※從零到壹:Cytoscape插件使用心得 MCODE篇
※Chrome插件型數字錢包Metamask將支持ETC
※Windows 10學院 Edge加插件
※GMTC分享——當插件化遇到 Android P
※Thinkbox Krakatoa MY for Maya 2017-2018 Win x64超強粒子渲染器插件