用好這7個VS Code插件,前端編程效率蹭蹭漲

Visual Studio Code (VSCode)是微軟的一個免費的開源代碼編輯器,它非常輕巧、靈活,資源佔用少,內置功能強大,支持絕大多數流行的編程語言。VSCode 用當前大火的 TypeScript 開發,基於 electron 框架,底層 Node.js 對前端來說非常友好,簡直就是一款爲前端量身定。

VSCode 受到大家熱烈追捧的一個非常重要原因就是:它擁有規模超大的擴展插件,開發者可以根據需求,在 Marketpalce 查找並安裝各種各樣免費擴展、可用於支持新語言、調試代碼或添加各種其他自定義功能的插件。俗話說“插件用的好,編程沒煩惱”,接下來就盤點 7 個提升前端編程效率的 VSCode 插件。

 

Git 增強:GitLens

GitLens增強了 VSCode 中內置的 Git 功能,它能夠提供更多的版本控制功能來增強你的VSCode。GitLens 提供了對代碼的深入分析功能,可以顯示更改時間以及更改後的代碼。通過使用 GitLens 甚至可以比較不同的分支、標籤和提交。

           

點擊安裝:

https://marketplace.visualstudio.com/items?itemName=eamodio.gitlens

 

代碼檢查:ESLint

   

JavaScript 是一門非常靈活的語言,也很困難。ESLint 是一個插件化的 javascript 代碼檢測工具,有了它就可以進行常見的 JavaScript 代碼錯誤檢查,和代碼風格檢查。這樣我們就可以根據自己的要求指定一套 ESLint 配置,然後應用到所編寫的項目上,從而實現輔助編碼規範的執行,有效控制項目代碼的質量。

點擊安裝:

https://marketplace.visualstudio.com/items?itemName=dbaeumer.vscode-eslint

 

前後端聯調:Cloud Toolkit

   

在前後端聯調開發的過程中,後端環境複雜多樣,通常會涉及跨域、Cookie、Header鑑權以及更復雜的跨堡壘機調用等問題,有時候還會遇到一對多聯調的情況,Alibaba Cloud Toolkit 插件對於聯調環境切換非常有用。

它的 HTTP Proxy 功能提供了專業的前後端聯調代理方案,開發小白不用閱讀很多文檔即就能迅速上手。這個插件還能解決包括帶鑑權調試,跨堡壘機調試等複雜的聯調場景問題,方便管理不同的調試環境,可以“無重啓”調試環境切換將複雜的業務調試請求簡化,調測效率迅速提高。有了它,Nginx 和 Charles 這樣的複雜的代理工具再也不用安裝了。

點擊安裝:

https://marketplace.visualstudio.com/items?itemName=alibabacloud-cloudtoolkit.toolkit-vscode

 

環境同步:Settings Sync

   

Settings Sync 可以同步你當前的  VSCode配置環境,當你需要在其它的電腦工作時,新機器登錄一下就搞定了,再也不用折騰環境了。將你所有的編輯器配置同步到 gist,省得在新設備上重新安裝。

點擊安裝:

https://marketplace.visualstudio.com/items?itemName=Shan.code-settings-sync

 

項目管理:Project Manager

   

這個插件是多項目管理神器,可以在你的編輯器中快速切換項目。

點擊安裝:

https://marketplace.visualstudio.com/items?itemName=alefragnani.project-manager

 

自動路徑提示:Path Intellisense

這個插件很簡單,就是會自動給你提示相關的文件路徑,比如:當你在 HTML 通過 script 標籤要引入一個文件的時候,你直接在 src 中它就會根據你的輸入給你提示目錄中有的文件名;或者你通過 node require 一個文件的時候也是一樣會給你提示,這樣你就不用再去記文件名了,也不會因爲文件名拼寫錯誤或者路徑層級搞錯而發生加載失敗的問題了。

     

   

點擊安裝:

https://marketplace.visualstudio.com/items?itemName=christian-kohler.path-intellisense

 

EditorConfig for VS Code

   

在公司工作,一定會遇到多個人參與一個項目的情況,即使的團隊中使用多中 IDE 和編輯器,也可以用針對 VS Code 的 EditorConfig 來實現一致性。EditorConfig包含一個用於定義代碼格式的文件和一批編輯器插件,這些插件是讓編輯器讀取配置文件並以此來格式化代碼。如果大家對前端感興趣的話,可以加一下我們的學習交流摳摳羣哦:649,825,285,免費領取一套學習資料和視頻課程喲~

點擊安裝:

https://marketplace.visualstudio.com/items?itemName=alefragnani.project-manager

以上介紹的都是在日常工作中親測提升效率的插件,另外還有一些主題類的插件網上的推薦很多就不推薦啦!VSCode 提供的擴展插件數量驚人,這也是讓它大受歡迎的原因之一。希望安利的這 7 個插件,可以讓你編程效率有飛越式的提高!

發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章