15款好用的VS Code插件
用好 VS Code 插件,不僅能節(jié)省你的時間,還能提高工作效率。
VS Code 有個市場,它提供很多插件。開發(fā)人員可以把插件安裝到文本編輯器,增強編輯器功能。在視圖菜單中,選擇擴展選項或按下 shift + cmd + X 即可進入市場。
善用 VS Code 插件,不僅節(jié)省時間,還能提高工作效率,讓你成為更好的開發(fā)人員。
1. Live Server
該插件允許我們在更改 IDE 中的代碼時,自動重新加載 Web 頁面。
一旦安裝 Live Server 后,在 html 文件上右鍵單擊,可看到選項 Open with Live Server[Alt + L + Q]。
下載地址:
https://marketplace.visualstudio.com/items?itemName=ritwickdey.LiveServer
2. Quokka.js
Quokka.js 會在你輸入時自動計算結果,并在 IDE 中打印結果。
下載地址:
https://marketplace.visualstudio.com/items?itemName=WallabyJs.quokka-vscode
3. Code Spell Checker
它是一款拼寫檢查程序,可以為開發(fā)者報告一些常見的拼寫錯誤。它很適合駝峰式代碼。
下載地址:
https://marketplace.visualstudio.com/items?itemName=streetsidesoftware.code-spell-checker
4. GitLens
GitLens 可增強 Visual Studio Code 中內置的 Git 功能。
它不僅能幫助你通過 Git blame 注解直觀地看到代碼作者,而且還可以無縫瀏覽和探索 Git 存儲庫,通過強大的比較命令獲得有價值的見解等等。
下載地址:
https://marketplace.visualstudio.com/items?itemName=eamodio.gitlens
5. Prettier
Prettier 是一個嚴格基于規(guī)則的代碼格式化程序。
它解析代碼并使用自己的規(guī)則重新打印代碼,從而實現(xiàn)風格一致。這是一個重要的工具,無需開發(fā)人員做任何工作,它就能讓我們獲得格式正確的代碼。
Prettier 提供合理的默認值,但你也能在項目的根目錄下提供一個配置文件來設置自己的標準,比如行長度、制表符 / 空格的數(shù)量等等。
下載地址:
https://marketplace.visualstudio.com/items?itemName=esbenp.prettier-vscode
6. ESLint
ESLint 是一款靜態(tài)代碼分析工具,用來識別 JavaScript 代碼中出現(xiàn)的有問題的模式。
ESLint 中的規(guī)則是可配置的,用戶可以定義和加載自己的規(guī)則。它還涵蓋了代碼質量和編碼風格問題。
下載地址:
https://marketplace.visualstudio.com/items?itemName=dbaeumer.vscode-eslint
7. vscode-icons
該插件會基于文件擴展名在 the tree view 中的文件名旁添加圖標,讓你更容易地識別文件。
下載地址:
https://marketplace.visualstudio.com/items?itemName=vscode-icons-team.vscode-icons
8. Live Saas Compiler
它能幫你實時把 SASS/SCSS 文件編譯 / 轉譯成 CSS 文件,并且提供在線瀏覽器重載。
下載地址:
https://marketplace.visualstudio.com/items?itemName=ritwickdey.live-sass
9. JavaScript (ES6) code snippets
這個插件包含面向 VS Code 編輯器的 ES6 語法的 JavaScript 代碼片段(支持 JavaScript 和 TypeScript)。
下載地址:
https://marketplace.visualstudio.com/items?itemName=xabikos.JavaScriptSnippets
10. Browser Preview
它可以讓你在編輯器中打開一個用于調試的真正的瀏覽器預覽。
下載地址
https://marketplace.visualstudio.com/items?itemName=auchenberg.vscode-browser-preview
11. Path Intellisense
該擴展可以自動補全代碼中的路徑和文件名。
下載地址:
https://marketplace.visualstudio.com/items?itemName=christian-kohler.path-intellisense
12. Bracket Pair Colorizer
這個擴展允許用顏色來標識匹配的括號。用戶可以定義要匹配的字符和要使用的顏色。
下載地址:
https://marketplace.visualstudio.com/items?itemName=CoenraadS.bracket-pair-colorizer
13. Vim
VSCodeVim 是一個用于 Visual Studio Code 的 Vim 仿真器,為你的文本編輯器帶來 Vim 的強大功能。
下載地址:
https://marketplace.visualstudio.com/items?itemName=vscodevim.vim
14. TODO Highlight
高亮顯示代碼中的 TODO、FIXME 及其他注解。
下載地址:
https://marketplace.visualstudio.com/items?itemName=wayou.vscode-todo-highlight
15. Color Highlight
這個擴展可以風格化在你的文件中找到的 css/web 顏色,所以你無需打開頁面就能看到它們是什么顏色。
下載地址:
https://marketplace.visualstudio.com/items?itemName=naumovs.color-highlight