vscode插件开发（新人向）

前言：本次出教程的原因是我在想帮作者维护插件和想自己开发插件的时候，看到了市面上的很多教程框范但是有许多细节未将讲到导致当时开发的时候被环境消耗了很多没必要的时间，所以觉得有必要写个教程避免新人入坑，老手建议看项目实战

可参考文献：官方开发文档 | 中文开发文档

目录

一、vscode插件能做什么？

vscode插件能做什么？其核心点在于vscode为其提供了哪些开放能力，只有其开放的能力才能为我们所用，就官网来看，利用vscode插件能够做以下事情（该部分来自于vscode官网扩展能力概述部分）：

通用功能

可以在任何扩展中使用的核心功能，主要包括以下几点：
（1）能够添加命令、配置项、快捷键、菜单项、右键菜单；

（2）存储工作区或全局数据；

（3）展示通知信息；

（4）使用快速选择收集用户的输入；

（5）打开文件选择器让用户去选择文件或文件夹；

（6）使用Progress API去阐述长时间运行的操作；

主题化

控制vscode的外观，包括编辑器中源代码的颜色和vscode ui的颜色，其主要包含三种类型的主题：
（1）颜色主题：其允许将颜色应用于VS Code UI组件和编辑器中的文本；

（2）文件图标主题：文件图标显示在VS Code UI中的位置，例如文件资源管理器、快速打开列表和编辑器选项卡；

（3）产品图标主题：在整个UI中使用的一组图标

声明性语言特性

声明性语言功能为编程语言添加了基本的文本编辑支持，例如括号匹配、自动缩进和语法突出显示。

程序语言特性

编程语言功能添加了丰富的编程语言支持，例如悬停、转到定义、诊断错误、IntelliSense 和 CodeLens。

扩展工作台

工作台是指包含标题栏、活动栏、侧边栏、控制板、编辑组、状态栏等UI组件的整体Visual Studio Code UI。VS Code提供了各种API，允许将自己的组件添加到工作台。
调试

可以通过编写将 VS Code 的调试 UI 连接到特定调试器或运行时的调试器扩展来利用 VS Code 的调试功能。

二、vscode插件的开发语言与结构？

1.开发语言

	主要使用两种脚本语言：TypeScript (ts) 与 JavaScript (js) 。

2.结构介绍

package.json

该文件是vscode扩展的清单文件，里面有很多字段，官方对每个字段都进行了详细阐述，本次我们重点阐述以下初始化后期清单文件。

	{
    "name": "demo", // 插件名
    "displayName": "插件", // 显示在应用市场的名字
    "description": "我的第一个插件测试", // 具体描述
    "version": "0.0.1", // 插件的版本号
    "engines": {
        "vscode": "^1.60.0" // 最低支持的vscode版本
    },
    "categories": [
        "Other" // 扩展类别
    ],
    // 激活事件组，在那些事件情况下被激活
    "activationEvents": [
        "onCommand:demo.helloWorld"
    ],
    // 插件的主入口文件
    "main": "./extension.js",
    // 贡献点
    "contributes": {
        // 命令
        "commands": [
            {
                "command": "demo.helloWorld",
                "title": "Hello World"
            }
        ]
    },
    "scripts": {
        "lint": "eslint .",
        "pretest": "npm run lint",
        "test": "node ./test/runTest.js"
    },
    // 开发依赖项
    "devDependencies": {
        "@types/vscode": "^1.60.0",
        "@types/glob": "^7.1.3",
        "@types/mocha": "^8.2.2",
        "@types/node": "14.x",
        "eslint": "^7.27.0",
        "glob": "^7.1.7",
        "mocha": "^8.4.0",
        "typescript": "^4.3.2",
        "vscode-test": "^1.5.2"
    }
}

在这份清单文件中，重点关注的主要有三部分内容：activationEvents、main以及contributes，其是整个文件中的重中之重。

1. main

指明了该插件的主入口在哪，只有找到主入口整个项目才能正常的运转、

2. activationEvents

指明该插件在何种情况下才会被激活，因为只有激活后插件才能被正常使用，官网已经指明了激活的时机，这样我们就可以按需设置对应时机。（具体每个时机用的时候详细查看即可）

• onLanguage 打开解析为特定语言文件时被激活，
• nLanguage:python"
• onCommand 在调用命令时被激活
• onDebug 在启动调试话之前被激活
• onDebugInitialConfigurations
• onDebugResolve
• workspaceContains 每当打开文件夹并且该文件夹包含至少一个与 glob 模式匹配的文件时
• onFileSystem 每当读取来自特定方案的文件或文件夹时
• onView 每当在 VS Code 侧栏中展开指定 id 的视图
• onUri 每当打开该扩展的系统范围的 Uri 时
• onWebviewPanel
• onCustomEditor
• onAuthenticationRequest
• onStartupFinished 只要一启动vscode，插件就会被激活

3. contributes

通过扩展注册contributes用来扩展Visual Studio Code中的各项技能，其有多个配置，如下所示：

• breakpoints 断点
• colors 主题颜色
• commands 命令
• configuration 配置
• configurationDefaults 默认的特定于语言的编辑器配置
• customEditors 自定义编辑器
• debuggers
• grammars
• iconThemes
• jsonValidation
• keybindings 快捷键绑定
• languages
• menus
• problemMatchers
• problemPatterns
• productIconThemes
• resourceLabelFormatters
• snippets 特定语言的片段
• submenus
• taskDefinitions
• themes 颜色主题
• typescriptServerPlugins
• views
• viewsContainers
• viewsWelcome
• walkthroughs

extension.js文件

该文件时其入口文件，即package.json中main字段对应的文件（不一定叫extension.js这个名字），该文件中将导出两个方法：activate和deactivate，两个方法的执行时机如下所示：

1. activate
   这是插件被激活时执行的函数
2. deactivate
   这是插件被销毁时调用的方法，比如释放内存等。

三、开发环境准备

使用编程语言与工具：npm、yarn、vsce、yo等

要在VS Code中编写插件，首先需要安装一些必要的工具和环境。以下是详细的步骤：

1.必须依赖包安装

安装Node.js（npm）和yarn：

Yarn和npm都是JavaScript包管理工具，但它们在功能和性能上有一些显著的区别。

npm是Node.js的默认包管理器，具有广泛的社区支持和兼容性，而Yarn则以其更快的安装速度、更好的版本一致性以及更简洁的输出而受到开发者的青睐。尽管npm的新版本已经解决了许多早期版本的问题，但在某些情况下，Yarn仍然提供了更好的性能和用户体验。

确保你的系统上已经安装了Node.js或yarn。你可以通过访问Node.js官网和Yarn官方来下载并安装这些工具。

npm安装yarn命令：

npm install -g yarn

2.实用工具安装

安装Git（可选）

Git是一个免费且开源的分布式版本控制系统，由Linus Torvalds开发，它通过存储代码的历史快照来跟踪文件的变化，允许多个开发者在各自的分支上工作并合并改动。

安装Yeoman和VS Code Extension Generator：

使用npm（Node.js的包管理器）来安装Yeoman和VS Code Extension Generator。打开终端或命令提示符，输入以下命令：

 npm install -g yo generator-code

上述命令其实安装了两个包（yo和generator-code)，这两个包用途如下：

yo模块全局安装后就安装了Yeoman，Yeoman是通用型项目脚手架工具，可以根据一套模板，生成一个对应的项目结构
generator-code模块是VS Code扩展生成器，与yo配合使用才能构建项目。

安装打包工具vsce：

 npm install -g vsce

3.常见问题与解决

版本落后

将相应软件都更新到最新版本，如npm与yarn等。

命令：如 npm update | yarn upgrade --latest

没有安装相应依赖

依赖下载或添加，推荐使用yarn，进入项目后输入yarn他会自动创建个相关依赖的文件比npm方便点。

四、项目实战与流程

1.创建基础模板

 yo code 

将会依次问你七个问题：

	创建的插件类型:（会根据你选择的类型，下载对应的模板。更多模板）
    插件的名称:
    插件的唯一标识id:
    插件的描述:
    是否需要git:
    构建工具选择：unbundled | webpack | esbuild:
    选择包管理工具: npm | yarn

如果你成功创建了项目，那么就可以进入开发阶段。

2.编写代码与调试

编写代码：编写哪部分的内容就可以查找官网文档中相应的模块编写代码（没办法，只能多看一点点来）

代码调试：按下f5，编译器会跳出个新的已应用插件效果的新窗口

3.打包并发布

当你完成插件的开发和测试后，可以将其发布到VS Code插件市场或者本地安装。首先，你需要在Visual Studio Marketplace上注册一个开发者账号。

打包插件的命令是：

 vsce package

本地安装：
![插.(httpomggLSJjYc/direct/9ab4927a9d21449080665c52956373ff.png)

插件发布：

• 直接发布

  vsce publish

• 手动发布
  1. 打开vscode marketplace
  2. 点击右上角的Publish extensions
  3. 创建一个publisher
  4. 填写Name、ID、Description，上传Logo
  5. 点击New extension，选择Visual Studio Code，将打包的vsix文件上传。
     等五分钟左右，就可以在插件市场搜到自己的插件了！

发布后，你的插件就会出现在VS Code插件市场中，其他用户可以通过搜索找到并安装你的插件。

五、总结

通过以上步骤，你就可以在VS Code中编写、运行、调试和发布自己的插件了。希望这些信息对你有所帮助，对了别忘了点赞与收藏，您的支持是我创造的最大动力！
​