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出场了, 毕竟我们以后要封装很多命令与操作，工程化一点是必要的.

最外层新建src文件夹
extension.js 改名 index.js, 放入src文件夹内.
package.json中设置路径 “main”: “./src/index.js”(重点入口文件)
新建“目录.md”文件，把插件的简介完善一下，保证任何时候最快速度理解项目。
新建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"],

“*” 就是进来就激活, 因为他是任何时机(不建议使用这个).
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
}

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

在这里插入图片描述