乐趣区

关于前端:从0到1开发一款自己的vscode插件

jiezi

一、vscode 插件是什么？

大家对 vscode 必定都不生疏，其是微软推出的一款轻量级代码编辑器，在应用的时候总会时不时的装置一些插件去帮助咱们进行开发，这些插件就是利用 vscode 给咱们凋谢的一些 API 的根底上进行扩大性能的开发，从而解决开发中的一些问题，进步生产效率。这种插件化思维一方面使该代码编辑器更轻量化；另一方面可能充分利用社区的力量，为其提供更加多元化的插件。（下图是我做的一个小插件的效果图）

二、vscode 插件能做什么？

vscode 插件能做什么？其外围点在于 vscode 为其提供了哪些凋谢能力，只有其凋谢的能力能力为咱们所用，就官网来看，利用 vscode 插件可能做以下事件（该局部来自于 vscode 官网扩大能力概述局部）：

  1. 通用性能

能够在任何扩大中应用的外围性能，次要包含以下几点：

（1）可能增加命令、配置项、快捷键、菜单项、右键菜单；

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

（3）展现告诉信息；

（4）应用疾速抉择收集用户的输出；

（5）关上文件选择器让用户去抉择文件或文件夹；

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

  1. 主题化

管制 vscode 的外观，包含编辑器中源代码的色彩和 vscode ui 的色彩，其次要蕴含三种类型的主题：

（1）色彩主题：其容许将色彩利用于 VS Code UI 组件和编辑器中的文本；

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

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

  1. 申明性语言个性

申明性语言性能为编程语言增加了根本的文本编辑反对，例如括号匹配、主动缩进和语法突出显示。

  1. 程序语言个性

编程语言性能增加了丰盛的编程语言反对，例如悬停、转到定义、诊断谬误、IntelliSense 和 CodeLens。

  1. 扩大工作台

工作台是指蕴含标题栏、流动栏、侧边栏、控制板、编辑组、状态栏等 UI 组件的整体 Visual Studio Code UI。VS Code 提供了各种 API，容许将本人的组件增加到工作台。

  1. 调试

能够通过编写将 VS Code 的调试 UI 连贯到特定调试器或运行时的调试器扩大来利用 VS Code 的调试性能。

三、vscode 插件实战

vscode 插件其实是 vscode 对外提供了一些能力，如果不是特地须要其实没有必要残缺的学习整体内容，仅仅须要理解其大体开发思路、可能解决的问题，之所以这么说是因为（以上纯个人观点，不肯定正确）学习该局部的内容须要肯定精力，但学后并不一定可能在本人我的项目中失去应用，深刻学习投入于产出并不成正比，所以本次我只会讲述入门级内容，具体的内容扔须要读者在须要这一部分能力的时候再深入研究。

3.1 我的项目初始化

官网为了不便开发人员进行 vscode 插件的开发，提供了对 yo 应的脚手架来生成对应的我的项目。

// 装置须要的包
npm install -g yo generator-code
// 运行
yo code

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

  1. yo 模块全局装置后就装置了 Yeoman，Yeoman 是通用型我的项目脚手架工具，能够依据一套模板，生成一个对应的我的项目构造
  2. generator-code 模块是 VS Code 扩大生成器，与 yo 配合应用能力构建我的项目。

3.2 重要文件

在我的项目生成之后，目录构造如下所示，其中最重要的文件是 package.json 和 extension.js，理解这两个文件基本上就能够入门开发一个 vscode 插件了。

#### 3.2.1 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

指明了该插件的主入口在哪，只有找到主入口整个我的项目能力失常的运行、

  1. activationEvents

指明该插件在何种状况下才会被激活，因为只有激活后插件能力被失常应用，官网曾经指明了激活的机会，这样咱们就能够按需设置对应机会。（具体每个机会用的时候具体查看即可）

  • onLanguage 关上解析为特定语言文件时被激活，例如 ”onLanguage:python”
  • onCommand 在调用命令时被激活

  • onDebug 在启动调试话之前被激活

    • onDebugInitialConfigurations
    • onDebugResolve
  • workspaceContains 每当关上文件夹并且该文件夹蕴含至多一个与 glob 模式匹配的文件时
  • onFileSystem 每当读取来自特定 计划 的文件或文件夹时
  • onView 每当在 VS Code 侧栏中开展指定 id 的视图
  • onUri 每当关上该扩大的零碎范畴的 Uri 时
  • onWebviewPanel
  • onCustomEditor
  • onAuthenticationRequest
  • * 只有一启动 vscode，插件就会被激活
  • onStartupFinished
  1. 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

3.2.2 extension.js 文件

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

  1. activate

这是插件被激活时执行的函数

  1. deactivate

这是插件被销毁时调用的办法，比方开释内存等。

3.3 实战

上述曾经对 vscode 插件有了根底的意识，上面就进行一个简略的实战，打造属于本人的一个 vscode 插件，此插件的性能如下：

  1. 通过在文件编辑区域或文件名上右击弹出按钮，点击按钮获取文件的大小、创立工夫和批改工夫；
  2. 如果获取的是文件夹，则指明该文件是文件夹，不是文件，给予提醒。

3.3.1 package.json 批改项

{
    // ……
    // 在 getFileState 指令下激活
    "activationEvents": ["onCommand:getFileState"],
    // 入口文件
    "main": "./extension.js",
    "contributes": {
        // 命令
        "commands": [
            {
                "command": "getFileState",
                "title": "File State"
            }
        ],
        // 菜单项
        "menus": {
            // 编辑上下文菜单
            "editor/context": [
                {
                    "when": "editorFocus",
                    "command": "getFileState",
                    "group": "navigation"
                }
            ],
            // 资源管理器上下文菜单
            "explorer/context": [
                {
                    "command": "getFileState",
                    "group": "navigation"
                }
            ]
        }
    },
    // ……
}

3.3.2 主函数内容

const vscode = require('vscode');
const fs = require('fs');

function activate(context) {console.log('插件曾经被激活');

    // 注册命令
    let commandOfGetFileState = vscode.commands.registerCommand('getFileState', uri => {
        // 文件门路
        const filePath = uri.path.substring(1);
        fs.stat(filePath, (err, stats) => {if (err) {vscode.window.showErrorMessage(` 获取文件时遇到谬误了 ${err}!!!`)
            }

            if (stats.isDirectory()) {vscode.window.showWarningMessage(` 检测的是文件夹，不是文件，请从新抉择！！！`);
            }

            if (stats.isFile()) {
                const size = stats.size;
                const createTime = stats.birthtime.toLocaleString();
                const modifyTime = stats.mtime.toLocaleString();

                vscode.window.showInformationMessage(`
                    文件大小为:${size}字节;
                    文件创建工夫为:${createTime};
                    文件批改工夫为:${modifyTime}
                `, {modal: true});
            }
        });
        
        const stats = fs.statSync(filePath);
        console.log('stats', stats);
        console.log('isFile', stats.isFile());
    });

    // 将命令放入其上下文对象中，使其失效
    context.subscriptions.push(commandOfGetFileState);
}

function deactivate() {}

module.exports = {
    activate,
    deactivate
}

3.3.3 效果图

通过开发后，该插件调试成果如下所示：

3. 4 公布

插件认识结束之后就是须要分享进来供大家应用，目前有三种形式：

  1. 间接把文件夹发给他人，让他人找到 vscode 的插件寄存目录并放进去，而后重启 vscode，个别不举荐；
  2. 打包成 vsix 插件，而后发送给他人装置，如果你的插件波及秘密不不便公布到利用市场，能够尝试采纳这种形式；
  3. 注册开发者账号，公布到官网利用市场，这个公布和 npm 一样是不须要审核的。

每一种形式都可行，并且网上也有很多教程讲述其公布形式，明天我重点讲述一下第二种，毕竟在插件这么多的状况下，很多人更乐于开发一款属于本人的专用插件或者特定本人畛域应用的插件，齐全没必要公布到利用市场。

  1. 装置对应的模块 vsce
npm i vsce -g
  1. 利用 vsce 进行打包，生成对应的 vsix 文件
vsce package

  1. 装置到 vscode

  1. 装置实现之后就能够失常的进行应用了

四、总结

因为工作中目前还没有遇到这种需要，此次我只是对 vscode 插件的开发流程进行了一个简略的概述，并没有进一步深刻摸索，待工作中有这样的场景须要这样的能力去解决某些问题时，可能快速反应有这样的解决方案，再进一步学习也为时不晚，也心愿爱学习的小伙伴们也对这一部分可能有肯定理解，补救本人常识上欠缺的一环，后续为己所用。

五、参考文献

vscode 插件编写实战

vscode 插件开发全攻略

官网文档

1. 如果感觉这篇文章还不错，来个分享、点赞吧，让更多的人也看到

2. 欢送关注公众号 前端点线面, 开启前端救赎之路。

退出移动版