VS Code插件开发介绍（一）

thursday 发布于2019-08-23 12:17 / 2470人阅读

摘要：发布插件插件开发完后就可以发布了，需要安装安装完后，需要去注册并生成一个。总结本文介绍了插件开发的基本流程，实现了一个简单的插件。更多的开发技巧，可以看这个系列的第二篇插件开发介绍二

前言

前段时间做了一个基于命令行的效率工具，可以自动生成组件的模板代码。自己用起来还觉得挺好，但在组内案例几次后大家都不愿意用，究其原因还是命令行工具使用起来门槛有点高，不方便。由于组内已经统一使用VS Code进行开发了，于是决定研究下VS Code的插件开发，让效率工具更方便的用起来。

准备工作

为了降低开发门槛，微软做了一个Yeoman代码生成命令，可以很方便的生成插件开发需要的模板代码，可以通过以下命令安装：

// 安装
npm install -g yo generator-code

// 使用
yo code

运行完以上命令后会出现下面的操作界面，填入需要的信息即可。

运行示例代码

代码生成后，可以按F5开始调试插件，此时VS Code会新建一个实例并进入插件开发模式，开发中的插件可以在这个新的实例中使用。模版代码会生成一个名为Hello World的命令，按下⇧⌘P调出命令输入窗口，然后输入"Hello World"运行命令。如果找不到命令，重启下VS Code再重新运行。

修改代码

插件的入口代码在extension.js这个文件中，主要是修改activate函数：

export function activate(context) {

    // Use the console to output diagnostic information (console.log) and errors (console.error)
    // This line of code will only be executed once when your extension is activated
    console.log("Congratulations, your extension "my-first-extension" is now active!");

    // The command has been defined in the package.json file
    // Now provide the implementation of the command with  registerCommand
    // The commandId parameter must match the command field in package.json
    let disposable = vscode.commands.registerCommand("extension.sayHello", () => {
        // The code you place here will be executed every time your command is executed

        // Display a message box to the user
        vscode.window.showInformationMessage("Hello World!");
    });

    context.subscriptions.push(disposable);
}

我插件的功能是用户通过右键点击导航栏，获取选中文件夹的绝对路径，然后提示用户输入新组件的名字，然后自动帮用户生成组件的模板代码。

开发的关键点是如何获取文件夹绝对路径和获取用户输入的组件名。尤其是获取路径，找了很久才找到，官网的文档只字未提。先看代码：

function activate(context) {
    console.log("Congratulations, your extension "react-template" is now active!");

    // 注册一个名为createFunctionalComponent的命令
    const fc = vscode.commands.registerCommand("extension.createFunctionalComponent", function (param) {
        // 文件夹绝对路径
        const folderPath = param.fsPath;

        const options = {
            prompt: "请输入组件名: ",
            placeHolder: "组件名"
        }
        
        // 调出系统输入框获取组件名
        vscode.window.showInputBox(options).then(value => {
            if (!value) return;

            const componentName = value;
            const fullPath = `${folderPath}/${componentName}`;

            // 生成模板代码，不是本文的重点，先忽略
            generateComponent(componentName, fullPath, ComponentType.FUNCTIONAL_COMP);
        });
    });
    
    context.subscriptions.push(pc);
}

代码很简单，就不做讲解了。为了显示Create Functional Component这个菜单项，我们需要修改package.json文件的contributes字段。activationEvents字段也要相应的改下。同时为了给插件配一个图标，要加一个icon字段：

    "icon": "images/icon.png",
    "activationEvents": [
        "onCommand:extension.createFunctionalComponent"
    ],
    "contributes": {
        "commands": [
            {
                "command": "extension.createFunctionalComponent",
                "title": "Create Functional Component"
            }
        ],
        "menus": {
            "explorer/context": [
                {
                    "command": "extension.createFunctionalComponent",
                    "group": "1_modification"
                }
            ]
        }
    },

详细的contributes配置可以看这里。配置好menus之后，registerCommand的第二个函数参数就能取到文件或文件夹的绝对路径了。

发布插件

插件开发完后就可以发布了，需要安装vsce

npm install -g vsce

安装完后，需要去Azure DevOps注册并生成一个access token。详细的流程可以看这里。生成toke的时候有两个地方需要注意下：

token生成后就可以登录和发布了。如果有任何的修改，要注意修改package.json里面版本号才能发布成功。发布成功后，很快就能在VS Code的插件市场搜到了。

总结

本文介绍了VS Code插件开发的基本流程，实现了一个简单的插件。本文只涉及到VS Code插件系统的冰山一角，更多的高级功能以后接触到的时候再作介绍。如果想再作进一步的了解，可以从这里开始。更多的 VS Code 开发技巧，可以看这个系列的第二篇：VS Code插件开发介绍（二）

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/98260.html

# vs code Settings Sync 插件的详细介绍

摘要：插件的详细介绍由于越来越卡，有时敲一个回车都要一秒，实在是受不了，继而转向，用了一段时间发现在前端开发并不比差，而且又是微软开发，感觉很有前途，最重要的是，打开速度非常快，即使打开大文件，也不会卡。 vs code Settings Sync 插件的详细介绍由于webstorm越来越卡，有时敲一个回车都要一秒，实在是受不了，继而转向vs code，用了一段时间发现vs code在前端...

Me_Kun 2019-08-21 17:41 评论0 收藏0
VS Code插件开发介绍（二）

摘要：一前言在上一篇文章里，我简要介绍了插件开发的基本流程，同时讲解了如何获取文件夹绝对路径和用户输入的方法。了一圈，发现介绍这方面的文章很少，特此记录一下，希望对有类似需求的人有一些帮助。一、前言在上一篇文章里，我简要介绍了 VSCode 插件开发的基本流程，同时讲解了如何获取文件夹绝对路径和用户输入的方法。最近又开发了一个新的插件，主要用途是替换当前编辑文件的内容。google 了一...

muddyway 2019-08-23 14:21 评论0 收藏0
为什么我选择使用 VS Code进行前端开发?

摘要：我们团队有大部分人已经在用了，所以这周五在组内做了一个小分享，来发掘一些提高开发效率的小技巧。为什么选择在刚出来的时候，我就开始使用了如何评价理由很简单开源，免费，颜值高微软出品，实力保证。 showImg(https://segmentfault.com/img/remote/1460000010750652); 没错，我就是来给大家安利 VS Code 的。对前端来说，这是一款性...

liaosilzu2007 2019-08-21 12:01 评论0 收藏0
VS Code上手与超实用插件安利

摘要：软件跨平台支持以及，运行流畅，可谓是微软的良心之作微软有这个宇宙最强，自然也不会弱宇宙最强编辑器说到代码编辑器，我们有必要提一提还有。原文链接：VS Code上手与超实用插件安利工欲善其事必先利其器 Visual Studio Code (简称 VS Code / VSC) 是一款免费开源的现代化轻量级代码编辑器，支持几乎所有主流的开发语言的语法高亮、智能代码补全、自定义热键、括号...

miracledan 2019-08-21 17:46 评论0 收藏0
VS Code插件开发指南(view-readme)

摘要：本次给大家带来的分享是关于插件的一些经验，分享的内容是我写的一个插件。为了解决上面这个问题，我开发了这个插件。本次给大家带来的分享是关于VS Code插件的一些经验，分享的内容是我写的一个插件：view-readme。开发背景在本地安装好所有npm包后，有的时候想看看某个模块的文档，了解其特性以及如何使用。于是打开node_modules文件夹，大家都知道，这个文件夹里面的文件是...

yy736044583 2019-08-21 15:32 评论0 收藏0