文共3530字，預(yù)計(jì)學(xué)習(xí)時(shí)長13分鐘

市場營銷最強(qiáng)策略之一：在人們知道自己需要什么之前幫助他們意識到自己需要什么。這一點(diǎn)上，VSCode深諳其道。

VSCode可能是目前最為流行的代碼編輯器，就是因?yàn)樗鼭M足了每一個(gè)開發(fā)人員的需求，甚至可能開發(fā)人員自己都不清楚的需求。這就是VSCode的獨(dú)特魅力。

VSCode是為現(xiàn)代技術(shù)而創(chuàng)建的，因而大多數(shù)VSCode愛好者都是JavaScript開發(fā)人員。目前流行的JavaScript框架對于VSCode來說早已完美無缺，它擁有你所需要的一切。

科技日新月異，選擇文本編輯器時(shí)，一定要選最新最好的。優(yōu)秀的開發(fā)人員不能不舍得花時(shí)間。但這并不是說應(yīng)該轉(zhuǎn)而學(xué)習(xí)另一種語言，或者另一個(gè)框架。

正如筆者在之前的博客中一直強(qiáng)調(diào)的那樣，開發(fā)人員應(yīng)當(dāng)追上潮流，保持敏銳，了解最新信息，并將它們與目前使用的工具進(jìn)行比較，了解其中區(qū)別及其優(yōu)缺點(diǎn)，觀察其支撐和在社區(qū)中的發(fā)展，穩(wěn)定至關(guān)重要。這會(huì)大大提升你的工作效率。

VSCode擁有一個(gè)龐大的開源社區(qū)，其發(fā)展和潛力是無限的，本文將為你介紹25個(gè)最佳的VSCode擴(kuò)展。

1.Auto-CloseTag

擁有VCSCode擴(kuò)展是必要的。編寫代碼本就困難重重，擁有了VSCode擴(kuò)展，就不需要僅僅因?yàn)槿鄙訇P(guān)閉標(biāo)記（<div></div>）而查找錯(cuò)誤。

VSCode擴(kuò)展可以自動(dòng)添加剛剛添加的起始標(biāo)簽的右括號，然后將鼠標(biāo)光標(biāo)放在標(biāo)簽之間。是不是很酷?

2.VisualCode Integrated Terminal

將命令/終端放在VSCode編輯器中不僅會(huì)使工作更為輕松，還能節(jié)省空間。有了VSCode，你的終端就派上用場了。

3.ESLint/TSLint

此擴(kuò)展的主要功能是自動(dòng)格式化代碼，以便在整個(gè)團(tuán)隊(duì)中實(shí)現(xiàn)一致的格式化。ESLint也可以配置為自動(dòng)格式化代碼，無論何時(shí)出現(xiàn)錯(cuò)誤，它都會(huì)發(fā)出一連串的警告。

數(shù)百萬的下載量可不是白給的~

4.CodeSpell Checker

如若不是以英語為母語的人，甚至可能也不是第二語言，那么Code Spell Checker對避免代碼出現(xiàn)拼寫錯(cuò)誤非常有幫助。無論是否能說一口流利的英語，打字錯(cuò)誤是不可避免的——人們不會(huì)想花時(shí)間去找錯(cuò)字，尤其在面對長代碼時(shí)。

5.Settings Sync

使用多臺機(jī)器時(shí)，該擴(kuò)展將大有幫助。Settings sync讓所有電腦/筆記本電腦依照visual studio的設(shè)置方式實(shí)現(xiàn)同步。

同時(shí)在辦公室電腦和家用電腦上工作的開發(fā)人員，基本上會(huì)在不同的地點(diǎn)工作。手動(dòng)更改兩端設(shè)置極為耗時(shí)，因?yàn)樾枰鶕?jù)正在做的項(xiàng)目不時(shí)更改設(shè)置以便緩解編程壓力。建議使用這個(gè)擴(kuò)展,以便將所有所作更改都自動(dòng)同步到個(gè)人電腦和工作點(diǎn)。

6.Bracket Pair Colorizer

括號可謂是痛苦之來源，尤其是在處理大型項(xiàng)目時(shí)。當(dāng)使用長代碼時(shí)，情況會(huì)更糟。Bracket Pair Colorizer將有效緩解這種壓力。

由于有大量嵌套的長代碼，尤其是在使用Javascript時(shí)，幾乎不可能確定哪些括號相互匹配。這一工具有助于更容易地找到打開和關(guān)閉，用顏色標(biāo)識括號對將使代碼更具可讀性。趕緊下載吧!

7.Prettier

此前提到了ESLint，它可以自動(dòng)格式化連續(xù)的代碼，并顯示警告和錯(cuò)誤。

作為React/Native的開發(fā)人員，保持代碼整齊干凈是必要的。首要的一點(diǎn)就是正確地縮進(jìn)和分隔以便更好地讀取代碼，特別是在處理編寫已久的代碼時(shí)——帶有樣式、函數(shù)和處理程序的分隔非常重要，不僅方便自己，也方便了同事。要設(shè)置很簡單，點(diǎn)擊保存時(shí)即可自動(dòng)格式化。

8.PathIntellisense

該擴(kuò)展是筆者常用VSCode擴(kuò)展之一。它可以節(jié)省很多時(shí)間。作為一名前端開發(fā)人員，筆者時(shí)常健忘，但又需要用到大量的組件、擴(kuò)展和安裝包，特別是在使用React格式化時(shí)，因此，需要一些有助于處理文件路徑的東西。

大型項(xiàng)目中的工作麻煩多多，pathIntellisense將是你的左臂右膀。當(dāng)嘗試在引文中輸入一條路徑時(shí)，智能感知會(huì)自動(dòng)填寫或顯示建議。路徑智能感知還可以幫助自動(dòng)完成所有隱藏文件。

9.BrowserPreview

該擴(kuò)展對于前端開發(fā)人員而言必不可少。與其在Chrome中打開另一個(gè)窗口來瀏覽在代碼中所做的更改，不如下載這個(gè)瀏覽器進(jìn)行預(yù)覽，這樣在VSCod中即可完成所有的工作。

該擴(kuò)展可顯示代碼的瀏覽器預(yù)覽，因此不必在瀏覽器上打開標(biāo)簽就可以看到一些小改動(dòng)，大大了節(jié)省時(shí)間和空間。

10.Debuggerfor Chrome

這是筆者最愛和使用最多的VSCode擴(kuò)展。作為一個(gè)前端網(wǎng)頁移動(dòng)開發(fā)者，Debugger for Chrome為筆者提供了很大的幫助。特別是對于JavaScript開發(fā)人員來說，它可以節(jié)省很多做小改動(dòng)的時(shí)間，有助于快速地找到并解決bug，對調(diào)試非常有幫助。

想要查找錯(cuò)誤來自哪些行和函數(shù)，甚至查看其數(shù)據(jù)處理，控制臺可以提供很大的幫助。

11.MaterialIcon Theme

通過該擴(kuò)展可為文件列表選擇漂亮可愛的圖標(biāo)。如果文件是JavaScript，那么在文件名旁邊的material樣式中會(huì)有一個(gè)JavaScript圖標(biāo)。若是從事視覺開發(fā)，那么該擴(kuò)展就再適合不過了。

12.Javascript (ES6) Code Snippets

若你是JavaScript開發(fā)人員，Javascript (ES6) Code Snippets將是你最好的幫手。無論使用什么JavaScript框架，此擴(kuò)展都將有所幫助。如果只是一遍又一遍地輸入相同的通用代碼，效果倒不是很明顯。

該代碼片段十分方便，是一個(gè)輕量級的庫擴(kuò)展，它可以綁定任何標(biāo)準(zhǔn)的JavaScript調(diào)用，因此只需鍵入快捷代碼，即可看到整個(gè)通用代碼自動(dòng)輸入到編輯器中。該擴(kuò)展不僅支持Javascript ES6，還支持Typescript、Reactjs、Vue和HTML。

13.LiveServer

在使用Live Server時(shí)，該VSCode擴(kuò)展將有助于打開當(dāng)前項(xiàng)目的Live web服務(wù)器。一般這項(xiàng)工作用像Webpack這樣的構(gòu)建器完成即可，但是該擴(kuò)展顯然更為有效。只需右擊并打開運(yùn)行l(wèi)ive server，便會(huì)自動(dòng)完成剩余的工作。

14.Github 擴(kuò)展

若正在使用Github作為項(xiàng)目存儲庫，或者希望使用其他開發(fā)人員的源代碼存儲庫，那么這個(gè)擴(kuò)展就是為您量身定做。

順便一提，Github現(xiàn)在由微軟所有和管理，所以Github和VSCode現(xiàn)在都是微軟產(chǎn)品之一。

使用Github擴(kuò)展，可以輕松地連接其他開發(fā)人員的存儲庫、喜歡的開發(fā)人員的存儲庫，甚至自己的存儲庫。經(jīng)常使用Github的話，切換存儲庫將極為順手。

15.GitLens

Gitlens是另一個(gè)好用的擴(kuò)展。它擴(kuò)充了當(dāng)前的VSCode Git功能，能夠從以前所作的提交和更改中同時(shí)執(zhí)行代碼比較，還擁有其他一些很厲害的特性。

16.NPM

所有現(xiàn)代開發(fā)人員都知道NPM是什么，以及它為什么這么重要。Node包管理器是一個(gè)可管理Package .json文件的擴(kuò)展。如果需要的依賴項(xiàng)以及NPM包的版本控制尚未安裝，它會(huì)給出警告。

筆者所處理的大多數(shù)bug和錯(cuò)誤都來自于使用的NPM包、函數(shù)和特性，因?yàn)樗鼈兣c其他包不兼容，所以無法運(yùn)行。如果沒有它所要求的依賴項(xiàng)沒有兼容的版本那可真是鴨梨山大！

17.Beautify

Beautify是另一用于代碼格式化的良好擴(kuò)展，與前文提到的Prettier幾乎一樣，但是效果更漂亮。到目前為止，它已有將近1200萬的下載量了，還用筆者再多說什么嗎。它可以格式化用Javascript、JSON、Sass、CSS和HTML編寫的代碼。

18.Live Sass Compiler

如果您喜好Sass風(fēng)格，或者只是因?yàn)樗琼?xiàng)目應(yīng)用程序需求的一部分而恰好正在使用Sass，那么這個(gè)VSCode擴(kuò)展就是為您而生的!

它會(huì)實(shí)時(shí)將SASS/SCSS文件編譯成CSS文件，并自動(dòng)提供應(yīng)用程序或?yàn)g覽器中已編譯樣式的實(shí)時(shí)預(yù)覽。

19.Emmet

自筆者開始使用VSCode以來，就一直在使用Emmet。它可以幫助開發(fā)人員提高編寫代碼的速度。使用該擴(kuò)展不久之后就再也離不開它了。

20.VSCode Icons

這是為前端開發(fā)人員打造的VSCode擴(kuò)展。與前文提到的material圖標(biāo)很相似，但是設(shè)計(jì)不同。前端開發(fā)人員通常都喜歡可視化，對吧。這個(gè)圖標(biāo)有助于查看文件類型，不管它們是HTML,CSS, Javascript還是其他類型。

21.顏色選擇器

顏色選擇器擴(kuò)展有助于輕松選擇CSS文件中的顏色。它將立即反映或應(yīng)用到當(dāng)前正在處理的屬性。若喜歡使用RGBA顏色，也可以使用。

22.Quokka

Quokka被稱為JavaScript開發(fā)人員的現(xiàn)代便簽板。其構(gòu)建旨在幫助開發(fā)人員進(jìn)行代碼檢查。這是一個(gè)完美的解決方案。

與其他VSCode擴(kuò)展相比，它非常輕量級、高效且強(qiáng)大，有助于加快工作進(jìn)程。同時(shí)，它又是實(shí)時(shí)的，可以給出即時(shí)反饋。

它可以為每個(gè)結(jié)果匹配一個(gè)固定的顏色類型，以便開發(fā)人員更容易理解代碼。

23.Live Share

Live Share是VSCode文本編輯器中最先進(jìn)的特性之一。當(dāng)與團(tuán)隊(duì)成員一起工作時(shí)，它無可挑剔。LiveShare的功能之一是允許每個(gè)開發(fā)人員實(shí)時(shí)地與其他開發(fā)人員共享代碼片段。

這一點(diǎn)堪稱完美，且有助于實(shí)現(xiàn)更加高效和多產(chǎn)團(tuán)隊(duì)協(xié)作。LiveShare允許即時(shí)共享當(dāng)前的項(xiàng)目，即使在調(diào)試時(shí)也是如此。

協(xié)作者不需要安裝任何存儲庫、sdk或任何東西來連接其他開發(fā)人員的當(dāng)前代碼。團(tuán)隊(duì)中的每個(gè)人都可以通過協(xié)作來遠(yuǎn)程探索和修復(fù)問題。

24.ES7, React, Redux & GraphQL Snippets

高級開發(fā)人員目前使用的多是JavaScript框架(如React)，以及其他與生產(chǎn)和復(fù)雜應(yīng)用程序兼容的技術(shù)，這項(xiàng)擴(kuò)展是為他們量身定做的。

反復(fù)輸入標(biāo)準(zhǔn)代碼效率低下。在該代碼片段的幫助下，可以輕松創(chuàng)建基于類的組件、功能組件、輸入項(xiàng)、生命周期方法等，只需鍵入快捷代碼，這是筆者使用最多的擴(kuò)展之一，因?yàn)楣P者一直使用的是Reactjs和React Native。

25.REST 客戶端

另一個(gè)高級工具是Rest客戶端擴(kuò)展，在使用其他第三方工具和APIs時(shí)，它將大有幫助。另外也有助于輕松發(fā)出HTTP請求。

通過此擴(kuò)展可輕松地在代碼編輯器中直接調(diào)用和結(jié)束，大大節(jié)省了時(shí)間——你可以使用這個(gè)方法，而不是只為實(shí)現(xiàn)一個(gè)請求而來回切換瀏覽器或郵箱。

無論是追求高效，還是尋求體驗(yàn)，在這里你都將找到滿意的答案。

留言點(diǎn)贊關(guān)注

我們一起分享AI學(xué)習(xí)與發(fā)展的干貨

如轉(zhuǎn)載，請后臺留言，遵守轉(zhuǎn)載規(guī)范

sCode自從誕生以來，以其各自優(yōu)異的特性迅速走紅。尤其是對于前端開發(fā)小伙伴來說，幾乎成為必不可少的開發(fā)工具。所以，熟練掌握VsCode的各自使用技巧與調(diào)試技巧會(huì)讓你的日常開發(fā)工作效率倍增。本文將會(huì)以大量圖文的方式，從下面幾個(gè)方面詳細(xì)介紹VsCode的各種技巧：

• 第一部分主要介紹VsCode的基本技巧，比如常用快捷鍵、輔助標(biāo)尺等。熟悉此部分的可以直接跳過。
• 第二部分主要各種斷點(diǎn)（比如日志斷點(diǎn)、內(nèi)聯(lián)斷點(diǎn)、表達(dá)式斷點(diǎn)等等）、數(shù)據(jù)面板等等
• 第三部分主要講解各種項(xiàng)目的調(diào)試實(shí)戰(zhàn)，比如Node程序、TS程序、Vue程序、Electron程序、Html等的調(diào)試實(shí)戰(zhàn)
• 最后一部分將會(huì)講解其他有用的技巧，比如代碼片段、重構(gòu)、Emmet等等

基本技巧

快速啟動(dòng)

VsCode安裝后，會(huì)自動(dòng)寫入環(huán)境變量，終端輸入code即可喚起VsCode應(yīng)用程序。

常用快捷鍵

• ctrl + p快速搜索文件并跳轉(zhuǎn)，添加:可以跳轉(zhuǎn)到指定行

• ctrl + shift + p 根據(jù)您當(dāng)前的上下文訪問所有可用命令。
• ctrl + shift + c在外部打開終端并定位到當(dāng)前項(xiàng)目路徑
• ctrl + 按鍵1左邊的符號顯示隱藏終端面板
• Ctrl+B 切換側(cè)邊欄
• Ctrl+\ 快速拆分文件編輯
• alt + 單機(jī)左鍵 添加多處光標(biāo)
• alt + shift + 單擊左鍵 同一列所有位置添加光標(biāo)
• alt + shift + 鼠標(biāo)選擇 選擇相同開始和結(jié)束的區(qū)域

• alt + 上鍵或下鍵 將當(dāng)前行或者選中的區(qū)域上移/下移一行

垂直標(biāo)尺

在配置文件中添加如下配置，可以增加字符數(shù)標(biāo)尺輔助線

"editor.rulers": [40, 80, 100]

進(jìn)階技巧

斷點(diǎn)的基本使用

下面以在VsCode中快速調(diào)試一個(gè)Node項(xiàng)目為例，演示斷點(diǎn)的基本使用。后文會(huì)繼續(xù)結(jié)束各種高級斷點(diǎn)。

• 創(chuàng)建一個(gè)基本的node項(xiàng)目為Nodejs
• 打開左側(cè)調(diào)試面板，選擇你要調(diào)試的node項(xiàng)目名稱，添加調(diào)試配置

• 選擇調(diào)試的項(xiàng)目類型為Node.js

• 打開生成的.vscode/launch.json文件，指定程序入口文件

program字段用于指定你的程序入口文件，${workspaceFolder}表示當(dāng)前項(xiàng)目根路徑

• 在程序中添加斷點(diǎn)，只需要點(diǎn)擊左側(cè)的邊欄即可添加斷點(diǎn)

• 按F5開始調(diào)試，成功調(diào)試會(huì)有浮窗操作欄

浮窗的操作按鈕功能依次為：

• 繼續(xù)(F5)、
• 調(diào)試下一步(F10)、
• 單步跳入(F11)、
• 單步跳出(Shift F11)、
• 重新調(diào)試(Ctrl + Shift + F5)、
• 結(jié)束調(diào)試(Shift + F5)

日志斷點(diǎn)

日志斷點(diǎn)是普通斷點(diǎn)的一種變體，區(qū)別在于不會(huì)中斷調(diào)試，而是可以把信息記錄到控制臺。日志斷點(diǎn)對于調(diào)試無法暫停或停止的服務(wù)時(shí)特別有用。步驟如下:

• 添加日志斷點(diǎn)的步驟

• 輸入要日志斷點(diǎn)的信息，點(diǎn)擊回車添加完成

可以使用{}使用變量，比如在此處添加日志斷點(diǎn)，b的值為${b}

• 日志斷點(diǎn)添加成功后會(huì)有是一個(gè)菱形圖標(biāo)

• 按F5運(yùn)行查看調(diào)試結(jié)果

表達(dá)式條件斷點(diǎn)

條件斷點(diǎn)是表達(dá)式結(jié)果為true時(shí)才會(huì)進(jìn)行斷點(diǎn)，步驟如下:

• 在代碼行左側(cè)右擊，也可以添加斷點(diǎn)，此處選擇添加條件斷點(diǎn)

• 填寫表達(dá)式，按回車鍵

• 添加成功的小圖標(biāo)如下

• 按F5調(diào)試，條件成立所以進(jìn)行了斷點(diǎn)

命中計(jì)數(shù)斷點(diǎn)

只有該行代碼命中了指定次數(shù)，才會(huì)進(jìn)行斷點(diǎn)。步驟如下:

• 選擇條件斷點(diǎn)，切換為命中次數(shù)選項(xiàng)，填寫命中次數(shù)

• 填寫成功如下圖所示

• 按F5調(diào)試，如圖所示，index為9時(shí)才中斷

內(nèi)聯(lián)斷點(diǎn)

僅當(dāng)執(zhí)行到達(dá)與內(nèi)聯(lián)斷點(diǎn)關(guān)聯(lián)的列時(shí)，才會(huì)命中內(nèi)聯(lián)斷點(diǎn)。這在調(diào)試在一行中包含多個(gè)語句的縮小代碼時(shí)特別有用。比如for循環(huán)，短路運(yùn)算符等一行代碼包含多個(gè)表達(dá)式時(shí)會(huì)特別有用。步驟如下:

• 在指定位置按Shift + F9

• 調(diào)試之后，每次運(yùn)行到該內(nèi)聯(lián)處的代碼都會(huì)中斷

補(bǔ)充知識點(diǎn)：數(shù)據(jù)面板介紹

• 數(shù)據(jù)面板可以查看所有變量

• 在變量上點(diǎn)擊右鍵，可以設(shè)置變量值、復(fù)制變量值等操作

• 聚焦于數(shù)據(jù)面板時(shí)，可以通過鍵入值來搜索過濾。點(diǎn)擊下圖所示按鈕可以控制是否篩選。

補(bǔ)充知識點(diǎn)：監(jiān)聽面板介紹

可以將變量添加到監(jiān)聽面板，實(shí)時(shí)觀察變量的變化。

• 在變量面板通過右鍵選擇“添加到監(jiān)視”將變量添加到監(jiān)聽面板

• 也可以直接在監(jiān)聽面板選擇添加按鈕進(jìn)行變量添加

• 添加變量后就可以實(shí)時(shí)監(jiān)聽變量的變化

補(bǔ)充知識點(diǎn)：調(diào)試服務(wù)器時(shí)打開一個(gè)URI

開發(fā) Web 程序通常需要在 Web 瀏覽器中打開特定 URL，以便在調(diào)試器中訪問服務(wù)器代碼。VS Code 有一個(gè)內(nèi)置功能“ serverReadyAction ”來自動(dòng)化這個(gè)任務(wù)。

• 一段簡單的server代碼

var express=require('express');
var app=express();

app.get('/', function(req, res) {
  res.send('Hello World!');
});

app.listen(3000, function() {
  console.log('Example app listening on port 3000!');
});

• 配置launch.json，以支持打開URI

{
  "type": "node",
  "request": "launch",
  "name": "Launch Program",
  "program": "${workspaceFolder}/app.js",

  "serverReadyAction": {
    "pattern": "listening on port ([0-9]+)",
    "uriFormat": "http://localhost:%s",
    "action": "openExternally"
  }
}

pattern是設(shè)置匹配的程度端口號，端口號放在小括號內(nèi)，即作為一個(gè)正則的捕獲組使用。uriFormat映射為URI，其中%s使用pattern中的第一個(gè)捕獲組替換。最后使用該URI作為外部程序打開的URI。

• 按F5調(diào)試，會(huì)自動(dòng)打開瀏覽器，且會(huì)在下圖所示處中斷，當(dāng)繼續(xù)執(zhí)行后，瀏覽器才能看到輸出了server的內(nèi)容

終局：各場景調(diào)試實(shí)戰(zhàn)

調(diào)試NodeJS項(xiàng)目

關(guān)于NodeJs項(xiàng)目的調(diào)試方法，已經(jīng)在上述的斷點(diǎn)的基本使用部分做了介紹，可以網(wǎng)上滾動(dòng)翻閱。

調(diào)試Typescript項(xiàng)目

• 調(diào)試TS項(xiàng)目前，先創(chuàng)建一個(gè)TS項(xiàng)目
• 先初始化一個(gè)ts程序，生成默認(rèn)的tsconfig.json文件
• # 終端運(yùn)行 tsc --init 復(fù)制代碼
• 打開tsconfig.json文件，開啟sourceMap選項(xiàng)和指定編譯后輸出的路徑
• VS Code 內(nèi)置了對 Ts 調(diào)試的支持。為了支持調(diào)試 Ts 與正在執(zhí)行的 Js 代碼相結(jié)合，VS Code 依賴于調(diào)試器的source map在 Ts 源代碼和正在運(yùn)行的 Js 之間進(jìn)行映射，所以需要需要開啟sourceMap選項(xiàng)。
• { "sourceMap": true, "outDir": "./out" } 復(fù)制代碼
• 新建index.ts文件，寫一個(gè)基本的ts代碼
• const num: number=123; console.log(num); function fn(arg: string): void { console.log('fn', arg); } fn("Hello"); 復(fù)制代碼
• 手動(dòng)編譯調(diào)試TS
• 在上述的ts基本項(xiàng)目中：
• 終端執(zhí)行ts的編譯命令tsc
• 
  
• 此時(shí)可以看到生成了out文件夾，里面包含一個(gè)index.js和一個(gè)index.js.map文件
• 
  
• 在index.ts中隨意添加一個(gè)斷點(diǎn)
• 
  
• 按F5或者運(yùn)行 -> 啟動(dòng)調(diào)試，此時(shí)可以看到可以正常debug調(diào)試
• 
  
• 通過構(gòu)建任務(wù)構(gòu)建調(diào)試TS
• 按Ctrl+Shift+B或選擇終端 -> 運(yùn)行生成任務(wù)，此時(shí)會(huì)彈出一個(gè)下拉菜單
• 
  
• 選擇tsc構(gòu)建選項(xiàng)，此時(shí)可以看到自動(dòng)生成了編譯文件
• 
  
• 注意，如果你使用的是其他終端(比如cmder)的話，有可能會(huì)生成不了，如下圖所示，使用默認(rèn)的powershell即可：
• 
  
• 調(diào)試的話和上述步驟一樣，在有了編譯后的文件后，按F5即可
• 監(jiān)視改變并實(shí)時(shí)編譯
• 按Ctrl + Shift + B選擇監(jiān)視選項(xiàng)，可以實(shí)時(shí)監(jiān)視文件內(nèi)容發(fā)生變化，重新編譯
• 
  
• 如下圖所示，會(huì)實(shí)時(shí)編譯
• 
  

補(bǔ)充知識點(diǎn)：tasks配置文件的創(chuàng)建方式

• 方法1：點(diǎn)擊終端 -> 配置任務(wù) -> 選擇任務(wù)可以生成對應(yīng)的tasks.json配置

• 方法2：點(diǎn)擊終端 -> 運(yùn)行生成任務(wù) -> 點(diǎn)擊設(shè)置圖標(biāo)也可以生成對應(yīng)的tasks.json配置

補(bǔ)充知識點(diǎn)：每次調(diào)試時(shí)重新編譯

• 按上述的操作已經(jīng)生成了task.json配置文件

{
	"version": "2.0.0",
	"tasks": [
    {
      "type": "typescript",
      "tsconfig": "tsconfig.json",
      "problemMatcher": [
        "$tsc"
      ],
      "group": "build",
      "label": "tsc: 構(gòu)建 - tsconfig.json"
    }
  ]
}

• 點(diǎn)擊運(yùn)行 -> 添加配置 -> 選擇nodejs

• 在生成的launch.json文件中，添加preLaunchTask字段，值是tasks.json的label值，一定要相同，注意大小寫。該字段的作用是在執(zhí)行命令前先執(zhí)行改task任務(wù)。

注意，如果編譯后的js文件不在相應(yīng)的位置，通過圖中的outFiles字段可以指定ts編譯后的js路徑。

• 在index.ts文件中按F5啟動(dòng)調(diào)試，可以看到調(diào)試前已經(jīng)生成了編譯文件，而后就可以正常調(diào)試了。

補(bǔ)充知識點(diǎn)：VsCode的TS版本說明

• vscode本身內(nèi)置了對ts的支持
• vscode內(nèi)置的ts版本（即工作區(qū)版本），僅僅用于IntelliSense（代碼提示），工作區(qū)ts版本與用于編譯的ts版本無任何關(guān)系。

修改工作區(qū)ts版本的方法：

• 在狀態(tài)欄選擇typescript的圖標(biāo)，選擇版本切換

• 選擇你需要的版本即可

調(diào)試html項(xiàng)目

學(xué)會(huì)了上述ts的調(diào)試后，我們嘗試調(diào)試html文件，并且html文件中引入ts文件:

• 創(chuàng)建html，引入ts編譯后的js文件

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
</head>
<body>
  <h3>Hello</h3>
  <script src="./out/index.js"></script>
</body>
</html>

• ts源文件如下：

const num: number=1221;
console.log(num);

function fn(arg: string): void {
  console.log('fn', arg);
}

document.body.append('World')

fn("he");

• 打debug

• launch.json啟動(dòng)命令配置

{
  // 使用 IntelliSense 了解相關(guān)屬性。 
  // 懸停以查看現(xiàn)有屬性的描述。
  // 欲了解更多信息，請?jiān)L問: https://go.microsoft.com/fwlink/?linkid=830387
  "version": "0.2.0",
  "configurations": [
    {
      "type": "pwa-chrome",
      "request": "launch",
      "name": "Launch Chrome",
      "url": "file:///E:/demo/vscode/debug/ts/index.html",
      "preLaunchTask": "tsc: 構(gòu)建 - tsconfig.json",
      "webRoot": "${workspaceFolder}"
    }
  ]
}

• 選擇我們的啟動(dòng)命令

• 按F5可以正常喚起chrome瀏覽器，并在vscode的ts源碼處會(huì)有debug效果

調(diào)試Vue項(xiàng)目的兩種方式

下面介紹兩種調(diào)試vue2項(xiàng)目的3種方法，其他框架的調(diào)試也類似：

不使用vscode插件Debugger for chrome的方法

• 初始化vue項(xiàng)目，配置vue.config.js，指定要生成sourceMaps資源

module.exports={
  configureWebpack: {
    // 生成sourceMaps
    devtool: "source-map"
  }
};

• 根目錄下創(chuàng)建./vscode/launch.json文件 或者選擇運(yùn)行 -> 添加配置 -> Chrome

{
  "version": "0.2.0",
  "configurations": [
    {
      "type": "chrome",
      "request": "launch",
      "name": "vuejs: chrome",
      "url": "http://localhost:8080",
      "webRoot": "${workspaceFolder}",
      "breakOnLoad": true,
      "pathMapping": {
        "/_karma_webpack_": "${workspaceFolder}"
      },
      "sourceMapPathOverrides": {
        "webpack:/*": "${webRoot}/*",
        "/./*": "${webRoot}/*",
        "/src/*": "${webRoot}/*",
        "/*": "*",
        "/./~/*": "${webRoot}/node_modules/*"
      },
      "preLaunchTask": "serve"
    }
  ]
}

• 添加任務(wù)腳本

{
  "version": "2.0.0",
  "tasks": [
    {
      "label": "serve",
      "type": "npm",
      "script": "serve",
      "isBackground": true,
      "problemMatcher": [
        {
          "base": "$tsc-watch",
          "background": {
            "activeOnStart": true,
            "beginsPattern": "Starting development server",
            "endsPattern": "Compiled successfully"
          }
        }
      ],
      "group": {
        "kind": "build",
        "isDefault": true
      }
    }
  ]
}

該腳本的作用是運(yùn)行npm run serve編譯命令。

• 按F5啟動(dòng)調(diào)試即可

注意：此方式的主要點(diǎn)在于launch.json配置文件中，通過preLaunchTask字段指定調(diào)試前先運(yùn)行一個(gè)任務(wù)腳本，preLaunchTask的值對應(yīng)tasks.json文件中的label值。

更多詳細(xì)內(nèi)容，大家可以點(diǎn)擊這里的參考文檔查閱。

借助vscode插件Debugger for Chrome在Chrome中調(diào)試

• 第一步還是初始化vue項(xiàng)目，添加vue.config.js文件配置，指定要生成sourceMaps資源

module.exports={
  configureWebpack: {
    // 生成sourceMaps
    devtool: "source-map"
  }
};

• vscode中擴(kuò)展中安裝Debugger for Chrome插件，并確保沒有禁用插件

• 手動(dòng)啟動(dòng)項(xiàng)目的運(yùn)行, 此方式不需要配置tasks.json任務(wù)

# 終端執(zhí)行命令，啟動(dòng)項(xiàng)目
npm run serve

• 按F5啟動(dòng)調(diào)試即可

更多詳細(xì)內(nèi)容，請點(diǎn)擊這里的參考文檔查閱。

借助vscode插件Debugger for Firfox在Firefox中調(diào)試

• 和Debugger for Chrome基本一樣，區(qū)別在于安裝Debugger for Firfox插件，并在launch.json配置中，增加調(diào)試Firefox的配置即可，配置如下

{
  "version": "0.2.0",
  "configurations": [
    // 省略Chrome的配置...
    // 下面添加的Firefox的配置
    {
      "type": "firefox",
      "request": "launch",
      "reAttach": true,
      "name": "vuejs: firefox",
      "url": "http://localhost:8080",
      "webRoot": "${workspaceFolder}/src",
      "pathMappings": [{ "url": "webpack:///src/", "path": "${webRoot}/" }]
    }
  ]
}

• 調(diào)試時(shí)選擇對應(yīng)的調(diào)試命令即可

Firefox初始啟動(dòng)時(shí)不會(huì)觸發(fā)調(diào)試，需要刷新一次

調(diào)試Electron項(xiàng)目

Electron很多人都使用過，主要用于開發(fā)跨平臺的系統(tǒng)桌面應(yīng)用。那么來看下vue-cli-electron-builder創(chuàng)建的Electron項(xiàng)目怎么調(diào)試。步驟如下：

• 在初始化項(xiàng)目后，首先修改vue.config.js文件配置，增加sourceMaps配置：

module.exports={
  configureWebpack: {
    devtool: 'source-map'
  }
}

• 創(chuàng)建調(diào)試配置.vscode/launch.json

{
  "version": "0.2.0",
  "configurations": [
    {
      "name": "Electron: Main",
      "type": "node",
      "request": "launch",
      "protocol": "inspector",
      "preLaunchTask": "bootstarp-service",
      "runtimeExecutable": "${workspaceRoot}/node_modules/.bin/electron",
      "windows": {
        "runtimeExecutable": "${workspaceRoot}/node_modules/.bin/electron.cmd"
      },
      "args": ["--remote-debugging-port=9223", "./dist_electron"],
      "outFiles": ["${workspaceFolder}/dist_electron/**/*.js"]
    },
    {
      "name": "Electron: Renderer",
      "type": "chrome",
      "request": "attach",
      "port": 9223,
      "urlFilter": "http://localhost:*",
      "timeout": 0,
      "webRoot": "${workspaceFolder}/src",
      "sourceMapPathOverrides": {
        "webpack:///./src/*": "${webRoot}/*"
      }
    },
  ],
  "compounds": [
    {
      "name": "Electron: All",
      "configurations": ["Electron: Main", "Electron: Renderer"]
    }
  ]
}

此處配置了兩個(gè)調(diào)試命令: Electron: Main用于調(diào)試主進(jìn)程，Electron: Renderer用于調(diào)試渲染進(jìn)程；compounds[].選項(xiàng)用于定義復(fù)合調(diào)試選項(xiàng); configurations定義的復(fù)合命令是并行的; preLaunchTask用于配置命令執(zhí)行前先執(zhí)行的任務(wù)腳本，其值對應(yīng)tasks.json中的label字段; preLaunchTask用在compounds時(shí)，用于定義configurations復(fù)合任務(wù)執(zhí)行前先執(zhí)行的腳本。

• 創(chuàng)建任務(wù)腳本

{
  // See https://go.microsoft.com/fwlink/?LinkId=733558
  // for the documentation about the tasks.json format
  "version": "2.0.0",
  "tasks": [
    {
      "label": "bootstarp-service",
      "type": "process",
      "command": "./node_modules/.bin/vue-cli-service",
      "windows": {
        "command": "./node_modules/.bin/vue-cli-service.cmd",
        "options": {
          "env": {
            "VUE_APP_ENV": "dev",
            "VUE_APP_TYPE": "local"
          }
        }
      },
      "isBackground": true,
      "args": [
        "electron:serve", "--debug"
      ],
      "problemMatcher": {
        "owner": "custom",
        "pattern": {
          "regexp": ""
        },
        "background": {
          "beginsPattern": "Starting development server\\.\\.\\.",
          "endsPattern": "Not launching electron as debug argument was passed\\."
        }
      }
    }
  ]
}

• 啟動(dòng)調(diào)試

在主進(jìn)程相關(guān)代碼上打上斷點(diǎn)，然后啟動(dòng)調(diào)試主進(jìn)程命令就可以調(diào)試主進(jìn)程了

注意，這里的options參數(shù)是根據(jù)實(shí)際的情況，自定義添加我們運(yùn)行項(xiàng)目時(shí)所需要的參數(shù)，比如我這里因?yàn)閱?dòng)項(xiàng)目的npm命令是:

"serve-local:dev": "cross-env VUE_APP_TYPE=local VUE_APP_ENV=dev vue-cli-service electron:serve"

• 主進(jìn)程調(diào)試成功

• 開始調(diào)試渲染進(jìn)程

切換到渲染進(jìn)程的調(diào)試選項(xiàng)，在渲染進(jìn)程的代碼處打上斷點(diǎn)，點(diǎn)擊調(diào)試。注意，此時(shí)并不會(huì)有斷點(diǎn)終端，需要ctrl+r手動(dòng)刷新軟件進(jìn)程才會(huì)看到渲染進(jìn)程的斷點(diǎn)。

• 刷新渲染進(jìn)程后的效果，如下圖，已經(jīng)進(jìn)入了斷點(diǎn)

• 另一種方式

同時(shí)開啟渲染進(jìn)程和主進(jìn)程的調(diào)試，只需要切換到調(diào)試全部的選項(xiàng)即可。注意，此種方式因?yàn)?/span>compounds[].configurations配置是并行執(zhí)行的，并不一定能保證渲染進(jìn)程調(diào)試一定能附加到主進(jìn)程調(diào)試成功（估計(jì)是時(shí)機(jī)問題），有些時(shí)候會(huì)調(diào)試渲染進(jìn)程不成功。所以，可以采取上面的方式進(jìn)行調(diào)試。

更多調(diào)試Electron的內(nèi)容，可以點(diǎn)擊參考文檔查閱。

補(bǔ)充：更進(jìn)一步

• VS調(diào)試React app文檔
• VS調(diào)試Next.js文檔
• 更多...

其他技巧

技巧一：代碼片段（snippets）

從擴(kuò)展商店中安裝snippets

@category:"snippets"

創(chuàng)建全局代碼片段

• 選擇文件 -> 首選項(xiàng) -> 用戶片段
• 選擇新建全局代碼片段文件

• 添加代碼片段文件的文件名稱，會(huì)生成.code-snippets后綴的文件
• 定義用戶片段

{
  "自動(dòng)補(bǔ)全console.log": {
    "scope": "javascript,typescript",
      "prefix": "log",
      "body": [
        "console.log('$1');",
        "$2"
      ],
    "description": "輸出console.log('')"
  }
}

• 在鍵盤輸入log時(shí)效果如下

• 指定光標(biāo)處的默認(rèn)值并選中

"body": [
  "console.log('${1:abc}');"
],

• 指定光標(biāo)處的默認(rèn)值有多個(gè)，并提供下拉選擇

用兩個(gè)豎線包含多個(gè)選擇值，|多個(gè)選擇值直接用逗號隔開|

"body": [
  "console.log('${1:abc}');",
  "${2|aaa,bbb,ccc|}"
],

新建當(dāng)前工作區(qū)的代碼片段

只需要選擇文件 -> 首選項(xiàng) -> 用戶片段 -> 新建xxx文件夾的代碼片段, 新建后會(huì)在當(dāng)前工作區(qū)生成.vscode/xxx.code-snippets文件

技巧二：Emmet

vscode內(nèi)置了對Emmet的支持，無需額外擴(kuò)展。例如html的Emmet演示如下:

技巧三：對光標(biāo)處代碼變量快速重命名

選中或者光標(biāo)所處的位置，按F2可以對所有的變量重命名

技巧四：代碼重構(gòu)建議

• 選中要重構(gòu)的代碼，點(diǎn)擊出現(xiàn)的黃色小燈的圖標(biāo)

• 選中重構(gòu)的類型

• 輸入新的變量名

• 還可以重構(gòu)到函數(shù)

• TS中還可以提取接口等等

補(bǔ)充：VsCode擴(kuò)展插件開發(fā)

VsCode擴(kuò)展插件可以做什么事情？

• 定制主題、文件圖標(biāo)
• 擴(kuò)展工作臺功能
• 創(chuàng)建webView
• 自定義新的語言提示
• 支持調(diào)試特定的runtime

基于Yeoman快速開發(fā)VsCode插件，步驟如下:

• 安裝Yeoman和用于生成模板的插件VS Code Extension Generator

# 終端運(yùn)行，主要node版本需要12及以上，node10會(huì)安裝報(bào)錯(cuò)
npm i -g yo generator-code

• 運(yùn)行yo code創(chuàng)建命令，選擇要生成的項(xiàng)目模板。這里演示New extension

• 根據(jù)提示依次選擇

• 生成的內(nèi)容如下

• 按F5生成編譯項(xiàng)目，此時(shí)會(huì)自動(dòng)打開一個(gè)新窗口
• 在新窗口按Ctrl+Shfit+P,輸入Hello World命令

• 此時(shí)會(huì)彈出一個(gè)彈窗的效果

• 至此，一個(gè)最簡單的插件就完成了