有没有专业做艺术品的网站,网站开发课,陕西网站建设哪家专业,陕煤化工建设集团网站vscode插件开发功能很强大#xff0c;但是网上的资料很少#xff0c;整理下自己使用的插件接口。
安装
npm install -g yo generator-code
yo codetips: 提示’yo’ 不是内部或外部命令#xff0c;也不是可运行的程序或批处理文件。 需要新增node的环境变量#xff1a;C:…vscode插件开发功能很强大但是网上的资料很少整理下自己使用的插件接口。
安装
npm install -g yo generator-code
yo codetips: 提示’yo’ 不是内部或外部命令也不是可运行的程序或批处理文件。 需要新增node的环境变量C:\Users\用户\AppData\Roaming\npm
成功之后会有模板创建的一系列问题 ? What type of extension do you want to create(您想要创建什么类型的扩展?)?
New Extension (JavaScript) New Extension (TypeScript) 新扩展名TypeScript New Extension (JavaScript) 新扩展JavaScript New Color Theme 新颜色主题 New Language Support 新语言支持 New Code Snippets 新代码段 New Keymap 新密钥映射 New Extension Pack 新扩展包 New Language Pack (Localization) 新语言包本地化
? What’s the name of your extension(你的是项目名什么在应用市场的名字 demo
? What’s the identifier of your extension你的插件名是什么? demo
? What’s the description of your extension扩展的描述
? learn vscode plugin
? Enable JavaScript type checking in ‘jsconfig.json’在’jsconfig.json’中启用JavaScript类型检查? Yes
? Initialize a git repository初始化一个git仓库? Yes
? bundel the source code with webpack (是否用webpack打包源码) Yes
? Which package manager to use使用哪个包管理器? yarn
调试
在代码区 F5 打开 扩展开发宿主 可以在宿主环境里面调试插件效果涉及到webview 在宿主环境ctrshiftP搜索webview选择打开开发人员工具
如果代码有更新在宿主区ctrlR更新挂载
发布
方法一直接把文件夹发给别人让别人找到vscode的插件存放目录并放进去然后重启vscode一般不推荐 方法二打包成vsix插件然后发送给别人安装如果你的插件涉及机密不方便发布到应用市场可以尝试采用这种方式 方法三注册开发者账号发布到官网应用市场这个发布和npm一样是不需要审核的。
本地打包 指令
npm i vscode/vsce -Dvsce package根据编辑命令会生成 displayName version .vsiv 的插件
周期函数
├── CHANGELOG.md 插件变更记录 ├── README.md ├── extension.js 插件入口main文件 ├── jsconfig.json 编辑器关于js的配置 ├── package.json 全局配置 ├── test 测试代码文件夹 │ ├── extension.test.js │ └── index.js ├── vsc-extension-quickstart.md └── yarn.lock
插件默认入口文件为extension.js
入口文件主要声明两个周期
activate插件被激活时执行的方法deactivate插件被销毁时调用的方法
package.json
{// 插件的名字应全部小写不能有空格name: vscode-plugin-demo,// 插件的友好显示名称用于显示在应用市场支持中文displayName: VSCode插件demo,// 描述description: VSCode插件demo集锦,// 关键字用于应用市场搜索keywords: [vscode, plugin, demo],// 版本号version: 1.0.0,// 发布者如果要发布到应用市场的话这个名字必须与发布者一致publisher: sxei,// 表示插件最低支持的vscode版本engines: {vscode: ^1.27.0},// 插件应用市场分类可选值 [Programming Languages, Snippets, Linters, Themes, Debuggers, Formatters, Keymaps, SCM Providers, Other, Extension Packs, Language Packs]categories: [Other],// 插件图标至少128x128像素icon: images/icon.png,// 扩展的激活事件数组可以被哪些事件激活扩展后文有详细介绍activationEvents: [onCommand:extension.sayHello],// 插件的主入口main: ./src/extension,// 贡献点整个插件最重要最多的配置项contributes: {// 插件配置项configuration: {},// 命令commands: [{command: extension.sayHello,title: Hello World}],// 快捷键绑定keybindings: [{command: extension.sayHello,key: ctrlf10,mac: cmdf10,when: editorTextFocus}],// 菜单menus: {// 编辑器右键菜单editor/context: [{// 表示只有编辑器具有焦点时才会在菜单中出现when: editorFocus,command: extension.sayHello,// navigation是一个永远置顶的分组后面的6是人工进行组内排序group: navigation6},{when: editorFocus,command: extension.demo.getCurrentFilePath,group: navigation5},{// 只有编辑器具有焦点并且打开的是JS文件才会出现when: editorFocus resourceLangId javascript,command: extension.demo.testMenuShow,group: z_commands},{command: extension.demo.openWebview,group: navigation}],// 编辑器右上角图标不配置图片就显示文字editor/title: [{when: editorFocus resourceLangId javascript,command: extension.demo.testMenuShow,group: navigation}],// 编辑器标题右键菜单editor/title/context: [{when: resourceLangId javascript,command: extension.demo.testMenuShow,group: navigation}],// 资源管理器右键菜单explorer/context: [{command: extension.demo.getCurrentFilePath,group: navigation},{command: extension.demo.openWebview,group: navigation}]},// 代码片段snippets: [{language: javascript,path: ./snippets/javascript.json},{language: html,path: ./snippets/html.json}],// 自定义新的activitybar图标也就是左侧侧边栏大的图标viewsContainers: {activitybar: [{id: beautifulGirl,title: 美女,icon: images/beautifulGirl.svg}]},// 自定义侧边栏内view的实现views: {// 和 viewsContainers 的id对应beautifulGirl: [{id: beautifulGirl1,name: 国内美女},{id: beautifulGirl2,name: 国外美女},{id: beautifulGirl3,name: 人妖}]},// 图标主题iconThemes: [{id: testIconTheme,label: 测试图标主题,path: ./theme/icon-theme.json}]},// 同 npm scriptsscripts: {postinstall: node ./node_modules/vscode/bin/install,test: node ./node_modules/vscode/bin/test},// 开发依赖devDependencies: {typescript: ^2.6.1,vscode: ^1.1.6,eslint: ^4.11.0,types/node: ^7.0.43,types/mocha: ^2.2.42},
}常用API 指令 vscode.commands.registerCommand(指令名称, function () {}) 需要在package.json里面注册下 activationEvents: [onCommand: 指令名称
],
contributes: {commands: [{command: 指令名称,title: 查找出来的指令名称}],}提示语 vscode.window.showInformationMessage(提示语); -----------------vscode右下角的一些提示弹窗 弹窗选择 vscode.window.showQuickPick([下拉内容]).then(() {}) ctrlP的效果会有下拉内容可以选择 vscode.window.showInputBox({}).then((){}) 输入框 得到光标选中的词汇
const editor vscode.window.activeTextEditor;
if(editorundefined){return;};
const text editor.document.getText(editor.selection); // 拿到选中的单词替换光标选中内容
editor.edit((editBuilder) {const range new vscode.Range(editor.selection.start, editor.selection.end);editBuilder.replace(range, item.description)
});鼠标悬停 注册事件package.json里面也得写
vscode.languages.registerHoverProvider(需要支持该功能的文件格式比如javascript, 悬停后执行的方法)new vscode.Hover(悬停显示的内容);创建webview
const panel vscode.window.createWebviewPanel(testWebview, // viewTypeappwiki: 视图标题,vscode.ViewColumn.Two, // 显示在编辑器的哪个部位{enableScripts: true, // 启用JS默认禁用retainContextWhenHidden: true, // webview被隐藏时保持状态避免被重置});panel.webview.html 需要展示的html内容;// 因为webviewpanel在js里面不能直接处理所以需要通知panel处理通过vscode.postMessage(message)传递消息panel.webview.onDidReceiveMessage(message {得到消息处理message });
