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

作者：佚名 2020-04-22 14:35:10

俗話說“插件用的好，編程沒煩惱”，接下來就盤點 7 個提升前端編程效率的 VSCode 插件。

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 一個文件的時候也是一樣會給你提示，這樣你就不用再去記文件名了，也不會因為文件名拼寫錯誤或者路徑層級搞錯而發生加載失敗的問題了。