免費(fèi)、開(kāi)源、功能強(qiáng)大，vscode幾乎是前端工程師們必備的輕量級(jí)代碼編輯器。

它幾乎支持所有主流的程序語(yǔ)言的語(yǔ)法高亮、智能代碼補(bǔ)全、自定義熱鍵、括號(hào)匹配等特性，支持插件擴(kuò)展，并針對(duì)網(wǎng)頁(yè)開(kāi)發(fā)和云端應(yīng)用開(kāi)發(fā)做了優(yōu)化。

其他的代碼編輯器在打開(kāi)超大文件時(shí)可能會(huì)產(chǎn)生明顯的卡頓，但vscode幾乎就是秒開(kāi)。因?yàn)榇蜷_(kāi)速度特別快，vscode還經(jīng)常被用作普通文本閱讀器。

但有時(shí)需要輸入的代碼量比較大，在編輯的時(shí)候容易出現(xiàn)各種各樣的小bug，檢查修改起來(lái)十分費(fèi)力。這個(gè)時(shí)候，在vscode中安裝幾款插件，就可以實(shí)現(xiàn)輕松改查，一鍵格式對(duì)正，提高編程效率。

今天，小渡就為大家推薦8款入門(mén)級(jí)vscode插件，帶你完成從顏值到功能的全方位提升。話不多說(shuō)，一起來(lái)看看吧！

1、顏值提升利器：Material Theme

MaterialTheme是一款vscode主題插件，通過(guò)選擇不同的主題樣式，不僅可以調(diào)整代碼編輯器主題顏色，也能同時(shí)對(duì)代碼顏色進(jìn)行適配，讓編輯器界面更加清爽和美觀。

目前，MaterialTheme提供了十種主題顏色，在vscode中可實(shí)現(xiàn)一鍵安裝，輕松換色。

欲先攻其事，必先利其器。賞心悅目的代碼編輯器界面，也會(huì)讓寫(xiě)代碼的過(guò)程變得趣味十足。

2、治好你的“代碼強(qiáng)迫癥”：Prettier

在多人開(kāi)發(fā)同一個(gè)項(xiàng)目，合并代碼時(shí)，經(jīng)常會(huì)遇到各人代碼風(fēng)格迥異，換行空格亂七八糟，2格、4格縮進(jìn)交替上演等等如此令人崩潰的狀況，而單人開(kāi)發(fā)時(shí)，一些小錯(cuò)誤也不可避免，簡(jiǎn)直像張東升一樣分分鐘把強(qiáng)迫癥逼上懸崖。

這個(gè)時(shí)候，就需要Prettier閃亮登場(chǎng)了。Prettier是VSCode代碼格式增強(qiáng)工具，一個(gè)配置文件，配合vscode，保存即將代碼全部格式化。代碼格式統(tǒng)一的問(wèn)題，交給Prettier再合適不過(guò)了，輕松治好你的“代碼強(qiáng)迫癥”。

不過(guò)Prettier只關(guān)心格式化文件（最大長(zhǎng)度、混合標(biāo)簽和空格、引用樣式等），這顯然是不夠的，項(xiàng)目運(yùn)行中還是需要引入ESlint，二者配合才能讓項(xiàng)目代碼“茁壯成長(zhǎng)”。

3、括號(hào)連連看：Bracket Pair Colorizer 2

除了各種字母和單詞，編程中最常見(jiàn)的就是各種各樣的括號(hào)了。隨著代碼量的增多，{[()]}天團(tuán)開(kāi)始瘋狂嵌套，這還讓我們?cè)趺从淇斓腸odereview 或者改代碼？

還好有它——BracketPair Colorizer 2！這是一款在vscode上擁有五星好評(píng)的王者軟件，為代碼中的各種結(jié)對(duì)的括號(hào)兄弟們提供了顏色高亮等功能。

除此之外，BracketPair Colorizer 2還提供了各種的配置選項(xiàng)，包括顏色的唯一性的設(shè)置、顏色模式、設(shè)置選中括號(hào)時(shí)，相應(yīng)匹配括號(hào)的CSS、是否在Gutter中顯示選中的括號(hào)、是否顯示ScopeLine等等，可以滿足你對(duì)顏色高亮的不同需求。

小伙伴們還猶豫什么！不要睡，安它！

4、html自動(dòng)重命名插件：Auto Rename Tag

AutoRename Tag的特征是自動(dòng)重命名配對(duì)的HTML/ XML 標(biāo)簽，也可以在JSX中使用。在settings.json文件中的auto-rename-tag.activationOnLanguage中添加一項(xiàng)以設(shè)置擴(kuò)展名將被激活的語(yǔ)言。默認(rèn)情況下，它是**[“*”]**，將為所有語(yǔ)言激活。

修改html標(biāo)簽，AutoRename Tag將自動(dòng)幫你完成尾部閉合標(biāo)簽的同步修改。

5、幫助你快速找到css代碼：Css peek

CSSPeek插件擴(kuò)展了HTML和ejs代碼編輯功能，支持在源代碼中的字符串中找到css/scss/less(類和id)。這在很大程度上是受方括號(hào)中稱為CSS內(nèi)聯(lián)編輯器的類似功能的啟發(fā)。

這個(gè)擴(kuò)展支持所有正常的符號(hào)定義跟蹤功能，但它針對(duì)的是css選擇器(類、id和HTML標(biāo)記)。這包括：

查找：以內(nèi)聯(lián)方式加載css文件并在那里進(jìn)行快速編輯(Alt+F12)

轉(zhuǎn)到定義：直接跳轉(zhuǎn)到css文件或在新編輯器中打開(kāi)它(F12)

鼠標(biāo)懸停：用鼠標(biāo)懸停在符號(hào)上顯示定義(Ctrl+ Hover)

此外，如果已經(jīng)知道類名或ID名，Csspeek還可以在你的html中鼠標(biāo)指向某個(gè)class或者id名稱，按住Ctrl鍵+鼠標(biāo)左鍵可以直接定位到該名稱的CSS的位置，并快速跳轉(zhuǎn)到正確的CSS/SCSS/LESS代碼，可以說(shuō)是大大提高了開(kāi)發(fā)效率。

6、換機(jī)不用愁：Settings Sync

Vscode上又一位五星好評(píng)大佬級(jí)插件——代碼同步工具SettingsSync。它是基于GitHubTokens 和GitHubGist 功能實(shí)現(xiàn)，可以一鍵輕松實(shí)現(xiàn)上傳下載跨多臺(tái)機(jī)器同步設(shè)置、代碼片段、主題、文件圖標(biāo)、啟動(dòng)、鍵綁定、工作區(qū)和擴(kuò)展。

因?yàn)閂scode不像webstorm那樣幾乎集成了所有需要的插件，它需要一個(gè)個(gè)手動(dòng)安裝。但在插件多了之后，如果更換了設(shè)備，來(lái)回安裝vscode插件及快捷鍵配置會(huì)很麻煩。

這時(shí)，用SettingsSync插件就可以輕松解決這個(gè)問(wèn)題，通過(guò)配置文件的形式，就可以在多個(gè)設(shè)備之間同步vscode的配置了，非常好用。

7、圖像預(yù)覽工具：Image preview

Imagepreview是一款非常實(shí)用的圖像預(yù)覽工具。作為一款vscode五星好評(píng)的圖片工具，它會(huì)根據(jù)路徑在鼠標(biāo)懸停時(shí)，在代碼欄顯示圖片及其尺寸，很大程度上節(jié)約了我們翻閱圖片的時(shí)間與精力。

8、點(diǎn)亮匹配標(biāo)簽：Highlight Matching Tag

HighlightMatchingTag是一款突出顯示匹配的開(kāi)始或結(jié)束標(biāo)簽，它的原理其實(shí)和instant-rename-tag完全是一樣的，只是綁定了不同的事件hook。

1、 通過(guò) post-command-hook 監(jiān)聽(tīng)光標(biāo)移動(dòng)事件，如果當(dāng)前處于 web-mode 模式時(shí)繼續(xù)處理

2、 如果光標(biāo)在Tag區(qū)域，找到匹配的光標(biāo)，然后用 Overlay 高亮匹配的標(biāo)簽

3、 如果光標(biāo)不在Tag區(qū)域，隱藏標(biāo)簽高亮

在安裝HighlightMatching Tag插件后，可以在用戶設(shè)置中自定義配對(duì)光標(biāo)。

除了一些好用的插件之外，還有一些實(shí)用的vscode快捷鍵，也可以提高工作效率噢——

Ctrl+ P ：轉(zhuǎn)到文件，您可以在VisualStudio Code 中移動(dòng)到打開(kāi)的文件/文件夾的任何文件。

Ctrl+ ` ：在VSCode 中打開(kāi)terminal

Alt+ Down：下移一行

Alt+ Up：上移一行

Ctrl+ D：將選定的字符移動(dòng)到下一個(gè)匹配字符串上

Ctrl+ Space：觸發(fā)建議

Shift+ Alt + Down：向下復(fù)制行

Shift+ Alt + Up：向上復(fù)制行

Ctrl+ Shift + T：重新打開(kāi)最新關(guān)閉的窗口