vscode 插件开发入门

vscode 插件

介绍

年前最后几天无聊的时候在看vscode 插件开发的官方api。看的的确很久，年后上班的时候，试着尝试写一个小的插件，这个插件是记录 文件作者信息以及上次修改时间，之前用过类似的插件，感觉体验不太好，不知道现在是否还ok，所以就自己撸了一个，也算是一次尝试。

hello world

官方demo

ps. 按着来， 生成一个小的demo，再直接改demo。 我选的是typescript（我并不会）

思路

1. 通过看package.json 文件,发现 程序的入口文件是extend.js ,也就是extend.ts编译后的文件.
2. 打开extend.ts后,大概看一遍,提炼出三个有用的东西
   
export function activate(context: vscode.ExtensionContext){...}

   一看就是入口函数,接受的参数是vscode的某个对象.
   
let disposable = vscode.commands.registerCommand(string,callback)

   从字面意思,我知道这是一个注册命令的函数,第一个参数应该是命令的标题,第二个是命令输入后的回调函数.
   
context.subscriptions.push(disposable);

   这句话估计也就是把这个注册的命令抛出吧什么的.
3. 看了这三个东西之后,详细把registerCommand 的callback 里面的东西改了之后,打一些日志什么的. 把第一个参数,改了个名字. 顺便打开package.json ,有用的几行代码为

"activationEvents": [
        "onCommand:extension.sayHello"
    ],
"contributes": {
    "commands": [
        {
            "command": "extension.sayHello",
            "title": "set name"
        }

    ]   
 },

看到这两个地方的extendsion.sayHello,肯定不管三七二十一,把他们改成和registerCommand 注册的标题一样的字段. title 字段代表的是输入的命令字段.

4. 运行,ctrl+shift+p,输入命令set name,发现整个流程一切ok的话,我们就可以开搞了.

开搞

1. 记录时间肯定是需要,通过ctrl+s 的时候调用. 所以查文档.
   不得不说vscode 的文档写的真好.
   https://code.visualstudio.com/docs/extensionAPI/vscode-api

   在这个vscode namespace api 里面的commands 里面,直接就看到了keybinding, 一看就是快捷键绑定.

2. 不过 看了文档后, 其他的部分都是一样的,.ts文件不需要改,只用在package.json文件里面添加

"keybindings":[
            {
                "command": "extension.sayHello",
                "key": "ctrl+s"
            }
        ]

1. 可以通过快捷键调用自己的写的命令之后,然后就是如何让文件保存,因为ctrl+s 被覆盖了. 看遍文档后,找到executeCommand 这个函数,意思就是执行命令函数.那么如果知道vscode 如何通过自身的命令保存文件就好.
2. 文件 > 首选项 > 键盘快捷方式,在这里面找到了保存的命令workbench.action.files.save
3. 然后就是 如何把注释插入当前活动的文件里面,(ps. 说实话,这个函数我找了好久, 因为诸多原因)

 insert(uri: Uri, position: Position, newText: string): void

通过 vscode.window.activeTextEditor.document.uri 得到当前文件得uri

通过new Position() 注册位置,(不太懂ts,真的是头疼)

newText 接受得是插入得日志文件

最后再applyEdit()

1. 知道这几个api 后,很明显已经很容易完成这个插件.然后就是如何记录用户得名字. 后来测试发现 可以直接使用fs模块,在初始得时候,通过用户输入命令,然后让用户输入名字,把名字存为文件.
2. 完毕.

打包上线

1. 用npm安装vsce

2. 获得token https://code.visualstudio.com/docs/extensions/publish-extension#_common-questions

3. vsce create-publisher username //注册开发者.username 为名字.

4. vsce publish

本插件使用api汇总

1. vscode.window.showInformationMessage() //通知框

2. vscode.commands.executeCommand() //执行命令

3. new vscode.WorkspaceEdit().replace();new vscode.WorkspaceEdit().insert() //代替文本,插入文本

4. vscode.workspace.applyEdit() //应用修改

5. vscode.commands.registerCommand() //注册命令

结束

源码 https://github.com/wjiban/vscode_extend-jsinfo

插件名字 jsinfo 开发者wjiban

ps. 写的不对还请指出.