vscode前端必備擴(kuò)展有哪些? 25個提升開發(fā)幸福感的VSCode擴(kuò)展分享

市場營銷最強(qiáng)策略之一:在人們知道自己需要什么之前幫助他們意識到自己需要什么。這一點(diǎn)上,VSCode深諳其道。
VSCode可能是目前最為流行的代碼編輯器,就是因?yàn)樗鼭M足了每一個開發(fā)人員的需求,甚至可能開發(fā)人員自己都不清楚的需求。這就是VSCode的獨(dú)特魅力。
VSCode是為現(xiàn)代技術(shù)而創(chuàng)建的,因而大多數(shù)VSCode愛好者都是JavaScript開發(fā)人員。目前流行的JavaScript框架對于VSCode來說早已完美無缺,它擁有你所需要的一切。
科技日新月異,選擇文本編輯器時,一定要選最新最好的。優(yōu)秀的開發(fā)人員不能不舍得花時間。但這并不是說應(yīng)該轉(zhuǎn)而學(xué)習(xí)另一種語言,或者另一個框架。
正如筆者在之前的博客中一直強(qiáng)調(diào)的那樣,開發(fā)人員應(yīng)當(dāng)追上潮流,保持敏銳,了解最新信息,并將它們與目前使用的工具進(jìn)行比較,了解其中區(qū)別及其優(yōu)缺點(diǎn),觀察其支撐和在社區(qū)中的發(fā)展,穩(wěn)定至關(guān)重要。這會大大提升你的工作效率。
VSCode擁有一個龐大的開源社區(qū),其發(fā)展和潛力是無限的,本文將為你介紹25個最佳的VSCode擴(kuò)展。
1.Auto-CloseTag
擁有VCSCode擴(kuò)展是必要的。編寫代碼本就困難重重,擁有了VSCode擴(kuò)展,就不需要僅僅因?yàn)槿鄙訇P(guān)閉標(biāo)記()而查找錯誤。
VSCode擴(kuò)展可以自動添加剛剛添加的起始標(biāo)簽的右括號,然后將鼠標(biāo)光標(biāo)放在標(biāo)簽之間。是不是很酷?
2.VisualCode Integrated Terminal
將命令/終端放在VSCode編輯器中不僅會使工作更為輕松,還能節(jié)省空間。有了VSCode,你的終端就派上用場了。
3.ESLint/TSLint
此擴(kuò)展的主要功能是自動格式化代碼,以便在整個團(tuán)隊(duì)中實(shí)現(xiàn)一致的格式化。ESLint也可以配置為自動格式化代碼,無論何時出現(xiàn)錯誤,它都會發(fā)出一連串的警告。
數(shù)百萬的下載量可不是白給的~
4.CodeSpell Checker
如若不是以英語為母語的人,甚至可能也不是第二語言,那么Code Spell Checker對避免代碼出現(xiàn)拼寫錯誤非常有幫助。無論是否能說一口流利的英語,打字錯誤是不可避免的——人們不會想花時間去找錯字,尤其在面對長代碼時。
5.Settings Sync
使用多臺機(jī)器時,該擴(kuò)展將大有幫助。Settings sync讓所有電腦/筆記本電腦依照visual studio的設(shè)置方式實(shí)現(xiàn)同步。
同時在辦公室電腦和家用電腦上工作的開發(fā)人員,基本上會在不同的地點(diǎn)工作。手動更改兩端設(shè)置極為耗時,因?yàn)樾枰鶕?jù)正在做的項(xiàng)目不時更改設(shè)置以便緩解編程壓力。建議使用這個擴(kuò)展,以便將所有所作更改都自動同步到個人電腦和工作點(diǎn)。
6.Bracket Pair Colorizer
括號可謂是痛苦之來源,尤其是在處理大型項(xiàng)目時。當(dāng)使用長代碼時,情況會更糟。Bracket Pair Colorizer將有效緩解這種壓力。
由于有大量嵌套的長代碼,尤其是在使用Javascript時,幾乎不可能確定哪些括號相互匹配。這一工具有助于更容易地找到打開和關(guān)閉,用顏色標(biāo)識括號對將使代碼更具可讀性。趕緊下載吧!
7.Prettier
此前提到了ESLint,它可以自動格式化連續(xù)的代碼,并顯示警告和錯誤。
作為React/Native的開發(fā)人員,保持代碼整齊干凈是必要的。首要的一點(diǎn)就是正確地縮進(jìn)和分隔以便更好地讀取代碼,特別是在處理編寫已久的代碼時——帶有樣式、函數(shù)和處理程序的分隔非常重要,不僅方便自己,也方便了同事。要設(shè)置很簡單,點(diǎn)擊保存時即可自動格式化。
8.PathIntellisense
該擴(kuò)展是筆者常用VSCode擴(kuò)展之一。它可以節(jié)省很多時間。作為一名前端開發(fā)人員,筆者時常健忘,但又需要用到大量的組件、擴(kuò)展和安裝包,特別是在使用React格式化時,因此,需要一些有助于處理文件路徑的東西。
大型項(xiàng)目中的工作麻煩多多,pathIntellisense將是你的左臂右膀。當(dāng)嘗試在引文中輸入一條路徑時,智能感知會自動填寫或顯示建議。路徑智能感知還可以幫助自動完成所有隱藏文件。
9.BrowserPreview
該擴(kuò)展對于前端開發(fā)人員而言必不可少。與其在Chrome中打開另一個窗口來瀏覽在代碼中所做的更改,不如下載這個瀏覽器進(jìn)行預(yù)覽,這樣在VSCod中即可完成所有的工作。
該擴(kuò)展可顯示代碼的瀏覽器預(yù)覽,因此不必在瀏覽器上打開標(biāo)簽就可以看到一些小改動,大大了節(jié)省時間和空間。
10.Debuggerfor Chrome
這是筆者最愛和使用最多的VSCode擴(kuò)展。作為一個前端網(wǎng)頁移動開發(fā)者,Debugger for Chrome為筆者提供了很大的幫助。特別是對于JavaScript開發(fā)人員來說,它可以節(jié)省很多做小改動的時間,有助于快速地找到并解決bug,對調(diào)試非常有幫助。
想要查找錯誤來自哪些行和函數(shù),甚至查看其數(shù)據(jù)處理,控制臺可以提供很大的幫助。
11.MaterialIcon Theme
相關(guān)文章
VSCode如何更新? VSCode手動更新與自動更新的設(shè)置方法
VSCode如何更新? VSCode之前設(shè)置過禁止自動更新,如果有版本更新可以自己選擇更或者不更,下面我們就來看看VSCode手動更新與自動更新的設(shè)置方法2022-06-10VSCode怎么設(shè)置保護(hù)套? VSCode保護(hù)套開啟和關(guān)閉方法
VSCode怎么設(shè)置保護(hù)套?經(jīng)常使用VSCode編程開發(fā),有時候需要保護(hù)套,該怎么開啟或者關(guān)閉呢?下面我們就來看看VSCode保護(hù)套開啟和關(guān)閉方法2022-06-10VSCode鼠標(biāo)懸停顯示提示框怎么關(guān)? VSCode關(guān)閉顯示鏈接懸停的技巧
VSCode鼠標(biāo)懸停顯示提示框怎么關(guān)?Visual Studio Code軟件鼠標(biāo)經(jīng)過代碼,如果有停頓會顯示一個提示框,想要關(guān)閉,該怎么關(guān)閉呢?下面我們就來看看VSCode關(guān)閉顯示鏈接懸停的2022-06-10VSCode總顯示退出警報(bào)怎么關(guān)? VSCode關(guān)閉顯示退出警報(bào)的技巧
VSCode總顯示退出警報(bào)怎么關(guān)?VSCode每次關(guān)閉都會提示退出警告,這個是可以關(guān)閉的,該怎么設(shè)置呢?下面我們就來看看VSCode關(guān)閉顯示退出警報(bào)的技巧2022-06-07- VS Code隱藏的單元格狀態(tài)欄怎么顯示出來?Visual Studio Code中想要設(shè)置狀態(tài)欄的情況,該怎么設(shè)置呢?下面我們就來看看詳細(xì)的教程2022-06-02
VS Code右鍵單擊快捷操作怎么設(shè)置? vscode右鍵快捷方式設(shè)置技巧
VS Code右鍵單擊快捷操作怎么設(shè)置?VS Code中右鍵單擊是可以進(jìn)行快捷操作的,該怎么設(shè)置右鍵的功能呢?下面我們就來看看vscode右鍵快捷方式設(shè)置技巧2022-06-02vs code有哪些好看的主題? 15個VS Code主題推薦排行榜介紹
vs code有哪些好看的主題?vs code軟件可以使用的主題有很多,很多朋友不知道該怎么算則,今天我們就來介紹一下15個VS Code主題排行榜,詳細(xì)請看下文介紹2022-05-23VS Code怎么設(shè)置每行代碼長度? VSCode文本行限制為35的技巧
VS Code怎么設(shè)置每行代碼長度?VS Code代碼為了排版更整潔,想要設(shè)置文本行限制,該怎么設(shè)置呢?下面我們就來看看VSCode文本行限制為35的技巧2022-05-19- VS Code怎么將所有未知屬性設(shè)置未錯誤呢?Visual Studio Code中有很多不知道的屬性,這時候可以設(shè)置未錯誤,該怎么設(shè)置呢?詳細(xì)請看下文提示2022-05-19
VS Code中怎么關(guān)閉mac選項(xiàng)是meta?
VS Code中怎么關(guān)閉mac選項(xiàng)是meta?Visual Studio Code中想要設(shè)置mac配置,該怎么設(shè)置呢?下面我們就來看看詳細(xì)的教程2022-05-19