VScode開發(fā)工具的使用教程

VScode開發(fā)?具的使?教程前??欲善其事必先利其器，提?程序員的開發(fā)效率必須要有?個好的開發(fā)?具，當(dāng)前最好的前端開發(fā)VS?c具od主e、要s有ublime、ATexttom、Webstorm、Notepad++。VSCode是?款?分強?的代碼編輯器，雖然出來時間?較短，但是使?頻率和受歡迎率已經(jīng)遠遠超過了其他的編輯器，VScode適?于?乎所有的編程與和開發(fā)任務(wù)，包含了?常豐富的應(yīng)?插件，?常?便，越來越多的新?代互聯(lián)?青年正在使?它。其實VSCode這款軟件本?，是?JavaScript語?編寫的，是?款基于Electron框架編寫的客戶端編輯器，如果喜歡研究源碼可以去github下載源碼進?研究，Electron使?和后章節(jié)中介紹（具體請??查閱基于JS的PC客戶端開發(fā)框架Electron）。JeffAtwood在2007年提出了著名的Atwood定律：任何能夠?JavaScript實現(xiàn)的應(yīng)?系統(tǒng)，最終都必將?JavaScript實現(xiàn)。?站的聯(lián)合創(chuàng)始?），重要的是這條定律。JeffAtwood這個?是誰不重要（他是StackOverflow前端?前是處在春秋戰(zhàn)國時代，各路英雄豪杰成為后浪，各種框架?具層出不窮，VSCode軟件?疑是?前端時代最驕傲的?具。如果你是做前端開發(fā)（JavaScript編程語?為主），則完全可以將VSCode作為「主?開發(fā)?具」。這款軟件是為前端同學(xué)量?定制的。如果你是做其他語??向的開發(fā)，并且不需要太復(fù)雜的集成開發(fā)環(huán)境，那么，你可以把VSCode作為「代碼編輯器」來使?，縱享絲滑。甚?是?些寫?檔、寫作的同學(xué)，也經(jīng)常把VSCode作為markdown寫作?具，毫?違和感。退?求其次，即便你不屬于以上任何范疇，你還可以把VSCode當(dāng)作最簡單的?本編輯器來使?，完勝Windows系統(tǒng)?帶的記事本。以下是對VSCode基本使?的介紹：?、VSCode的介紹VSCode的全稱是VisualStudioCode，是?款開源的、免費的、跨平臺的、?性能的、輕量級的代碼編輯器。它在性能、語??持、開源社區(qū)??，都做得很不錯。微軟有兩種軟件：?種是VSCode，?種是VSIDE。VSCode是?款開發(fā)者的代碼編輯器，提供了各種便攜的插件使?；VSIDE是微軟的重量級IDE?具，??集成了各種開發(fā)環(huán)境的編譯?具，特別是開發(fā)后端服務(wù)器編程，提供了完整的C/C++、Java、Python、Go、Android等集成開發(fā)?具。類似于Eclipse，IDE只需要?鍵安裝即可。IDE與編輯器的對?IDE和編輯器是有區(qū)別的：IDE（IntegratedDevelopment，集Environment?的?持，因此?較笨重。?如Eclipse的定位就是IDE。還有很多優(yōu)秀的IDE?具，例如：VisualBasic成開發(fā)環(huán)境）：對代碼有較好的智能提?和相互跳轉(zhuǎn)，同時側(cè)重于?程項?，對項?的開發(fā)、調(diào)試?作有較好的圖像化界：6.0VisualC++：6.0DevC++：VisualStudio2015-2019：QTCreator：Eclipse：IDEA：PyCharm：編輯器：要相對輕量許多，側(cè)重于?本的編輯。?如Sublime的Text定位就是編輯器。再?如Windows系統(tǒng)?帶的「記事本」就是最簡單的編輯器。需要注意的是，VSCode的定位是編輯器，??IDE，但VSCode???般的編輯器的功能要豐富許多?？梢赃@樣理解：VSCode的體量是介于編輯器和IDE之間。程序員常?的?些優(yōu)秀的編輯器例如：VSCode、Sublime、TextEditplus、Notepad++、vim、Atom、Webstorm、chocolatapp、textpad等等?！疺SCode的特點VSCode的使命，是讓開發(fā)者在編輯器?擁有IDE那樣的開發(fā)體驗，?如代碼的智能提?、語法檢查、圖形化的調(diào)試?具、插件擴展、版本管理等。VSCode是?款免費的、開源的、?性能的、跨平臺的、輕量級的代碼編輯器，同時，在性能，語??持、開源社區(qū)??也做的很不錯！跨平臺?持MacOS、Windows和Linux等多個平臺。VSCode的源代碼以MIT協(xié)議開源。?持第三?插件，功能強?，?態(tài)系統(tǒng)完善。VSCode?帶了JavaScri、TypetScript和Node.js的?持。也就是說，你在書寫JS和TS時，是?帶智能提?的。當(dāng)然，其他的語?，你可以安裝相應(yīng)的擴展包插件，也會有智能提?。前端編輯器：VSCode與WebStorm、SublimeText經(jīng)?？吹竭@樣的問題：哪個編輯器/IDE好?？是VSCode還是WebStorm（WebStorm其實是IntelliJIDEA的定制版）？我來做個對?：哪個更酷：顯然VSCode更酷。內(nèi)存占?情況：根據(jù)我的觀察，VSCode是很占內(nèi)存的（尤其是當(dāng)你打開多個窗?的時候），但如果你的內(nèi)存條夠?，使?起來是不會有任何卡頓的感覺的。相?之下，IntelliJIDEA不僅?常占內(nèi)存，?且還??？D。如果你想換個既輕量級、?不占內(nèi)存的編輯器，最好還是使?「SublimeTex」t編輯器。使??例：當(dāng)然是VSCode更勝?籌。先不說別的，我就拿數(shù)據(jù)說話，我?前所在的研發(fā)團隊有200?左右（120個后臺、80個前端），他們絕?部分?都在?VSCode編碼，妥妥的。如果想快速輕量級開發(fā)可以選擇sublimeText3也.有很多豐富的插件可以使?。所以，?選是VScode，其次是sublimeTex，t3再其次可以選擇其他??喜歡的編輯器。VSCode的安裝VSCode官?：VSCode的安裝很簡單，直接去官?下載安裝包，然后雙擊安裝即可。上圖中，直接點擊download，?鍵下載安裝即可。?、嶄露鋒芒：VSCode快捷鍵VSCode?得熟不熟，?先就看你是否會?快捷鍵。以下列出的內(nèi)容，都是常?快捷鍵，?加粗部分的快捷鍵，使?頻率則?常?。任何?具，掌握20%的技能，?矣應(yīng)對80%的?作。既然如此，你可能會問：那就只保留20%的特性，不久可以滿?80%的?戶了嗎？但我想說的是：那從來都不是同樣的20%，每個?都會?到不同的功能。掌握下?這些?頻核?快捷鍵，你和你的?具，?矣露出鋒芒。1、?作區(qū)快捷鍵Mac快捷鍵Win快捷鍵作?備注Cmd+Shift+CtrPl+Shift，+FP1顯?命令?板Cmd+BCtrl+B顯?/隱藏側(cè)邊欄很實?Cmd+\Ctrl+\創(chuàng)建多個編輯器【重要】抄代碼利器同上重要Cmd+1、2cmd+/-Cmd+JCtrl+、12ctrl+/-Ctrl+J聚焦到第1、第2個編輯器將?作區(qū)放?/縮?（包括代碼字體、左側(cè)導(dǎo)航欄）在投影儀場景經(jīng)常?到顯?/隱藏控制臺Cmd+Shift+CtrNl+Shift+N重新開?個軟件的窗?Cmd+Shift+CtrWl+Shift+W關(guān)閉軟件的當(dāng)前窗?很常?Cmd+NCmd+WCtrl+NCtrl+W新建?件關(guān)閉當(dāng)前?件2、跳轉(zhuǎn)操作Mac快捷鍵Win快捷鍵沒有作?備注Cmd+`在同?個軟件的多個?作區(qū)之間切換使?很頻繁在已經(jīng)打開的多個?件之間進?切換?常實?Cmd+Option左+右?向鍵Ctrl+Pagedown/PageupCtrl+TabCtrl+Tab在已經(jīng)打開的多個?件之間進?跳轉(zhuǎn)不如上?的快捷鍵快在當(dāng)前?件的各種?法之間進?跳轉(zhuǎn)跳轉(zhuǎn)到指定?Cmd+Shift+OCtrl+GCtrl+shift+OCtrl+GCmd+Shift+\Ctrl+Shift+\跳轉(zhuǎn)到匹配的括號3、移動光標(biāo)Mac快捷鍵Win快捷鍵作?備注?向鍵?向鍵在單個字符之間移動光標(biāo)?家都知道很常?option左+右?向鍵Ctrl+左右?向鍵Cmd+左右?向鍵Fn+左右?向鍵在單詞之間移動光標(biāo)在整?之間移動光標(biāo)很常?Cmd+←Cmd+→Cmd+↑Cmd+↓Fn+←（或Win+←）將光標(biāo)定位到當(dāng)前?的最左側(cè)很常?Fn+→（或Win+→）將光標(biāo)定位到當(dāng)前?的最右側(cè)很常?Ctrl+HomeCtrl+End將光標(biāo)定位到?章的第??將光標(biāo)定位到?章的最后??在代碼塊之間移動光標(biāo)Cmd+Shift+\4、編輯操作Mac快捷鍵Win快捷鍵作?備注Cmd+EnterCtrl+Enter在當(dāng)前?的下?新增??，然后跳?該?即使光標(biāo)不在?尾，也能快速向下插???Cmd+Shift+EnterCtrl+Shift+Enter在當(dāng)前?的上?新增??，然后跳?該?即使光標(biāo)不在?尾，也能快速向上插???Option+↑Alt↑+Alt↓+將代碼向上移動將代碼向下移動很常?很常?Option+↓Option+Shift↑Alt++Shift↑將代+碼向上復(fù)制Option+Shift↓Alt++Shift↓將代+碼向下復(fù)制寫重復(fù)代碼的利器5、多光標(biāo)編輯Mac快捷鍵Win快捷鍵作?備注Cmd+Option+上下鍵Ctrl+上Alt下鍵+在連續(xù)的多列上，同時出現(xiàn)光標(biāo)Option+?標(biāo)點擊任意位置Alt?標(biāo)+點擊任意位置在任意位置，同時出現(xiàn)光標(biāo)Option+Shift?標(biāo)拖動+Alt+Shift?標(biāo)拖動+在選中區(qū)域的每??末尾，出現(xiàn)光標(biāo)Cmd+Shift+LCtrl+Shift+在L選中?本的所有相同內(nèi)容處，出現(xiàn)光標(biāo)其他的多光標(biāo)編輯操作：（很重要）選中某個?本，然后反復(fù)按住快捷鍵「Cmd+」D鍵（windows?戶是按住「Ctrl」+鍵）D，即可將全?中相同的詞逐?加?選擇?！规I），+既I可在每??的末尾都創(chuàng)建?個光標(biāo)。選中?堆?本后，按住「Option+Shift」鍵（w+inidows?戶是按住「Alt+Shift6、刪除操作Mac快捷鍵Cmd+shiftC+tKrl+Shiftoption+BackspaceCtrl+Backspaceoption+deleteCtrl+deleteWin快捷鍵作?備注刪除整+?K「Cmd+」X的作?是剪切，但也可以刪除整?刪除光標(biāo)之前的?個單詞英?有效，很常?刪除光標(biāo)之后的?個單詞Cmd+BackspaceCmd+delete刪除光標(biāo)之前的整?內(nèi)容很常?刪除光標(biāo)之后的整?內(nèi)容備注：上?所講到的移動光標(biāo)、編輯操作、刪除操作的快捷鍵，在其他編輯器?，?部分都適?。7、編程語?相關(guān)Mac快捷鍵Win快捷鍵作?備注Cmd+/Ctrl+/添加單?注釋很常?Option+ShiftAlt++Fshift代碼格式+化F很常?F2F2以重構(gòu)的?式進?重命名將多?代碼合并為??改代碼備Ctrl+JCmd+Cmd+UWin?戶可在命令?板搜索”合并?“Ctrl+U將光標(biāo)的移動回退到上?個位置撤銷光標(biāo)的移動和選擇8、搜索相關(guān)Mac快捷鍵Win快捷鍵作?備注Cmd+ShiftCt+rlF+Shift全局搜索+F代碼很常?Cmd+PCmd+FCmd+GCtrl+P在當(dāng)前的項??程?，全局搜索?件名Ctrl+F在當(dāng)前?件中搜索代碼，光標(biāo)在搜索框?在當(dāng)前?件中搜索代碼，光標(biāo)仍停留在編輯器?很巧妙F39、?定義快捷鍵按住快捷鍵「Cmd+Shift」，彈+出P命令?板，在命令?板中輸?“快捷鍵”，可以進?快捷鍵的設(shè)置。當(dāng)然，你也可以選擇菜單欄「偏好設(shè)置-->鍵盤快捷?式」，進?快捷鍵的設(shè)置：10、快捷鍵列表你可以點擊VSCode左下?的齒輪按鈕，效果如下：上圖中，在展開的菜單中選擇「鍵盤快捷?式」，就可以查看和修改所有的快捷鍵列表了：快捷鍵參考鏈接快捷鍵速查表[官?]：三、命令?板的使?Mac?戶按住快捷鍵Cmd+Shift+P（Windows?戶按住快捷鍵Ctrl+Shift+P），可以打開命令?板。效果如下：如果們需要修改?些設(shè)置項，可以通過「命令?板」來操作，效率會更?。這?列舉?些。1、設(shè)置字體??在命令?板輸?“字體”，可以進?字體的設(shè)置，效果如下：當(dāng)然，你也可以在菜單欄，選擇「?-選設(shè)項置-常?設(shè)置」，在這個設(shè)置項?修改字體??。2、快捷鍵設(shè)置在命令?板輸?“快捷鍵”，就可以進?快捷鍵的設(shè)置。3、??寫轉(zhuǎn)換選中?本后，在命令?板中輸t?ransfrom，就可以修改?本的??寫了。4、使?命令?啟動VSCode（1）輸?快捷鍵「Cmd+Shift」，+選P擇installcodecommand：（2）使?命令?：code命令：啟動VSCode軟件codepathName/fileName命令：通過VSCode軟件打開指定?錄/指定?件。四、私?訂制：VSCode的常見配置1、VSCode設(shè)置為中?語?Ma?c戶按住快捷鍵Cmd+Shift+P（Windows?戶按住快捷鍵Ctrl+Shift+P），打開命令?板。在命令?板中，輸?ConfigureDisplayLangu或者，我們可以直接安裝插件Chinese(Simplified)LanguagePackforVisualStudioCode安裝完成后，重啟Code。，選擇Instalgeladditionallanguages，然后安裝插件Chinese(Simplified)LanguagePackforVisualStudioCode即可。，是?樣的。VS2、?包屑（Breadcrumb）打開VSCode的設(shè)置項，選擇「?戶設(shè)置->?作臺->導(dǎo)航路徑」，如下圖所?：上圖中，將紅框部分打鉤即可。設(shè)置成功后，我們就可以查看到當(dāng)前?件的「層級結(jié)構(gòu)」，?常?便。如下圖所?：有了這個?包屑導(dǎo)航，我們可以在任意?錄、任意?件之間隨意跳轉(zhuǎn)。3、左右顯?多個編輯器窗?（抄代碼利器）Mac?戶按住快捷鍵，Windows?戶按住快捷鍵Ctrl+\，即可同時打開多個編輯器窗?，效果如下：Cmd+\按快捷鍵「Cmd+1」切換到左邊的窗?，按快捷鍵「Cmd+2」切換到右邊的窗?。隨時隨地，想切就切。學(xué)會了這?招，以后抄代碼的時候，leader再也不?擔(dān)?我抄得慢了，?天?資到?。4、是否顯?代碼的?號VSCode默認顯?代碼的?號。你可以在設(shè)置項?搜索editor.lineNumbers修改設(shè)置，配置項如下：我建議保留這個設(shè)置項，?需修改。5、右側(cè)是否顯?代碼的縮略圖VSCode會在代碼的右側(cè)，默認顯?縮略圖。你可以在設(shè)置項?搜索editor.minimap進?設(shè)置，配置項如下：6、將當(dāng)前?代碼?亮顯?（更改光標(biāo)所在?的背景?）當(dāng)我們把光標(biāo)放在某??時，這??的背景?并沒有發(fā)?變化。如果想?亮顯?當(dāng)前?的代碼，需要設(shè)置兩步：（1）在設(shè)置項?搜索editor.renderLineHighlight，將選項值設(shè)置為all或者line。（2）在設(shè)置項?增加如下內(nèi)容："workbench.colorCustomizations":{"editor.lineHighlightBackground":"#00000090","editor.lineHighlightBorder":"#ffffff30"}上?代碼，第??代碼的意思是：修改光標(biāo)所在?的背景?（背景?設(shè)置為全?，不透明度90%）；第??代碼的意思是：修改光標(biāo)所在?的邊框?。7、改完代碼后?即?動保存?式?：改完代碼后，默認不會?動保存。你可以在設(shè)置項?fil搜es索.autoSave，修改配置項如下：上圖中，我們將配置項修改為onFocusChange之后，那么，當(dāng)光標(biāo)離開該?件后，這個?件就會?動保存了。?常?便。?式?：當(dāng)然，你也可以直接在菜單欄選擇「?件-?動保存」。勾選后，當(dāng)你寫完代碼后，?件會?即實時保存。8、保存代碼后，是否?即格式化保存代碼后，默認不會?即進?代碼的格式化。你可以在設(shè)置項e?di搜t索or.formatOnSave查看該配置項：我覺得這個配置項保持默認就好，不?打鉤。9、空格or制表符VSCode會根據(jù)你所打開的?件來決定該使?空格還是制表。也就是說，如果你的項?中使?的都是制表符，那么，當(dāng)你在寫新的代碼時，按下tab鍵后，編輯器就會識別成制表符。常見的設(shè)置項如下：editor.detectIndentation：?動檢測（默認開啟）。截圖如下：editor.insertSpaces：按Tab鍵時插?空格（默認）。截圖如下：editor.tabSize：?個制表符默認等于四個空格。截圖如下：10、新建?件后的默認?件類型當(dāng)我們按下快捷鍵C「md+」N新建?件時，VSCode默認?法識別這個?件到底是什么類型的，因此也就?法識別相應(yīng)的語法?亮。如果你想修改默認的?件類型，可以在設(shè)置項?搜索files.defaultLanguage，設(shè)置項如下：上圖中的紅框部分，填?你期望的默認?件類型。我填的是html類型，你也可以填寫成javascript或者markdown，或者其他的語?類型。11、刪除?件時，是否彈出確認框當(dāng)我們在VSCode中刪除?件時，默認會彈出確認框。如果你想修改設(shè)置，可以在設(shè)置項?搜索xplorer.confirmDelete。截圖如下：我建議這個設(shè)置項保持默認的打鉤就好，不?修改。刪除?件前的彈窗提?，也是為了安全考慮，萬??賤不??刪了呢？接下來，我們來講?些更?級的配置。12、?件對?VSCode默認?持對?兩個?件的內(nèi)容。選中兩個?件，然后右鍵選擇「將已選項進??較」即可，效果如下：VSCode?帶的對?功能并不夠強?，我們可以安裝插件compareit，進?更豐富的對?。?如說，安裝完插件compareit之后，我們可以將「當(dāng)前?件」與「剪切板」?的內(nèi)容進?對?：13、查找某個函數(shù)在哪些地?被調(diào)?了?如我已經(jīng)在a.js?件?調(diào)?了foo()函數(shù)。那么，如果我想知道foo()函數(shù)在其他?件中是否也被調(diào)?了，該怎么做呢？做法如下：在a.js?件?，選中foo()函數(shù)（或者將光標(biāo)放置在foo()函數(shù)上），然后按住快捷鍵「Shift+F12」，就能看到foo()函數(shù)在哪些地?被調(diào)?了，?較實?。14、?標(biāo)操作在當(dāng)前?的位置，?標(biāo)三擊，可以選中當(dāng)前?。??標(biāo)單擊?件的?號，可以選中當(dāng)前?。在某個?號的位置，上下移動?標(biāo)，可以選中多?。15、重構(gòu)重構(gòu)分很多種，我們來舉?個例?。命名重構(gòu)：當(dāng)我們嘗試去修改某個函數(shù)（或者變量名）時，我們可以把光標(biāo)放在上?，然F后2」按鍵下，「那么，這個函數(shù)（或者變量名）出現(xiàn)的地?都會被修改。?法重構(gòu)：選中某?段代碼，這個時候，代碼的左側(cè)會出現(xiàn)?個「燈泡圖標(biāo)」，點擊這個圖標(biāo)，就可以把這段代碼提取為?個單獨的函數(shù)。16、在當(dāng)前?件中搜索在上?的快捷鍵列表中，我們已經(jīng)知道如下快捷鍵：Cmd+F（Win?戶是Ctrl+）F：在當(dāng)前?件中搜索，光標(biāo)在搜索框?Cmd+G（Win?戶是F3）：在當(dāng)前?件中搜索，光標(biāo)仍停留在編輯器?另外，你可能會注意到，搜索框?有很多按鈕，每個按鈕都對應(yīng)著不同的功能，如下圖所?：上圖中，你可以通過「Tab」鍵和「Shift+Tab」鍵在輸?框和替換框之間進?切換?！冈谶x定內(nèi)容中查找」這個功能還是?較實?的。你也可以在設(shè)置項?搜索editor.find.autoFindInSelection，勾選該設(shè)置項后，那么，當(dāng)你選中指定內(nèi)容后，然后按住「Cmd+F」，就可以?動只在這些內(nèi)容?進?查找。該設(shè)置項如下圖所?：17、全局搜索在上?的快捷鍵列表中，我們已經(jīng)知道如下快捷鍵：Cmd+Shift+（FWin?戶是Ctrl+Shift）：+F在全局的?件夾中進?搜索。效果如下：上圖中，你可以點擊紅框部分，展開更多的配置項。18、Git版本管理VSCode?帶了Git版本管理，如下圖所?：上圖中，我們可以在這?進?常見的git命令操作。如果你還不熟悉Git版本管理，可以先去補補課。與此同時，我建議安裝插件GitLens，它是VSCode中我最推薦的?個插件，簡直是Git神器，碼農(nóng)必備。19、將?作區(qū)放?/縮?我們在上?的設(shè)置項?修改字體??后，僅僅只是修改了代碼的字體??。如果你想要縮放整個?作區(qū)（包括代碼的字體、左側(cè)導(dǎo)航欄的字體等），可以按下cm快d捷+鍵」/-「。windows?戶是按下「ctrl+/-」當(dāng)我們在投影儀上給別?演?代碼的時，候這?招?分管?。如果你想恢復(fù)默認的?作區(qū)??，可以在命令?板輸?重置縮放（英?是resetzoom）20、創(chuàng)建多層??件夾我們可以在新建?件夾的時候，如果直接輸aa?/bb/cc，?如：那么，就可以創(chuàng)建多層??件夾，效果如下：21、.vscode?件夾的作?為了統(tǒng)?團隊的vscode配置，我們可以在項?的根?錄下建?.vscode?錄，在??放置?些配置內(nèi)容，?如：settings.json：?作空間設(shè)置、代碼格式化配置、插件配置。：ftp?件傳輸?shù)呐渲?。sftp.json.vscode?錄?的配置只針對當(dāng)前項?范圍內(nèi)?效。將.vscode提交到代碼倉庫，?家統(tǒng)?配置時，會?常?便。22、?帶終端我們可以按下「Ctrl」+打`開VSCode?帶的終端。我認為內(nèi)置終端并沒有那么好?，我更建議你使?第三?的終端item2。23、markdown語法?持VSCode?帶markdown語法?亮。也就是說，如果你是?markdown格式寫?章，則完全可以?VSCode進?寫作。寫完md?件之后，你可以點擊右上?的按鈕進?預(yù)覽，如下圖所?：我?般是安裝「MarkdownPreviewGithub」插Styling件，以GitHub風(fēng)格預(yù)覽Markdown樣式。樣式?分簡潔美觀。你也可以在控制?板輸?Markdown:打開預(yù)覽，直接全屏預(yù)覽markdown?件。24、EmmetinVSCodeEmmet可以極?的提?html和css的編寫效率，它提供了?種?常簡練的語法規(guī)則。舉個例?，我們在編輯器中輸?縮寫代碼：ul>li*6，然后按下Tab鍵，即可得到如下代碼?段：<ul><li></li><li></li><li></li><li></li><li></li><li></li></ul>VSCode默認?持Emmet。更多Emmet語法規(guī)則，請??查閱。25、修改字體，使?「FiraCode」字體這款字體很漂亮，很適合?來寫代碼：安裝步驟如下：（2）打開VSCode的「設(shè)置」，搜索font，修改相關(guān)配置為如下內(nèi)容："editor.fontFamily":"'FiraCode',Menlo,Monaco,'CourierNew',monospace",//設(shè)置字體顯?"editor.fontLigatures":false,//控制是否啟?字體連字，true啟?，false不啟?上?的第??配置，取決于個?習(xí)慣，我是直接設(shè)置為"editor.fontLigatures":null，因為我不太習(xí)慣連字。26、代碼格式化：Prettier我們可以使?Prettier進?代碼格式化，會讓代碼的展?更加美觀。步驟如下：（1）安裝插件Prettier。（2）在項?的根路徑下，新建?件.prettierrc，并在?件中添加如下內(nèi)容：{"printWidth":150,"tabWidth":4,"semi":true,"singleQuote":true,"trailingComma":"es5","tslintIntegration":true,"insertSpaceBeforeFunctionParenthesis":false}上?的內(nèi)容，是我??的配置，你可以參考。27、?件傳輸：sftp如果你需要將本地?件通過ft的p形式上傳到局域?的服務(wù)器，可以安裝sftp這個插件，很好?。在公司會經(jīng)常?到。步驟如下：（1）安裝插件sftp。（2）配置sftp.json?件。插件安裝完成后，輸?快捷鍵「cmd+shift+P」彈出命令?板，然后輸?sftp:config，回車，當(dāng)前?程的.vscode?件夾下就會?動?成?個sftp.json?件，我們需要在這個?件?配置的內(nèi)容可以是：IP地址host：服務(wù)器的username：?戶名：存放在本地的已配置好的?于登錄?作站的密鑰?件（也可以是ppk：?作站上與本地?程同步的?件夾路徑，需要和本地?程?件根?錄同名，且在使?sft上p傳?件之前，要?動在?作站上mkdir?成這個根?錄sftp:sync的to時候remot忽略的e?件及?件夾，注意每??后?有逗號，最后??沒有逗號舉例如下：(注意，其中的注釋需要去掉)privateKeyPathremotePath?件）ignore：指定在使?{"host":"192.168.xxx.xxx",//服務(wù)器ip端?，sftp模式是22?戶名密碼模式"port":22,//"username":"",//"password":"",//"protocol":"sftp",//"agent":null,"privateKeyPath":null,"passphrase":null,"passive":false,"interactiveAuth":false,"remotePath":"/root/node/build/",//服務(wù)器上的?件地址"context":"./server/build",//本地的?件地址"uploadOnSave":true,//監(jiān)聽保存并上傳"syncMode":"update","watcher":{//監(jiān)聽外部?件"files":false,//外部?件的絕對路徑"autoUpload":false,"autoDelete":false},"ignore":[//忽略項"**/.vscode/**","**/.git/**","**/.DS_Store"]}（3）在VSCode的當(dāng)前?件?，選擇「右鍵->upload」，就可以將本地的代碼上傳到指定的ftp服務(wù)器上（也就是在上?host中配置的服務(wù)器ip）。我們還可以選擇「右鍵->Diffwith」，就Remote可以將本地的代碼和ftp服務(wù)器上的代碼做對?。七、VSCode配置云同步我們可以將配置云同步，這樣的話，當(dāng)我們換個電腦時，即可將配置?鍵同步到本地，就不需要重新安裝插件了，也不需要重新配置軟件。我們還可以把配置分享其他?戶，也可以把其他?戶的配置給???。將??本地的配置云同步G到it：Hub（1）安裝插件settings-sync（2）安裝完插件后，在插件?使?GitHub（3）登錄后在vscode的界?中，可以選擇?個別?的gist。賬號登錄。；也可以忽略掉，然后創(chuàng)建?個屬于??的gist。（4）使?快捷鍵「Command+Shift換另外?個電腦時，從云端同步配置到本地：」，在+彈出P的命令框中輸?sync，并選擇「更新/上傳配置」，這樣就可以把最新的配置上傳到GitHub。（1）當(dāng)我們換另外?臺電腦時，可以先在VSCode中安裝settings-sync（2）安裝完插件后，在插件?使?GitHub（3）登錄之后，插件的界?上，會?動出現(xiàn)之前的同步記錄：插件。賬號登錄。上圖中，我們點擊最新的那條記錄，就可將云端的最新配置同步到本地：如果你遠程的配置沒有成功同步到本地，那可能是?絡(luò)的問題，此時，可以使?快捷鍵「Command+Shift+」，在P彈出的命令框中輸?sync，并選擇「下載配置」，多試?次。使?其他?的配置：如果我們想使?別?的配置，?先需要對?提供給你gist。具體步驟如下：（1）安裝插件settings-sync（2）使?快捷鍵「Command+Shift+（3）在彈出的界?中，選擇「DownloadPublic?！?，在P彈出的命令框中輸?sync，并選擇「下載配置」」，然Gist后輸?別?分享給你的gist。注意，這?步不需要登錄GitHub賬號。?、三頭六臂：VSCode插件推薦VSCode有?個很強?的功能就是?持插件擴展，讓你的編輯器仿佛擁有了三頭六臂。上圖中，點擊紅框部分，即可在輸?框?，查找你想要的插件名，然后進?安裝。我來列舉?個常見的插件，這些插件都很實?。注意：順序越靠前，越實?。1、GitLens【薦】我強烈建議你安裝插G件itLen，s它是VSCode中我最推薦的?個插件，簡直是Git神器，碼農(nóng)必備。如果你不知道，那真是out了。GitLens在Git管理上有很多強?的功能，?如：將光標(biāo)放置在代碼的當(dāng)前?，可以看到這樣代碼的提交者是誰，以及提交時間。這?點，是GitLens最便捷的功能。查看某個commit的代碼改動記錄查看不同的分?可以將兩個commit進?代碼對?甚?可以將兩個branch分?進?整體的代碼對?。這?點，簡直是GitLens最強?的功能。當(dāng)我們在不同分?review代碼的時候，就可以?到這?招。2、GitHistory有些同學(xué)習(xí)慣使?編輯器中的Git管理?具，?不太喜歡要打開另外?個GitUI?具的同學(xué)，這?款插件滿?你查詢所有Git記錄的需求。3、LiveServer【薦】在本地啟動?個服務(wù)器，代碼寫完后可以實現(xiàn)「熱更新」，實時地在?頁中看到運?效果。就不需要每次都得?動刷新頁?了。使??式：安裝插件后，開始寫代碼；代碼寫完后，右鍵O選pe擇n「withLiveServer」。4、Chinese(Simplified)LanguagePackforVisualStudioCode讓軟件顯?為簡體中?語?。5、BracketPairColorizer2：突出成對的括號【薦】BracketPairColorizer2插件：以不同顏?成對的括號，并?連線標(biāo)注括號范圍。簡稱彩虹括號。另外，還有個RainbowBrackets插件，也可以突出成對的括號。6、sftp：?件傳輸【薦】如果你需要將本地?件通f過tp的形式上傳到局域?的服務(wù)器，可以安裝sftp這個插件，很好?。在公司會經(jīng)常?到。詳細配置已經(jīng)在上?講過。7、openinbrowser安裝openinbrowser插件后，在HTML?件中「右鍵選擇-->OpeninDefaultBrowser」，即可在瀏覽器中預(yù)覽?頁。8、highlight-icemode：選中相同的代碼時，讓?亮加明顯【薦】VSCode?帶的?亮夠顯眼。?插件?持?下吧。所?了這個插件之后，VSCode?帶的?亮就可以關(guān)掉了：在?戶設(shè)置?添加"editor.selectionHighlight":false即可。參考鏈接：9、vscode-iconsvscode-icons會根據(jù)?件的后綴名來圖標(biāo)，讓你更直觀地知道每種?件是什么類型的。10、ProjectManager?作中，我們經(jīng)常會來回切換多個項?，每次都要找到對應(yīng)項?的?錄再打開，?較?煩。ProjectManager插件可以解決這樣的煩惱，它提供了專門的視圖來展?你的項?，我們可以把常?的項?保存在這?，需要時?鍵切換，?分?便。11、TODOHighlight寫代碼過程中，突然發(fā)現(xiàn)?個Bug，但是?不想停下來?中的活，以免打斷思路，怎么辦？按照代碼規(guī)范，我們?般是在代碼中加個TODO注釋。?如：（注意，?定要寫成?寫TODO，?不是?寫的todo）//TODO:這?有個bug，我?會?再收拾你或者：//FIXME:我也不知道為啥，butitworksonlythatway.安裝了插件TODOHighlight之后，按住「Cmd+Shift+」P打開命令?板，輸?「Todohighlist」，選擇相關(guān)的命令，我們就可以看到?個todoList的清單。12、WakaTime【薦】統(tǒng)計在VSCode?寫代碼的時間。統(tǒng)計效果如下：13、CodeTimeCodeTime插件：記錄編程時間，統(tǒng)計代碼?數(shù)。安裝該插件后，VSCode底部的狀態(tài)欄右下?可以看到時間統(tǒng)計。點擊那個位置之后，選擇「CodeTimeDashboard」，即可查看統(tǒng)計結(jié)果。備注：團長試了?下這個codetime插件，發(fā)現(xiàn)統(tǒng)計結(jié)果不是很準(zhǔn)。14、MarkdownPreviewGithubStyling【薦】以GitHub風(fēng)格預(yù)覽Markdown樣式，?分簡潔優(yōu)雅。就像下?這樣，左側(cè)書寫Markdown?本，右側(cè)預(yù)覽Markdown的渲染效果：15、MarkdownPreviewEnhanced預(yù)覽Markdown樣式。MarkdownAllinOne這個插件將幫助你更?效地在Markdown中編寫?檔。16、SettingsSync【薦】作?：多臺設(shè)備之間，同V步SCode配置。通過登錄GitHub賬號來使?這個同步?具。同步的詳細操作已在上?講過。17、vscode-syncing作?：多臺設(shè)備之間，同步VSCode配置。18、VeturVue多功能集成插件，包括：語法?亮，智能提?，emmet，錯誤提?，格式化，?動補全，debugger。VSCode官?欽定Vue插件，Vue開發(fā)者必備。19、ES7React/Redux/GraphQL/React-NativesnippetsReact/Redux/react-router的語法智能提?。20、minapp：?程序?持?程序開發(fā)必備插件。21、Prettier：代碼格式化Prettier是?個代碼格式化?具，只關(guān)注格式化，但不具備校驗功能。在?個多?協(xié)同開發(fā)的團隊中，統(tǒng)?的代碼編寫規(guī)范?常重要。?套規(guī)范可以讓我們編寫的代碼達到?致的風(fēng)格，提?代碼的可讀性和統(tǒng)?性。?然維護性也會有所提?。22、ESLint：代碼格式校驗?常開發(fā)中，建議?可以P?rettier做代碼格式化，然后?eslint做校驗。23、Beautify代碼格式化?具。備注：相?之下，Prettier是當(dāng)前最流?的代碼格式化?具，?Beautify?得更多。24、JavaScript(ES6)codesnippetsES6語法智能提?，?持快速輸?。25、Searchnode_modules【薦】node_modules模塊??的?件夾和模塊實在是太多了，根本不好找。好在安裝Searchnode_modules這個插件后，輸?快捷鍵「Cmd+Shift+」P，然后輸?node_modules，在彈出的選項中選擇Searchnode_modules，即可搜索node_modules?的模塊。26、indent-rainbow：突出顯?代碼縮進indent-rainbow插件：突出顯?代碼縮進。安裝完成后，效果如下圖所?：27、javascriptconsoleutils：快速打印log?志【薦】安裝這個插件后，當(dāng)我們按住快捷鍵Cm「d+Shift」+后L，即可?動出現(xiàn)?志console.log()。簡直是?志黨福?。當(dāng)我們選中某個變量name，然后按住快捷鍵「Cmd+Shift」+，L即可?動出現(xiàn)這個變量的?志其他的同類插件還有：TurboConsoleLog。console.log(name)。不過，?產(chǎn)環(huán)境的代碼，還是盡量少打?志?較好，避免出現(xiàn)?些異常。編程有三等境界：第三等境界是打?志，這是最簡單、