VSCcode插件极简开发指南

作者 : 开心源码 本文共5394个字,预计阅读时间需要14分钟 发布时间: 2022-05-12 共151人阅读

前言

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

hexo cleanhexo ghexo d

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

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

准备

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

npm install -g yonpm 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? npmcode ./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 belowconst 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 deactivatedfunction 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
先写这么多吧到时候有时间再补详细点

说明
1. 本站所有资源来源于用户上传和网络,如有侵权请邮件联系站长!
2. 分享目的仅供大家学习和交流,您必须在下载后24小时内删除!
3. 不得使用于非法商业用途,不得违反国家法律。否则后果自负!
4. 本站提供的源码、模板、插件等等其他资源,都不包含技术服务请大家谅解!
5. 如有链接无法下载、失效或广告,请联系管理员处理!
6. 本站资源售价只是摆设,本站源码仅提供给会员学习使用!
7. 如遇到加密压缩包,请使用360解压,如遇到无法解压的请联系管理员
开心源码网 » VSCcode插件极简开发指南

发表回复