建站
咨詢(xún)
售后
建站咨詢(xún)
新聞中心
微軟的 VS (Visual Studio) Code 是一個(gè)免費(fèi)的開(kāi)源代碼編輯器，最近越來(lái)越受歡迎。它非常輕巧、靈活，同時(shí)也提供了很多強(qiáng)大的功能。它支持絕大多數(shù)流行的編程語(yǔ)言，包括PHP、JavaScript、C++ 等。
成都創(chuàng)新互聯(lián)公司10多年成都企業(yè)網(wǎng)站建設(shè)服務(wù);為您提供網(wǎng)站建設(shè),網(wǎng)站制作,網(wǎng)頁(yè)設(shè)計(jì)及高端網(wǎng)站定制服務(wù),成都企業(yè)網(wǎng)站建設(shè)及推廣,對(duì)玻璃隔斷等多個(gè)領(lǐng)域擁有豐富的網(wǎng)站制作經(jīng)驗(yàn)的網(wǎng)站建設(shè)公司。
VS Code 是跨平臺(tái)的。它不僅能用于 Windows 平臺(tái)，同時(shí)也提供 Linux 和 Mac 版本。下載地址：https://code.visualstudio.com/。
但也許最酷的是 VS Code 提供了規(guī)模超大的擴(kuò)展插件，在擴(kuò)展 商店 有大量的免費(fèi)擴(kuò)展可用于支持新語(yǔ)言、調(diào)試代碼或添加各種其他自定義功能。你可以靈活的配置自己的編輯器，更好地滿(mǎn)足日常開(kāi)發(fā)的需要。
下面將給你介紹一些適合前端的 VS Code 擴(kuò)展插件。
Git增強(qiáng)：GitLens
GitLens
雖然Git功能已內(nèi)置于 VS Code 中，但 GitLens 能夠提供更多的版本控制功能來(lái)“增強(qiáng)”你的編輯器。它提供了對(duì)代碼的深入分析功能，可以向你顯示更改時(shí)間以及更改后的代碼。你甚至可以比較不同的分支、標(biāo)簽和提交?？偟膩?lái)說(shuō)，這個(gè)擴(kuò)展插件會(huì)讓你擁有全新的視覺(jué)感受。
更多詳情：
https://marketplace.visualstudio.com/items?itemName=eamodio.gitlens
語(yǔ)法高亮：Beautify
Beautify
你是否非常依賴(lài)語(yǔ)法高亮顯示？如果是的話(huà)，Beautify 正是你需要的。它利用了 VS Code 中已有的 Online JavaScript Beautifier，允許你輕松更改其樣式。這意味著你可以根據(jù)內(nèi)容設(shè)置縮進(jìn)、換行和其他細(xì)節(jié)。
更多詳情：
https://marketplace.visualstudio.com/items?itemName=HookyQR.beautify
代碼檢查：ESLint
ESLint
JavaScript 可能很難調(diào)試。但 ESLint 擴(kuò)展可以使這個(gè)過(guò)程更容易。它能夠在執(zhí)行代碼之前幫你指出其中潛在的問(wèn)題。更強(qiáng)大的是它允許你創(chuàng)建自己的 linting 規(guī)則。
更多詳情：
https://marketplace.visualstudio.com/items?itemName=dbaeumer.vscode-eslint
調(diào)試器：Debugger for Chrome
Debugger for Chrome
對(duì)于在運(yùn)行時(shí)期間對(duì)代碼進(jìn)行調(diào)試的開(kāi)發(fā)人員，Debugger for Chrome 將幫你更好的完成工作。它有許多方便的功能，包括在代碼、watches 和控制臺(tái)中設(shè)置斷點(diǎn)的功能。另外你可以在 VS Code 中運(yùn)行Chrome實(shí)例，或把調(diào)試器附加到單獨(dú)運(yùn)行的瀏覽器實(shí)例。
更多信息：
https://marketplace.visualstudio.com/items?itemName=msjsdiag.debugger-for-chrome
環(huán)境增強(qiáng)：React Native Tools
React Native Tools
React 是最引人注目的JS庫(kù)之一 —— 以至于新的 WordPress 塊編輯器（又名 Gutenberg）是基于它建立的。如果你是眾多的 React 程序員之一，那么React Native Tools是必不可少的擴(kuò)展。它增加了運(yùn)行 react-native 命令的功能，還能幫助你調(diào)試自己的代碼。
更多信息：
https://marketplace.visualstudio.com/items?itemName=vsmobile.vscode-react-native
界面主題：One Dark Pro
One Dark Pro
在敲代碼時(shí)，有一個(gè)醒目且養(yǎng)眼的界面主題會(huì)很有幫助。畢竟編碼過(guò)程可以持續(xù)好幾個(gè)小時(shí)。 One Dark Pro 把Atom 編輯器中流行的 “One Dark” 主題帶到了 VS Code。
更多信息：
https://marketplace.visualstudio.com/items?itemName=zhuangtongfa.Material-theme
代碼增強(qiáng)：Bracket Pair Colorizer 2
Bracket Pair Colorizer 2
Bracket Pair Colorizer 2 是一個(gè)簡(jiǎn)單的擴(kuò)展，可以使代碼更容易閱讀。它可以對(duì)匹配括號(hào)的對(duì)代碼著色，使你可以非常直觀地確定函數(shù)的開(kāi)始和結(jié)束位置。還可以選擇要使用的顏色。
更多信息：
https://marketplace.visualstudio.com/items?itemName=CoenraadS.bracket-pair-colorizer-2
視覺(jué)增強(qiáng)：vscode-icons
vscode-icons
也許 vscode-icons 是 VS Code 最有效的視覺(jué)調(diào)整擴(kuò)展之一。它能夠處理你項(xiàng)目中平淡的文件列表，并添加豐富多彩、表示特定語(yǔ)言的圖標(biāo)。這樣可以很容易地讓你知道代碼文件的類(lèi)型。能夠給工作區(qū)添加個(gè)性化設(shè)置是非常受歡迎的功能。
更多信息：
https://marketplace.visualstudio.com/items?itemName=robertohuertasm.vscode-icons
按自己的方式編寫(xiě)代碼
VS Code 提供的擴(kuò)展插件數(shù)量驚人，這使其成為吸引力的編輯器。你可以自由的進(jìn)行設(shè)置，來(lái)匹配自己使用的語(yǔ)言和設(shè)置喜歡的工作區(qū)視覺(jué)效果。
此外，它還提供了企業(yè)和開(kāi)源文化的有趣組合。 VS Code 得到了微軟的支持，能夠確保未來(lái)會(huì)得到更好的維護(hù)。開(kāi)源社區(qū)圍繞軟件創(chuàng)建了一個(gè)欣欣向榮的生態(tài)系統(tǒng)，可以稱(chēng)作是企業(yè)與開(kāi)源文化相結(jié)合的典范。
當(dāng)前題目：8 個(gè)給前端的 VS Code 擴(kuò)展插件
文章源于：http://www.dlmjj.cn/article/dhjipjo.html
