VSCcode插件极简开发指南

C#

浏览数:11

2019-10-10

前言

俗话说得好,懒惰使人进步
最近用hexo搭建了一个静态博客,不过发现每次写完总要打三个命令

hexo clean
hexo g
hexo d

像我这么懒的人显然是无法接受每次都要这样干的,所以我就干脆写了一个shell script,但毕竟每次还要在terminal里面输,还是太麻烦了Orz,所以就觉得干脆写一个VSCode的小插件来解决这个问题(虽然我既不会Javascript也不会Typescript,QAQ)

还是在开头放一个Github的链接好了。

准备

像Node.js和npm什么的肯定是要的了(虽然我不知道他们是干啥用的QWQ),先安装这两个东西:

npm install -g yo
npm install -g generator-code

然后就输入启动yo code之后就会有一大堆可以选择的东西(这里我偷懒就直接copy and paste 官网的东西了)

yo code

# ? What type of extension do you want to create? New Extension (TypeScript)
# ? 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
# ? Enable stricter TypeScript checking in 'tsconfig.json'? Yes
# ? Setup linting using 'tslint'? Yes
# ? Initialize a git repository? Yes
# ? Which package manager to use? npm

code ./helloworld

用VSCode打开刚建立的文件夹之后就可以继续了。
目录结构大概长这样:

.
├── CHANGELOG.md
├── README.md
├── extension.js
├── jsconfig.json
├── node_modules
├── package-lock.json
├── package.json
├── test
└── vsc-extension-quickstart.md

我们要关注的大概就只有extension.jspackage.json这两个文件(如果只是写一个小插件偷一下懒的话)

开始

打开extension.js之后应该是张这样的(别被吓到,大部分是注释)

// The module 'vscode' contains the VS Code extensibility API
// Import the module and reference it with the alias vscode in your code below
const vscode = require('vscode');

// this method is called when your extension is activated
// your extension is activated the very first time the command is executed

/**
 * @param {vscode.ExtensionContext} context
 */
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 "helloworld-minimal-sample" 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.helloWorld', () => {
        // 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);
}

// this method is called when your extension is deactivated
function deactivate() {}

module.exports = {
    activate,
    deactivate
}

然后另外一个就是package.json,这里直接我copy helloWorld的sample

{
    "name": "helloworld-sample",  //插件名称
    "displayName": "helloworld-sample",  //发布后展示的名称
    "description": "HelloWorld example for VS Code",  //介绍
    "version": "0.0.1",  //版本
    "publisher": "vscode-samples",  //发布者的名字,这个一开始是没有的,但一定要加上去!
    "repository": "url", //repo的连接这个也要写上
    "engines": {
        "vscode": "^1.25.0"
    },
    "categories": [  //类别
        "Other"
    ],
    "activationEvents": [
        "onCommand:extension.helloWorld" //命令,这个要和extension.js里面的对应才有用
    ],
    "main": "./out/extension.js",
    "contributes": { //这里面的东西会出现在插件页面“贡献”那一栏上
        "commands": [
            {
                "command": "extension.helloWorld",
                "title": "Hello World"
            }
        ]
    },
    ...
}

可以看到json里面的extension.helloWorld和js里面... vscode.commands.registerCommand('extension.helloWorld' ...是相对应的,也就是说如果要添加什么事件,在json里面加完之后,如果主程序的函数必须要与其相对应。

那我们就现在开始添加自己需要的东西了。因为我把插件命名为了hexo-one,所以也顺便将其改为这个。

...
"publisher": "Meowcolm024",
"license": "MIT",
"repository": {
    "type": "git",
    "url": "https://meowcolm024.visualstudio.com/DefaultCollection/VSCode%20Extension/_git/hexo-one"
    },
...
"activationEvents": [
        "onCommand:hexo-one.pushHexo",
        "onCommand:hexo-one.newPost"
    ],
...
"contributes": {
        "commands": [
            {
                "command": "hexo-one.pushHexo",
                "title": "Push Hexo"
            },
            {
                "command": "hexo-one.newPost",
                "title": "New Hexo Post"
            }
        ],
        "keybindings": [  //快捷键
            {
                "command": "hexo-one.pushHexo",
                "key": "ctrl+p ctrl+h"
            },
            {
                "command": "hexo-one.newPost",
                "key": "ctrl+n ctrl+p"
            }
        ]
    },

也就是要把publisher加上(这个后面再说),还有repo的地址,我们同时可以事件加上快捷键。这样package.json部分就算完成了

然后我们回到extension.js里面。(虽然不会JavaScript,但照葫芦画瓢还是可以的)。我们要做的只不过是让插件帮我们执行几个命令,所以可以先写一个执行系统命令的函数(这个还是可以Google到的)

function runCmd(cmd) {
    const {workspace} = require('vscode');
    const options = {
        cwd: workspace.rootPath, // 要把路径设定到工作区才行
        env: process.env
    }
    const { exec } = require('child_process');
        exec(cmd, options, (err, stdout, stderr) => {
            if(err) {
                console.log(err);
                return;
            }
            console.log(`stdout: ${stdout}`);
            console.log(`stderr: ${stderr}`);
            vscode.window.showInformationMessage(stdout); // 这一行是给vscode的输出
        })
}

然后我们回到上面function active(context) 那里,找到他们已经给我们准备好的一个函数,稍作修改即可:

let disposable = vscode.commands.registerCommand('hexo-one.pushHexo', function () {
        runCmd('hexo clean \n hexo g \n hexo d');
        vscode.window.showInformationMessage('Deploying Hexo, please wait...');
    });  
context.subscriptions.push(disposable);

想要偷懒的的话,也可以直接copy and paste这一段然后稍作修改作为我们另外一个Event的函数:

let disposable2 = vscode.commands.registerCommand('hexo-one.newPost', function() {
        const options = {
            ignoreFocusOut: true,
            password: false,
            prompt: "Please type the title of your post"
            };
      // 这里稍微用到了VSCode的API,基本上就是弹出输入框然后检测内容是否为空,然后再执行相应的命令
        vscode.window.showInputBox(options).then((value) => {
            if (value === undefined || value.trim() === '') {
            vscode.window.showInformationMessage('Please type the title of your post');
            }else{
                const title = value.trim();
                const cmd = "hexo new \"" + title + "\""
                runCmd(cmd);
            }});
    });
  context.subscriptions.push(disposable2);

(这里很明显是偷懒了,直接加一个“2”完事)

到了这里基本上就已经完事了,然后我们需要打包发布(当然还要先创建一个publisher)。
不过我们还是要先安装:

npm install -g vsce

然后输入

vsce create-publisher xxxxxx #一个名字,然后按照后面的instructions就是了
# Publisher human-friendly name: xxx xxx
# Email: xxx@xxx.com
# Personal Access Token: *.... (这里是一个比较tricky的部分)

关于那个Personal Access Token,需要在Visual Studio Team Services里面注册/登陆之后找到Security那里新建一个Token,选择All accessible organizations,而Scopes里面则要勾选Marketplace中所有的项目,详细的话参见这个链接
然后我们可以干这些事了:

vsce package  #如果你想生成本地插件的文件的话(当然不生成也行)
vsce publish  #将插件发布到VSCode的Marketpla上面

到这里最简单的应该就搞定了,如果想具体参考一下我这个extension的话,那我就把Github的链接放在这里

orz 简书的json和bash居然没有syntax highlighting
先写这么多吧到时候有时间再补详细点

作者:Meowcolm024