建站
咨詢
售后
建站咨詢
新聞中心
Visual Studio Code （VSCode）是微軟的一個(gè)免費(fèi)的開源代碼編輯器，它非常輕巧、靈活，資源占用少，內(nèi)置功能強(qiáng)大，支持絕大多數(shù)流行的編程語言。VSCode 用當(dāng)前大火的 TypeScript 開發(fā)，基于 electron 框架，底層 Node.js 對前端來說非常友好，簡直就是一款為前端量身定。
專注于為中小企業(yè)提供成都網(wǎng)站建設(shè)、網(wǎng)站制作服務(wù),電腦端+手機(jī)端+微信端的三站合一,更高效的管理,為中小企業(yè)新邱免費(fèi)做網(wǎng)站提供優(yōu)質(zhì)的服務(wù)。我們立足成都，凝聚了一批互聯(lián)網(wǎng)行業(yè)人才，有力地推動(dòng)了上千多家企業(yè)的穩(wěn)健成長，幫助中小企業(yè)通過網(wǎng)站建設(shè)實(shí)現(xiàn)規(guī)模擴(kuò)充和轉(zhuǎn)變。
VSCode 受到大家熱烈追捧的一個(gè)非常重要原因就是：它擁有規(guī)模超大的擴(kuò)展插件，開發(fā)者可以根據(jù)需求，在 Marketpalce 查找并安裝各種各樣免費(fèi)擴(kuò)展、可用于支持新語言、調(diào)試代碼或添加各種其他自定義功能的插件。俗話說“插件用的好，編程沒煩惱”，接下來就盤點(diǎn) 7 個(gè)提升前端編程效率的 VSCode 插件。
Git 增強(qiáng)：GitLens
GitLens增強(qiáng)了 VSCode 中內(nèi)置的 Git 功能，它能夠提供更多的版本控制功能來增強(qiáng)你的VSCode。GitLens 提供了對代碼的深入分析功能，可以顯示更改時(shí)間以及更改后的代碼。通過使用 GitLens 甚至可以比較不同的分支、標(biāo)簽和提交。
點(diǎn)擊安裝：
https://marketplace.visualstudio.com/items?itemName=eamodio.gitlens
代碼檢查：ESLint
JavaScript 是一門非常靈活的語言，也很困難。ESLint 是一個(gè)插件化的 javascript 代碼檢測工具，有了它就可以進(jìn)行常見的 JavaScript 代碼錯(cuò)誤檢查，和代碼風(fēng)格檢查。這樣我們就可以根據(jù)自己的要求指定一套 ESLint 配置，然后應(yīng)用到所編寫的項(xiàng)目上，從而實(shí)現(xiàn)輔助編碼規(guī)范的執(zhí)行，有效控制項(xiàng)目代碼的質(zhì)量。
點(diǎn)擊安裝：
https://marketplace.visualstudio.com/items?itemName=dbaeumer.vscode-eslint
前后端聯(lián)調(diào)：Cloud Toolkit
在前后端聯(lián)調(diào)開發(fā)的過程中，后端環(huán)境復(fù)雜多樣，通常會(huì)涉及跨域、Cookie、Header鑒權(quán)以及更復(fù)雜的跨堡壘機(jī)調(diào)用等問題，有時(shí)候還會(huì)遇到一對多聯(lián)調(diào)的情況，Alibaba Cloud Toolkit 插件對于聯(lián)調(diào)環(huán)境切換非常有用。
它的 HTTP Proxy 功能提供了專業(yè)的前后端聯(lián)調(diào)代理方案，開發(fā)小白不用閱讀很多文檔即就能迅速上手。這個(gè)插件還能解決包括帶鑒權(quán)調(diào)試，跨堡壘機(jī)調(diào)試等復(fù)雜的聯(lián)調(diào)場景問題，方便管理不同的調(diào)試環(huán)境，可以“無重啟”調(diào)試環(huán)境切換將復(fù)雜的業(yè)務(wù)調(diào)試請求簡化，調(diào)測效率迅速提高。有了它，Nginx 和 Charles 這樣的復(fù)雜的代理工具再也不用安裝了。
點(diǎn)擊安裝：
https://marketplace.visualstudio.com/items?itemName=alibabacloud-cloudtoolkit.toolkit-vscode
環(huán)境同步：Settings Sync
Settings Sync 可以同步你當(dāng)前的 VSCode配置環(huán)境，當(dāng)你需要在其它的電腦工作時(shí)，新機(jī)器登錄一下就搞定了，再也不用折騰環(huán)境了。將你所有的編輯器配置同步到 gist，省得在新設(shè)備上重新安裝。
點(diǎn)擊安裝：
https://marketplace.visualstudio.com/items?itemName=Shan.code-settings-sync
項(xiàng)目管理：Project Manager
這個(gè)插件是多項(xiàng)目管理神器，可以在你的編輯器中快速切換項(xiàng)目。
點(diǎn)擊安裝：
https://marketplace.visualstudio.com/items?itemName=alefragnani.project-manager
自動(dòng)路徑提示：Path Intellisense
這個(gè)插件很簡單，就是會(huì)自動(dòng)給你提示相關(guān)的文件路徑，比如：當(dāng)你在 HTML 通過 script 標(biāo)簽要引入一個(gè)文件的時(shí)候，你直接在 src 中它就會(huì)根據(jù)你的輸入給你提示目錄中有的文件名；或者你通過 node require 一個(gè)文件的時(shí)候也是一樣會(huì)給你提示，這樣你就不用再去記文件名了，也不會(huì)因?yàn)槲募磳戝e(cuò)誤或者路徑層級(jí)搞錯(cuò)而發(fā)生加載失敗的問題了。
點(diǎn)擊安裝：
https://marketplace.visualstudio.com/items?itemName=christian-kohler.path-intellisense
EditorConfig for VS Code
在公司工作，一定會(huì)遇到多個(gè)人參與一個(gè)項(xiàng)目的情況，即使的團(tuán)隊(duì)中使用多中 IDE 和編輯器，也可以用針對 VS Code 的 EditorConfig 來實(shí)現(xiàn)一致性。EditorConfig包含一個(gè)用于定義代碼格式的文件和一批編輯器插件，這些插件是讓編輯器讀取配置文件并以此來格式化代碼。
點(diǎn)擊安裝：
https://marketplace.visualstudio.com/items?itemName=alefragnani.project-manager
以上介紹的都是在日常工作中親測提升效率的插件，另外還有一些主題類的插件網(wǎng)上的推薦很多就不推薦啦！VSCode 提供的擴(kuò)展插件數(shù)量驚人，這也是讓它大受歡迎的原因之一。希望安利的這 7 個(gè)插件，可以讓你編程效率有飛越式的提高！
文章題目：用好這7個(gè)VSCode插件，前端編程效率蹭蹭漲
文章位置：http://www.dlmjj.cn/article/ccedcjp.html
