Categories
程式開發

15款好用的VS Code插件


15款好用的VS Code插件 1

VS Code有個市場,提供很多插件,開發人員可以把它們安裝到文本編輯器,增強編輯器功能。在視圖菜單中,選擇擴展選項或按下shift + cmd + X即可進入市場。

善用VS Code插件,不僅節省時間,還能提高工作效率,讓你成為更好的開發人員。

1. Live Server

該插件允許我們在更改IDE中的代碼時,自動重新加載Web頁面。

15款好用的VS Code插件 2

一旦安裝Live Server後,在html文件上右鍵單擊,可看到選項Open with Live Server[Alt + L + Q]。

下載地址:Live Server

2. Quokka.js

Quokka.js會在你輸入時自動計算結果,並在IDE中打印結果。

15款好用的VS Code插件 3

下載地址:Quokka.js

3. Code Spell Checker

它是一款拼寫檢查程序,可以為開發者報告一些常見的拼寫錯誤。它很適合駝峰式代碼。

15款好用的VS Code插件 4

下載地址:Code Spell Checker

4. GitLens

GitLens可增強Visual Studio Code中內置的Git功能。

它不僅能幫助你通過Git blame註解直觀地看到代碼作者,而且還可以無縫瀏覽和探索Git存儲庫,通過強大的比較命令獲得有價值的見解,等等。

下載地址:GitLens

5. Prettier

Prettier是一個嚴格基於規則的代碼格式化程序。

它解析代碼並使用自己的規則重新打印代碼,從而實現風格一致。這是一個重要的工具,無需開發人員做任何工作,它就能讓我們獲得格式正確的代碼。

Prettier提供合理的默認值,但你也能在項目的根目錄下提供一個配置文件來設置自己的標準,比如行長度、製表符/空格的數量等等。

15款好用的VS Code插件 5

下載地址:Prettier

6.ESLint

ESLint是一款靜態代碼分析工具,用來識別JavaScript代碼中出現的有問題的模式。

ESLint中的規則是可配置的,用戶可以定義和加載自己的規則。它還涵蓋了代碼質量和編碼風格問題。

15款好用的VS Code插件 6

下載地址:ESLint

7. vscode-icons

該插件會基於文件擴展名在the tree view中的文件名旁添加圖標,讓你更容易地識別文件。

15款好用的VS Code插件 7

下載地址:vscode-icons

8. Live Saas Compiler

它能幫你實時把SASS/SCSS文件編譯/轉譯成CSS文件,並且提供在線瀏覽器重載。

15款好用的VS Code插件 8

下載地址: Live Saas Compiler

9. JavaScript (ES6) code snippets

這個插件包含面向VS Code編輯器的ES6語法的JavaScript代碼片段(支持JavaScript和TypeScript)。

下載地址:JavaScript (ES6) code snippets

10. Browser Preview

它可以讓你在編輯器中打開一個用於調試的真正的瀏覽器預覽。

15款好用的VS Code插件 9

下載地址:Browser Preview

11. Path Intellisense

該擴展可以自動補全代碼中的路徑和文件名。

15款好用的VS Code插件 10

下載地址:Path Intellisense

12.Bracket Pair Colorizer

這個擴展允許用顏色來標識匹配的括號。用戶可以定義要匹配的字符和要使用的顏色。

15款好用的VS Code插件 11

下載地址:Bracket Pair Colorizer

13. Vim

VSCodeVim是一個用於Visual Studio Code的Vim仿真器,為你的文本編輯器帶來Vim的強大功能。

15款好用的VS Code插件 12

下載地址:VSCodeVim

14. TODO Highlight

高亮顯示代碼中的TODO、FIXME及其他註解。

15款好用的VS Code插件 13

下載地址:TODO Highlight

15. Color Highlight

這個擴展可以風格化在你的文件中找到的css/web顏色,所以你無需打開頁面就能看到它們是什麼顏色。

下載地址:Color Highlight

英文原文:

15 VS Code Extensions to Save Your Time and Make You a Better Developer