前言

Visual Studio Code（简称 VSCode）目前已经成为了大多数前端开发人员的标配IDE了，之所以有这么多开发者使用这款软件，我想最大的原因之一就是它的扩展系统。拥有了扩展系统，就能够DIY出属于自己的IDE，能够提升我们的开发效率，提升我们开发时的体验。

快速上手

安装：

npm install -g yo generator-code

我们首先使用npm安装官方提供的脚手架

yo code

# ? What type of extension do you want to create? New Extension (JavaScript)

# ? What's the name of your extension? HelloWorld

### Press <Enter> to choose default for all options below ###

# ? What's the identifier of your extension? helloworld

# ? What's the description of your extension? LEAVE BLANK

# ? Initialize a git repository? Yes

# ? Which package manager to use? npm

code ./helloworld

这里我们使用选择New Extension

和vscode扩展相关的定义我们会在package.json中声明

extension.js就是我们扩展的入口文件，在这里我们去定义一些命令。

创建命令

我们按住 commond + shift + p 就用调用出vscode的命令输入框，在这里我们可以执行一些列的已经定义好的命令，那么命令要如何创建呢？我们用一个最简单的Hello World的输出作为展示。

成功定义一条命令，需要三个前置条件：

绑定命令，确保我们能够执行

在package.json的activationEvents中，定义我们的命令ID，每一条命令都有一个ID，在这里就是 extension.helloWorld

定义命令名称，方便在命令输入框中搜索到命令

在package.json contributes.commands 中去关联命令ID和名称

注册命令函数，命令的执行程序

在入口文件中的activate方法中，我们注册了extension.helloWorld这条命令，当这条命令执行的时候，我们弹出消息框。

启动本地的调试功能，就可以测试我们写的Extension，他会启动一个新的vscode窗口，我们在命令行中输入Hello World可以看到

至此我们的扩展就开发完成。

代码片段补全

为了提升开发效率，我们希望输入一些关键字，vscode自动帮助我们补全所以的代码，举个🌰

输入map
// 自动联想
Array.map((item, index) => {
  return {
    // 返回的内容
  }
})

在package.json中 contributes.snippets 中，配置我们代码片段的指定语言和路径

snippets.javascript.json

{
  "map":{
    "prefix": "map",
    "body": [
      "${1:Array}.map((item, index) => {",
       "return {",
       "// return 内容",
       "}",
       "})"
    ],
    "description": "map方法的代码片段"
  }
}

prefix:指定前缀

body:我们自动填充的代码片段

description: 代码片段的描述

接下来，我们启动调试，看一下效果

标签自动补全

我们来实现一个 auto-close

language-configuration.json

{
  "autoClosingPairs": [
    {
      "open": "<div>",
      "close": "</div>"
    },
    {
      "open": "<p>",
      "close": "</p"
    }
  ],
  "autoCloseBefore": ">` \n\t",
}

结语

VS Code 还提供了非常多的API和配置方案供我们使用，感兴趣的同学可以去官网了解详情。掌握了这些，我们就能够实现属于自己的VS Code。

DIY属于自己的VS Code

前言