如何写一个vscode插件

1.运行yo code创建项目

2.选择使用yarn或者npm

3.运行

官网这个例子需要我们 ctrl + shirt + p 调出输入框, 然后在里面输入hello w 就可以如图所示

activationEvents: 当什么情况下, 去激活这个插件

activationEvents.onCommand: 在某个命令下激活(之后会专门列出很多其他条件)

定义命令

contributes.commands: 你可以理解为’命令’的列表
command: 命令的id (上面就是依靠这个id 找到这个命令)
title: 命令语句(可以看下图)

所以extension.js里面的registerCommand('lulu.helloWorld' 就是指定了, 这个命令Id 被执行的时候, 该执行的操作!

之所以标题里说这个例子不是太好, 就是因为我们平时较少用vscode的命令去做某个操作, 并不会很生动的把我们带入进去

4.项目结构微改 + 提示的类型

一个extension.js文件已经满足不了我们的’xie.nian’了, 所以我们要把它稍微改造一下.
老朋友src出场了, 毕竟我们以后要封装很多命令与操作， 工程化一点是必要的.

1. 最外层新建src文件夹

2. extension.js 改名 index.js, 放入src文件夹内.

3. package.json中设置路径 “main”: “./src/index.js”(重点入口文件)

4. 新建“目录.md”文件， 把插件的简介完善一下， 保证任何时候最快速度理解项目。

5. 新建message.js文件, 放置弹出信息代码.

   index文件: 只负责导出引入各种功能, 不做具体的操作

index文件: 只负责导出引入各种功能, 不做具体的操作

const message = require('./message.js');

 function activate(context) {
    context.subscriptions.push(message);
}

module.exports = {
    activate
}

message.js 触发各种提示框

const vscode = require('vscode');
module.exports = vscode.commands.registerCommand('lulu.helloWorld', function () {
  vscode.window.showInformationMessage('第一个demo弹出信息!');
  vscode.window.showWarningMessage('第一个警告信息')
  vscode.window.showErrorMessage('第一个错误信息!');
});

5.激活的时机

出于性能的考虑, 我们的组件并不是任何时候都有效的, 也就是说不到对应的时机我们的组件处于未被激活的状态, 只有当比如说遇到js文件才会生效, 遇到scss文件才会生效, 只能某个命令才能生效等等情况.
在package.json的activationEvents数组属性里面进行修改.
这里只是常用的类型, 具体的可以去官网文档查看.

    "activationEvents": [
        "onCommand:hello.cc",  // 执行hello命令时激活组件
        "onLanguage:javascript",  // 只有是js文件的时候激活组件(你可以做js的代码检测插件)
        "onLanguage:python", // 当时py文件的时候
        "onLanguage:json",
        "onLanguage:markdown",
        "onLanguage:typescript",
        "onDebug", // 这种生命周期的也有
        "*",
        "onStartupFinished"
    ],

1. “*” 就是进来就激活, 因为他是任何时机(不建议使用这个).
2. onStartupFinished他就友好多了,相当于但是他是延迟执行, 不会影响启动速度, 因为他是浏览器启动结束后调用(非要用""可以用这个代替).

这里有个坑点, 比如你有a,b 两个命令, 把a命令设为触发时机, 那么如果先执行b命令会报错, 因为你的插件还未激活.

6.生命周期

与其他库一样, 生命周期是必不可少的(*摘自官网*).

• onLanguage
• onCommand
• onDebug
  • onDebugInitialConfigurations
  • onDebugResolve
• workspaceContains
• onFileSystem
• onView
• onUri
• onWebviewPanel
• onCustomEditor
• *
• onStartupFinished

7.window与mac的区别

我们知道, window与mac的案件是不大一样的, mac更多是使用command键, 这里我介绍一下分别设置快捷键.
在``里面contributes属性

 {
    "command": "hello.cc",
    "key": "ctrl+f10",
    "mac": "cmd+f10",
    "when": "editorTextFocus"
  }
],

8.when属性常用方式

接下来还有其他地方用到这个when属性那么这里就专门提一下吧
下面是比较常用的, 具体的要查官网, 毕竟太多了!

1. 要正确的理解when, 他不是字符串, 他是true 或 false的布尔, 写成字符串vscode会去解析的, 所以when可以直接传 true, false, 这里要注意, 是when: "true" when:"false"

2. 由第一条可知editorLangId其实就是运行时上下文的一个变量, 也就是文件类型名常量.

1. 编辑器获得焦点时
"when": "editorFocus"
2. 编辑器文本获得焦点
"when": "editorTextFocus"
3. 编辑器获取焦点并且四js文件的时候
"when": "editorFocus && resourceLangId == javascript"
4. 后缀不为.js
"when":"resourceExtname != .js"
5. 只在Linux,Windows环境下生效
"when": "isLinux || isWindows"

9.所在的位置 左侧, 右上, 菜单的上与下

这里也只介绍最常用与好用的, 很多偏门知识学了我的这篇文章你也一定可以很轻易的自学了.
①. 鼠标右键
新建navigation.js文件用来展示我们的功能是否生效.
在index.js里面引入

Package.json中修改

"activationEvents": [
        "onCommand:demo.nav"
	],

1: 定义一个命令, 然后下面定义快捷触发这个命令
	2: 定义导航内容, 并且绑定点击事件
	"contributes": {
		"commands": [
			{
				"command": "demo.nav",
				"title": "我是一个导航栏"
			}
		],
		"menus": {
			   "editor/context": [
				   {
					   "when": "editorFocus",
					   "command": "demo.nav",
					   "group": "navigation"
				   }
			   ]
		   }
	},

// const message = require('./message.js');
const vscode = require('vscode');
const navigation = require('./navigation.js');

 function activate(context) {
    vscode.window.showInformationMessage('插件成功激活!');
    // context.subscriptions.push(message);
    context.subscriptions.push(navigation);
}

module.exports = {
    activate
}

const vscode = require('vscode');

module.exports = vscode.commands.registerCommand('lulu.nav', function () {
  let day = new Date();
  day.setTime(day.getTime() + 24 * 60 * 60 * 1000);
  let date = day.getFullYear() + "-" + (day.getMonth() + 1) + "-" + day.getDate();
  vscode.window.showInformationMessage(`明天是: ${date}`);
});

新建的窗口中随便打开一个文档点击右键

运行命令

②. 右上按钮
其实挺少有插件用这里的, 反而这里的市场没被占用, 想开发插件的同学可以抢先占领一下.

    "menus": {
        "editor/title": [
            {
                "when": "editorFocus", // 你懂得
                "command": "demo.nav", // 引用命令
                "group": "navigation" // 放在导航最上方
            }
        ]
    }

③. 左侧导航栏, (这个我决定下面与tree一起讲, 因为那里是重点)

10. 加载的进度条(官网例子模糊)

package.json中

"activationEvents": [
        "onCommand:demo.progress"
	],
"commands": [
			{
				"command": "demo.process",
				"title": "我是一个进度条"
			}
		],
		为了方便 我们把它也定义在右键菜单里面
		"menus": {
			"editor/title": [
				   {
					   "when": "editorFocus",
					   "command": "demo.process",
					   "group": "navigation"
				   }
			   ]
		   }

Index.js中

const message = require('./message.js');
const vscode = require('vscode');
const navigation = require('./navigation.js');
const progress = require('./progress.js');

 function activate(context) {
    vscode.window.showInformationMessage('插件成功激活!');
    context.subscriptions.push(message);
    context.subscriptions.push(navigation);
    context.subscriptions.push(progress);
}

module.exports = {
    activate
}

新建progress.js文件

const vscode = require('vscode');

module.exports = vscode.commands.registerCommand('demo.progress', function () {
  vscode.window.withProgress({
    location: vscode.ProgressLocation.Notification,
    title: "载入xxxx的进度...",
    cancellable: true
  }, (progress) => {
    // 初始化进度
    progress.report({ increment: 0 });

    setTimeout(() => {
      progress.report({ increment: 10, message: "在努力。。。." });
    }, 1000);

    setTimeout(() => {
      progress.report({ increment: 40, message: "马上了..." });
    }, 2000);

    setTimeout(() => {
      progress.report({ increment: 50, message: "这就结束..." });
    }, 3000);

    const p = new Promise(resolve => {
      setTimeout(() => {
        resolve();
      }, 5000);
    });

    return p;
  })
});

11. hover的效果(官网例子模糊)

hover就不用去定义命令了, 因为他的触发规则就是悬停

新建一个hover.js文件

const vscode = require('vscode');
const path = require('path');

module.exports = vscode.languages.registerHoverProvider('javascript', {
  provideHover(document, position, token) {
    const fileName    = document.fileName;
    const workDir     = path.dirname(fileName);
    const word        = document.getText(document.getWordRangeAtPosition(position));
    console.log(1, document)
    console.log(2, position)
    console.log(3, token)
    console.log(4, '这个就是悬停的文字', word)
    // 支持markdown语法
    return new vscode.Hover(
    `### 我就是返回的信息!
      1. 第一项：
        - 第一个元素
        - 第二个元素
      2. 第二项：
        - 第一个元素
        - 第二个元素
  `);
  }
 }
);

Index.js

const message = require('./message.js');
const vscode = require('vscode');
const navigation = require('./navigation.js');
const progress = require('./progress.js');
const hover = require('./hover.js');

 function activate(context) {
    vscode.window.showInformationMessage('插件成功激活!');
    context.subscriptions.push(message);
    context.subscriptions.push(navigation);
    context.subscriptions.push(progress);
    context.subscriptions.push(hover);
}

module.exports = {
    activate
}

我先运行了一下之前的命令例如 又把鼠标移上去才可以了

由此可见, 我们hover的时候可以获得被悬停的文字, 可以获得其所在的文件位置, 那么我们就可以去node_modules里面查找对应的文件了, 然后获取到他的版本号与更新时间和官网地址, 所以那些在 package.json中hover出现详情的插件的原理, 你!懂!了!吧!

我们完全可以利用这个快捷查找一些你们公司内部的词汇的具体含义, 或者某些code与id 代表的含义.

12. 模板的定义, 打造属于自己团队的快捷开发

https://segmentfault.com/a/1190000038553748