手摸手开发一款vscode 代码提示插件 - 关键点介绍,代码实战「这是我参与2022首次更文挑战的第8天，活动详情查看

「这是我参与2022首次更文挑战的第8天，活动详情查看：2022首次更文挑战」。

package.json 详结

activationEvents

插件在什么状态下激活,因为插件默认都是不激活的,那激活的时机咱们罗列一下

onLanguage:${language}
onCommand:${command
onDebug
workspaceContains:${toplevelfilename}
onFileSystem:${scheme}
onView:${viewId}
onUri
Start up

onLanguage

"activationEvents": [
  "onLanguage:json",
  "onLanguage:markdown",
  "onLanguage:typescript"
]

onCommand

1.  "activationEvents": [
        "onCommand:extension.sayHello"
1.  ]

onDebug

"activationEvents": [
  "onDebug"
]

workspaceContains 以协议（scheme）打开文件或文件夹时触发。通常是file-协议，也可以用自定义的文件供应器函数替换掉，比如

"activationEvents": [
  "onFileSystem:sftp"
]

onView

"activationEvents": [
  "onView:nodeDependencies"
]

onUri 插件的系统级URI打开时触发。这个URI协议需要带上vscode或者 vscode-insiders协议。URI主机名必须是插件的唯一标识，剩余的URI是可选的。例如 vscode://vscode.git/init

"activationEvents": [
  "onUri"
]

Start up 当VS Code启动时触发。为了保证良好的用户体验,不建议添加这个激活事件

"activationEvents": [
  "*"
]

下面开始直接进入开发要是想了解更多[小茗同学的博客园]

实战部分

创建项目

给项目起个名字z-ui,很多配置资源自己获取都在这里源码

运行和调试插件

找到extension.js,入口文件

9ee4972c63c14e3a83ef891bbdc7048f_tplv-k3u1fbpfcp-watermark.webp

4b5226db738e4b19979f3fcc9692cbe5_tplv-k3u1fbpfcp-watermark.webp

到这个真正开始咱们的代码,以支持vue文件为例子在 package.json activationEvents 添加 "onLanguage:vue",contributes

	"activationEvents": [
		"onCommand:z-ui.helloWorld",
		"onLanguage:vue"
	],

	"contributes": {
		"commands": [
			{
				"command": "z-ui.helloWorld",
				"title": "Hello World"
			}
		],
		"snippets": [
			{
				"language": "vue-html",
				"path": "./snippets/ui-tag.json"
			}
		]
	},

主要是配置咱们的代码段,现在就有提示了

基于配置的就到这里了,后续需要js 代码了,不方便写咱们上源码

源码