VSCcode插件极简开发指南
前言
俗话说得好,懒惰使人进步
最近用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.js
和package.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插件极简开发指南