文共3530字，预计学习时长13分钟

市场营销最强策略之一：在人们知道自己需要什么之前帮助他们意识到自己需要什么。这一点上，VSCode深谙其道。

VSCode可能是目前最为流行的代码编辑器，就是因为它满足了每一个开发人员的需求，甚至可能开发人员自己都不清楚的需求。这就是VSCode的独特魅力。

VSCode是为现代技术而创建的，因而大多数VSCode爱好者都是JavaScript开发人员。目前流行的JavaScript框架对于VSCode来说早已完美无缺，它拥有你所需要的一切。

科技日新月异，选择文本编辑器时，一定要选最新最好的。优秀的开发人员不能不舍得花时间。但这并不是说应该转而学习另一种语言，或者另一个框架。

正如笔者在之前的博客中一直强调的那样，开发人员应当追上潮流，保持敏锐，了解最新信息，并将它们与目前使用的工具进行比较，了解其中区别及其优缺点，观察其支撑和在社区中的发展，稳定至关重要。这会大大提升你的工作效率。

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请求。

通过此扩展可轻松地在代码编辑器中直接调用和结束，大大节省了时间——你可以使用这个方法，而不是只为实现一个请求而来回切换浏览器或邮箱。

无论是追求高效，还是寻求体验，在这里你都将找到满意的答案。

留言点赞关注

我们一起分享AI学习与发展的干货

如转载，请后台留言，遵守转载规范

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('')"
  }
}

• 在键盘输入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命令

• 此时会弹出一个弹窗的效果

• 至此，一个最简单的插件就完成了