25個最佳的VSCode擴展！帶你領略VSCode的

25個最佳的VSCode擴展！帶你領略VSCode的獨特魅力

文共3530字，預計學習時長13分鐘

圖源：unsplash

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

VSCode可能是目前最為流行的代碼編輯器，就是因為它滿足了每一個開發人員的需求，甚至可能開發人員自己都不清楚的需求。這就是VSCode的獨特魅力。

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

科技日新月異，選擇文本編輯器時，一定要選最新最好的。優秀的開發人員不能不舍得花時間。但這并不是說應該轉而學習另一種語言，或者另一個框架。

正如筆者在之前的博客中一直強調的那樣，開發人員應當追上潮流，保持敏銳，了解最新信息，并將它們與目前使用的工具進行比較，了解其中區別及其優缺點，觀察其支撐和在社區中的發展，穩定至關重要。這會大大提升你的工作效率。

圖源：unsplash

VSCode擁有一個龐大的開源社區，其發展和潛力是無限的，本文將為你介紹25個最佳的VSCode擴展。

1.Auto-CloseTag

擁有VCSCode擴展是必要的。編寫代碼本就困難重重，擁有了VSCode擴展，就不需要僅僅因為缺少關閉標記（<div></div>）而查找錯誤。

VSCode擴展可以自動添加剛剛添加的起始標簽的右括號，然后將鼠標光標放在標簽之間。是不是很酷?

2.VisualCode Integrated Terminal

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

3.ESLint/TSLint

此擴展的主要功能是自動格式化代碼，以便在整個團隊中實現一致的格式化。ESLint也可以配置為自動格式化代碼，無論何時出現錯誤，它都會發出一連串的警告。

數百萬的下載量可不是白給的~

4.CodeSpell Checker

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

5.Settings Sync

使用多臺機器時，該擴展將大有幫助。Settings sync讓所有電腦/筆記本電腦依照visual studio的設置方式實現同步。

同時在辦公室電腦和家用電腦上工作的開發人員，基本上會在不同的地點工作。手動更改兩端設置極為耗時，因為需要根據正在做的項目不時更改設置以便緩解編程壓力。建議使用這個擴展,以便將所有所作更改都自動同步到個人電腦和工作點。

6.Bracket Pair Colorizer

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

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

7.Prettier

此前提到了ESLint，它可以自動格式化連續的代碼，并顯示警告和錯誤。

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

8.PathIntellisense

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

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

9.BrowserPreview

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

該擴展可顯示代碼的瀏覽器預覽，因此不必在瀏覽器上打開標簽就可以看到一些小改動，大大了節省時間和空間。

10.Debuggerfor Chrome

這是筆者最愛和使用最多的VSCode擴展。作為一個前端網頁移動開發者，Debugger for Chrome為筆者提供了很大的幫助。特別是對于JavaScript開發人員來說，它可以節省很多做小改動的時間，有助于快速地找到并解決bug，對調試非常有幫助。

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

11.MaterialIcon Theme

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

12.Javascript (ES6) Code Snippets

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

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

13.LiveServer

在使用Live Server時，該VSCode擴展將有助于打開當前項目的Live web服務器。一般這項工作用像Webpack這樣的構建器完成即可，但是該擴展顯然更為有效。只需右擊并打開運行live server，便會自動完成剩余的工作。

14.Github 擴展

若正在使用Github作為項目存儲庫，或者希望使用其他開發人員的源代碼存儲庫，那么這個擴展就是為您量身定做。

順便一提，Github現在由微軟所有和管理，所以Github和VSCode現在都是微軟產品之一。

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

15.GitLens

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

16.NPM

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

筆者所處理的大多數bug和錯誤都來自于使用的NPM包、函數和特性，因為它們與其他包不兼容，所以無法運行。如果沒有它所要求的依賴項沒有兼容的版本那可真是鴨梨山大！

17.Beautify

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

18.Live Sass Compiler

如果您喜好Sass風格，或者只是因為它是項目應用程序需求的一部分而恰好正在使用Sass，那么這個VSCode擴展就是為您而生的!

它會實時將SASS/SCSS文件編譯成CSS文件，并自動提供應用程序或瀏覽器中已編譯樣式的實時預覽。

19.Emmet

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

20.VSCode Icons

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

21.顏色選擇器

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

22.Quokka

Quokka被稱為JavaScript開發人員的現代便簽板。其構建旨在幫助開發人員進行代碼檢查。這是一個完美的解決方案。

與其他VSCode擴展相比，它非常輕量級、高效且強大，有助于加快工作進程。同時，它又是實時的，可以給出即時反饋。

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

23.Live Share

Live Share是VSCode文本編輯器中最先進的特性之一。當與團隊成員一起工作時，它無可挑剔。LiveShare的功能之一是允許每個開發人員實時地與其他開發人員共享代碼片段。

這一點堪稱完美，且有助于實現更加高效和多產團隊協作。LiveShare允許即時共享當前的項目，即使在調試時也是如此。

協作者不需要安裝任何存儲庫、sdk或任何東西來連接其他開發人員的當前代碼。團隊中的每個人都可以通過協作來遠程探索和修復問題。

24.ES7, React, Redux & GraphQL Snippets

高級開發人員目前使用的多是JavaScript框架(如React)，以及其他與生產和復雜應用程序兼容的技術，這項擴展是為他們量身定做的。

反復輸入標準代碼效率低下。在該代碼片段的幫助下，可以輕松創建基于類的組件、功能組件、輸入項、生命周期方法等，只需鍵入快捷代碼，這是筆者使用最多的擴展之一，因為筆者一直使用的是Reactjs和React Native。

25.REST 客戶端

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

通過此擴展可輕松地在代碼編輯器中直接調用和結束，大大節省了時間——你可以使用這個方法，而不是只為實現一個請求而來回切換瀏覽器或郵箱。

圖源：unsplash

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

留言點贊關注

我們一起分享AI學習與發展的干貨

如轉載，請后臺留言，遵守轉載規范

著2019年的到來，Stack Overflow對2018年的IT生態調查顯示：Visual Studio Code超過Visual Studio一躍成為榜首，成為“最受歡迎的開發環境”，沒有之一！

VScode的免費，開源，輕量，快速，強大，智能提示已經讓它火遍了全球，今天就來讓我們來學習一下VScode的八個提升開發效率的小貼士，讓你的開發效率up up up！

1. 按下ctrl+K，再按下ctrl+S，查看快捷鍵列表。

如果你想查看某個操作的快捷鍵，你并不用去看官方文檔，只需要調出快捷鍵列表，在上方搜索欄搜索你想要的操作，即可獲知對應的快捷鍵組合。

2. 按下ctrl+P，彈出搜索欄，直接輸入關鍵字，在所有文件中搜索特定符號：

在所有文件內搜索"employee"關鍵字

在搜索欄前輸入”@“，在當前文件中搜索特定符號：

在當前打開文件中搜索”employee“關鍵字

在搜索欄前輸入”>“，搜索所有可使用的命令比如我想使用spring initializr擴展的命令, 創建一個Maven工程：

搜索”spring initializr：Generate a Maven Project”命令

3. 在閱讀代碼的時候，常常需要在不同的文件間切換，這時會出現“看了這個忘了那個”的現象，我們可以在插件市場中下載Bookmarks插件，助你更快標記、尋找某塊代碼。

運用第二條的知識，ctrl+P，再輸入">"，輸入插件名，查看該插件的命令：

標記圖中36-38行代碼

選擇命令Toggle Labeled（標記并給該標記命名），為其命名“getId”后，當我們在別的文件中時，我們可以直接搜索該標簽，跳轉至標記處~

選擇Bookmarks：List from All Files 陳列出你的標簽

看到了我們剛才標記的代碼塊~Enter鍵直接跳轉~

4. 對某個函數或變量，右鍵點擊，在不移動目前代碼位置的前提下，查看其定義和引用。

右鍵，點擊peek definition

彈出該屬性的定義

同理，還可以看這個函數或變量在哪里被引用：選擇”peek reference“

查看變量的引用位置

彈出變量的引用位置

5. 通過ctrl+=和ctrl+-組合來進行縮放。

當你覺得現在的字體有點小，看不清，或者有點大，你不必去在設置菜單欄里面繞個暈頭轉向，你只需用如上兩個組合鍵來進行縮放即可。

放大

縮小

6. 使用Paste Json As Code擴展，將復制黏貼來的json文件直接序列化成代碼。

舉例：

將如下json文件：

json文件

序列化為Java代碼：

直接打開命令板，輸入Paste Json As Code的命令即可，十分方便。

7. 使用安裝量高達一千兩百萬的Gitlens擴展，助你更好地進行代碼合作，查看代碼更改歷史。

結合GitLens，你從github上clone下來的代碼上就會出現代碼作者，代碼commit的具體時間：

可以看到作者Greg Turnquist在三件前對改代碼做了commit

點擊右上角新出現的“Toggle File Blame Annotation”按鈕，對比展示你的代碼與原repo的區別：

點擊改圖標

查看你更改后的與原版本代碼的區別

分割線左側是原repo，右側是我們更改后的代碼，我們可以看到具體的代碼作者和commit時間。

在左側的action bar中，新出現了GitLens的圖標，點擊后，詳細查看branch，master，commit的信息：

可以看到當前repo的整個commit歷史，作者的github頭像也能看到，點擊某個修改歷史，直接就可以看到該修改和修改前代碼的所有區別。

8. 壓軸出場：微軟主打的革命性開發擴展：VS Live Share，在這個擴展的加持下，你可以和你的同事完成真正的遠程實時代碼協同開發，對方并不需要將整個工程clone下來，只需要連接到你開的session，你和他就可以對一個文件進行開發，修改。

Visual Studio Live Share enables you to collaboratively edit and debug with others in real time, regardless what programming languages you're using or app types you're building. It allows you to instantly (and securely) share your current project, and then as needed, share debugging sessions, terminal instances, localhost web apps, voice calls, and more! Developers that join your sessions recieve all of their editor context from your environment (e.g. language services, debugging), which ensures they can start productively collaborating immediately, without needing to clone any repos or install any SDKs.
VS live share 讓你可以實時與你的合作者協同編輯，調試代碼，不管你是在使用何種語言，開發何種應用。它讓你可以實時并安全地分享你的當前工程，并且如果需要，甚至可以分享調試會議，命令行示例，本地web應用，語音通話，甚至更多！參加會議的開發者可以從你的環境中接收到所有的編輯內容（比如語言服務，調試），確保參會者可以高效合作，無需克隆項目代碼并安裝開發包。

使用起來很容易，安裝該擴展：

enable該擴展，reload你的VScode，然后看到左下角的Live Share圖標：

跳轉至瀏覽器頁面:

使用我們的GitHub賬號登陸（也可以用微軟賬號）。

隨后回到我們的VS live share界面中，可以看到：

實時代碼沙龍

只有我一個人，那如何讓別人也參與進來呢？

點擊該圖標

每一個舉辦的實時代碼會議，都有一個網址，也就是url地址，點擊這個按鈕，該地址會自動進入你的剪貼板中，你只需把這個url發送給你的同事，你的同事在瀏覽器中進入這個網址：

可以看到這個代碼實時會議是我開的，然后直接點擊自動彈出的Open Live Share for VS Code，你的VScode就會自動啟動，打開之后，你已經進入了該代碼實時會議，可以和大家開始共享整個工程，甚至可以用voice call和他們實時語音交流，共同享受代碼協作開發的樂趣。

原文地址：https://zhuanlan.zhihu.com/p/54164612

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

第一部分主要介紹VsCode的基本技巧，比如常用快捷鍵、輔助標尺等。熟悉此部分的可以直接跳過。
第二部分主要各種斷點（比如日志斷點、內聯斷點、表達式斷點等等）、數據面板等等
第三部分主要講解各種項目的調試實戰，比如Node程序、TS程序、Vue程序、Electron程序、Html等的調試實戰
最后一部分將會講解其他有用的技巧，比如代碼片段、重構、Emmet等等

基本技巧

快速啟動

VsCode安裝后，會自動寫入環境變量，終端輸入code即可喚起VsCode應用程序。

常用快捷鍵

ctrl + p快速搜索文件并跳轉，添加:可以跳轉到指定行

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

alt + 上鍵或下鍵將當前行或者選中的區域上移/下移一行

垂直標尺

在配置文件中添加如下配置，可以增加字符數標尺輔助線

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

進階技巧

斷點的基本使用

下面以在VsCode中快速調試一個Node項目為例，演示斷點的基本使用。后文會繼續結束各種高級斷點。

創建一個基本的node項目為Nodejs
打開左側調試面板，選擇你要調試的node項目名稱，添加調試配置

選擇調試的項目類型為Node.js

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

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

在程序中添加斷點，只需要點擊左側的邊欄即可添加斷點

按F5開始調試，成功調試會有浮窗操作欄

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

繼續(F5)、
調試下一步(F10)、
單步跳入(F11)、
單步跳出(Shift F11)、
重新調試(Ctrl + Shift + F5)、
結束調試(Shift + F5)

日志斷點

日志斷點是普通斷點的一種變體，區別在于不會中斷調試，而是可以把信息記錄到控制臺。日志斷點對于調試無法暫停或停止的服務時特別有用。步驟如下:

添加日志斷點的步驟

輸入要日志斷點的信息，點擊回車添加完成

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

日志斷點添加成功后會有是一個菱形圖標

按F5運行查看調試結果

表達式條件斷點

條件斷點是表達式結果為true時才會進行斷點，步驟如下:

在代碼行左側右擊，也可以添加斷點，此處選擇添加條件斷點

填寫表達式，按回車鍵

添加成功的小圖標如下

按F5調試，條件成立所以進行了斷點

命中計數斷點

只有該行代碼命中了指定次數，才會進行斷點。步驟如下:

選擇條件斷點，切換為命中次數選項，填寫命中次數

填寫成功如下圖所示

按F5調試，如圖所示，index為9時才中斷

內聯斷點

僅當執行到達與內聯斷點關聯的列時，才會命中內聯斷點。這在調試在一行中包含多個語句的縮小代碼時特別有用。比如for循環，短路運算符等一行代碼包含多個表達式時會特別有用。步驟如下:

在指定位置按Shift + F9

調試之后，每次運行到該內聯處的代碼都會中斷

補充知識點：數據面板介紹

數據面板可以查看所有變量

在變量上點擊右鍵，可以設置變量值、復制變量值等操作

聚焦于數據面板時，可以通過鍵入值來搜索過濾。點擊下圖所示按鈕可以控制是否篩選。

補充知識點：監聽面板介紹

可以將變量添加到監聽面板，實時觀察變量的變化。

在變量面板通過右鍵選擇“添加到監視”將變量添加到監聽面板

也可以直接在監聽面板選擇添加按鈕進行變量添加

添加變量后就可以實時監聽變量的變化

補充知識點：調試服務器時打開一個URI

開發 Web 程序通常需要在 Web 瀏覽器中打開特定 URL，以便在調試器中訪問服務器代碼。VS Code 有一個內置功能“ serverReadyAction ”來自動化這個任務。

一段簡單的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是設置匹配的程度端口號，端口號放在小括號內，即作為一個正則的捕獲組使用。uriFormat映射為URI，其中%s使用pattern中的第一個捕獲組替換。最后使用該URI作為外部程序打開的URI。

按F5調試，會自動打開瀏覽器，且會在下圖所示處中斷，當繼續執行后，瀏覽器才能看到輸出了server的內容

終局：各場景調試實戰

調試NodeJS項目

關于NodeJs項目的調試方法，已經在上述的斷點的基本使用部分做了介紹，可以網上滾動翻閱。

調試Typescript項目

調試TS項目前，先創建一個TS項目

先初始化一個ts程序，生成默認的tsconfig.json文件

# 終端運行 tsc --init 復制代碼

打開tsconfig.json文件，開啟sourceMap選項和指定編譯后輸出的路徑

VS Code 內置了對 Ts 調試的支持。為了支持調試 Ts 與正在執行的 Js 代碼相結合，VS Code 依賴于調試器的source map在 Ts 源代碼和正在運行的 Js 之間進行映射，所以需要需要開啟sourceMap選項。
{ "sourceMap": true, "outDir": "./out" } 復制代碼

新建index.ts文件，寫一個基本的ts代碼

const num: number=123; console.log(num); function fn(arg: string): void { console.log('fn', arg); } fn("Hello"); 復制代碼
手動編譯調試TS
在上述的ts基本項目中：

終端執行ts的編譯命令tsc

此時可以看到生成了out文件夾，里面包含一個index.js和一個index.js.map文件

在index.ts中隨意添加一個斷點

按F5或者運行 -> 啟動調試，此時可以看到可以正常debug調試

通過構建任務構建調試TS

按Ctrl+Shift+B或選擇終端 -> 運行生成任務，此時會彈出一個下拉菜單

選擇tsc構建選項，此時可以看到自動生成了編譯文件

注意，如果你使用的是其他終端(比如cmder)的話，有可能會生成不了，如下圖所示，使用默認的powershell即可：

調試的話和上述步驟一樣，在有了編譯后的文件后，按F5即可

監視改變并實時編譯

按Ctrl + Shift + B選擇監視選項，可以實時監視文件內容發生變化，重新編譯

如下圖所示，會實時編譯

補充知識點：tasks配置文件的創建方式

方法1：點擊終端 -> 配置任務 -> 選擇任務可以生成對應的tasks.json配置

方法2：點擊終端 -> 運行生成任務 -> 點擊設置圖標也可以生成對應的tasks.json配置

補充知識點：每次調試時重新編譯

按上述的操作已經生成了task.json配置文件

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

點擊運行 -> 添加配置 -> 選擇nodejs

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

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

在index.ts文件中按F5啟動調試，可以看到調試前已經生成了編譯文件，而后就可以正常調試了。

補充知識點：VsCode的TS版本說明

vscode本身內置了對ts的支持
vscode內置的ts版本（即工作區版本），僅僅用于IntelliSense（代碼提示），工作區ts版本與用于編譯的ts版本無任何關系。

修改工作區ts版本的方法：

在狀態欄選擇typescript的圖標，選擇版本切換

選擇你需要的版本即可

調試html項目

學會了上述ts的調試后，我們嘗試調試html文件，并且html文件中引入ts文件:

創建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啟動命令配置

{
  // 使用 IntelliSense 了解相關屬性。 
  // 懸停以查看現有屬性的描述。
  // 欲了解更多信息，請訪問: 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: 構建 - tsconfig.json",
      "webRoot": "${workspaceFolder}"
    }
  ]
}

選擇我們的啟動命令

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

調試Vue項目的兩種方式

下面介紹兩種調試vue2項目的3種方法，其他框架的調試也類似：

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

初始化vue項目，配置vue.config.js，指定要生成sourceMaps資源

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

根目錄下創建./vscode/launch.json文件或者選擇運行 -> 添加配置 -> 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"
    }
  ]
}

添加任務腳本

{
  "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
      }
    }
  ]
}

該腳本的作用是運行npm run serve編譯命令。

按F5啟動調試即可

注意：此方式的主要點在于launch.json配置文件中，通過preLaunchTask字段指定調試前先運行一個任務腳本，preLaunchTask的值對應tasks.json文件中的label值。

更多詳細內容，大家可以點擊這里的參考文檔查閱。

借助vscode插件Debugger for Chrome在Chrome中調試

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

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

vscode中擴展中安裝Debugger for Chrome插件，并確保沒有禁用插件

手動啟動項目的運行, 此方式不需要配置tasks.json任務

# 終端執行命令，啟動項目
npm run serve

按F5啟動調試即可

更多詳細內容，請點擊這里的參考文檔查閱。

借助vscode插件Debugger for Firfox在Firefox中調試

和Debugger for Chrome基本一樣，區別在于安裝Debugger for Firfox插件，并在launch.json配置中，增加調試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}/" }]
    }
  ]
}

調試時選擇對應的調試命令即可

Firefox初始啟動時不會觸發調試，需要刷新一次

調試Electron項目

Electron很多人都使用過，主要用于開發跨平臺的系統桌面應用。那么來看下vue-cli-electron-builder創建的Electron項目怎么調試。步驟如下：

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

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

創建調試配置.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"]
    }
  ]
}

此處配置了兩個調試命令: Electron: Main用于調試主進程，Electron: Renderer用于調試渲染進程；compounds[].選項用于定義復合調試選項; configurations定義的復合命令是并行的; preLaunchTask用于配置命令執行前先執行的任務腳本，其值對應tasks.json中的label字段; preLaunchTask用在compounds時，用于定義configurations復合任務執行前先執行的腳本。

創建任務腳本

{
  // 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\\."
        }
      }
    }
  ]
}

啟動調試

在主進程相關代碼上打上斷點，然后啟動調試主進程命令就可以調試主進程了

注意，這里的options參數是根據實際的情況，自定義添加我們運行項目時所需要的參數，比如我這里因為啟動項目的npm命令是:

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

主進程調試成功

開始調試渲染進程

切換到渲染進程的調試選項，在渲染進程的代碼處打上斷點，點擊調試。注意，此時并不會有斷點終端，需要ctrl+r手動刷新軟件進程才會看到渲染進程的斷點。

刷新渲染進程后的效果，如下圖，已經進入了斷點

另一種方式

同時開啟渲染進程和主進程的調試，只需要切換到調試全部的選項即可。注意，此種方式因為compounds[].configurations配置是并行執行的，并不一定能保證渲染進程調試一定能附加到主進程調試成功（估計是時機問題），有些時候會調試渲染進程不成功。所以，可以采取上面的方式進行調試。

更多調試Electron的內容，可以點擊參考文檔查閱。

補充：更進一步

VS調試React app文檔
VS調試Next.js文檔
更多...

其他技巧

技巧一：代碼片段（snippets）

從擴展商店中安裝snippets

@category:"snippets"

創建全局代碼片段

選擇文件 -> 首選項 -> 用戶片段
選擇新建全局代碼片段文件

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

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

關鍵詞	類型	說明
scope	string	代碼片段生效的作用域，可以是多個語言，比如javascript,typescript表示在js和ts生效，不加scope字段表示對所有文件類型生效
prefix	`string	string[]`
body	string[]	代碼片段內容，數組的每一項會是一行
description	string	IntelliSense 顯示的片段的可選描述
1 -1?n	-	定義光標的位置，光標根據數字大小按tab依次跳轉；注意>$0<是特殊值，表示光標退出的位置，是最后的光標位置。

在鍵盤輸入log時效果如下

指定光標處的默認值并選中

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

指定光標處的默認值有多個，并提供下拉選擇

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

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

新建當前工作區的代碼片段

只需要選擇文件 -> 首選項 -> 用戶片段 -> 新建xxx文件夾的代碼片段, 新建后會在當前工作區生成.vscode/xxx.code-snippets文件

技巧二：Emmet

vscode內置了對Emmet的支持，無需額外擴展。例如html的Emmet演示如下:

技巧三：對光標處代碼變量快速重命名

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

技巧四：代碼重構建議

選中要重構的代碼，點擊出現的黃色小燈的圖標

選中重構的類型

輸入新的變量名

還可以重構到函數

TS中還可以提取接口等等

補充：VsCode擴展插件開發

VsCode擴展插件可以做什么事情？

定制主題、文件圖標
擴展工作臺功能
創建webView
自定義新的語言提示
支持調試特定的runtime

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

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

# 終端運行，主要node版本需要12及以上，node10會安裝報錯
npm i -g yo generator-code

運行yo code創建命令，選擇要生成的項目模板。這里演示New extension

根據提示依次選擇

生成的內容如下

按F5生成編譯項目，此時會自動打開一個新窗口
在新窗口按Ctrl+Shfit+P,輸入Hello World命令

此時會彈出一個彈窗的效果

至此，一個最簡單的插件就完成了

在線咨詢

上一篇：JavaScript 保留兩位小數
下一篇：HTML5從入門到精通：第二章 HTML詳解

您的項目需求

*請認真填寫需求信息，我們會在24小時內與您取得聯系。

整合營銷服務商

25個最佳的VSCode擴展！帶你領略VSCode的

基本技巧

快速啟動

常用快捷鍵

垂直標尺

進階技巧

斷點的基本使用

日志斷點

表達式條件斷點

命中計數斷點

內聯斷點

補充知識點：數據面板介紹

補充知識點：監聽面板介紹

補充知識點：調試服務器時打開一個URI

終局：各場景調試實戰

調試NodeJS項目

調試Typescript項目

補充知識點：tasks配置文件的創建方式

補充知識點：每次調試時重新編譯

補充知識點：VsCode的TS版本說明

調試html項目

調試Vue項目的兩種方式

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

借助vscode插件Debugger for Chrome在Chrome中調試

借助vscode插件Debugger for Firfox在Firefox中調試

調試Electron項目

補充：更進一步

其他技巧

技巧一：代碼片段（snippets）

從擴展商店中安裝snippets

創建全局代碼片段

新建當前工作區的代碼片段

技巧二：Emmet

技巧三：對光標處代碼變量快速重命名

技巧四：代碼重構建議

補充：VsCode擴展插件開發

您的項目需求