Vscode插件开发

最新推荐文章于 2024-05-23 16:22:56 发布

eeenkidu

最新推荐文章于 2024-05-23 16:22:56 发布

阅读量937

点赞数

文章标签： vscode typescript

本文链接：https://blog.csdn.net/qq_37746855/article/details/114253547

版权

Vscode插件开发

脚手架的使用

安装脚手架

npm install -g yo generator-code

生成代码

cd myvscodetest
yo code

将询问一下问题，以获得所需不同选项输入。

?(1) What type of extension do you want to create? (Use arrow keys)
> New Extension (TypeScript)
  New Extension (JavaScript)
  New Color Theme
  New Language Support
  New Code Snippets
  New Keymap
  New Extension Pack
(Move up and down to reveal more choices)

?(2) What's the name of your extension? vscode-test

?(3) What's the identifier of your extension? (vscode-test)

?(4) What's the description of your extension? vscode-test

?(5) Initialize a git repository? (Y/n) y

?(6) Which package manager to use? (Use arrow keys)
> npm
  yarn

在这里插入图片描述

运行

在vscode中打开项目文件夹，直接F5运行vscode插件。

快捷键ctrl+shift+p

在这里插入图片描述

项目结构及部分重要代码

在这里插入图片描述

package.json：

{
  "name": "vscode-test",
  "displayName": "vscode-test",
  "description": "vscode-test",
  "keywords": [],
  "version": "0.0.1",
  "engines": {
    "vscode": "^1.33.0"
  },
  "categories": [
    "Other"
  ],
  // 扩展的激活事件
  "activationEvents": [
    "onCommand:extension.helloWorld"
  ],
  // 入口文件
  "main": "./out/extension.js",
  // 贡献点，vscode插件大部分功能配置都在这里
  "contributes": {
    "commands": [
      {
        "command": "extension.helloWorld",
        "title": "Hello World"
      }
    ]
  },
  "scripts": {
    "vscode:prepublish": "npm run compile",
    "compile": "tsc -p ./",
    "watch": "tsc -watch -p ./",
    "postinstall": "node ./node_modules/vscode/bin/install",
    "test": "npm run compile && node ./node_modules/vscode/bin/test"
  },
  "devDependencies": {
    "typescript": "^3.3.1",
    "vscode": "^1.1.28",
    "tslint": "^5.12.1",
    "@types/node": "^10.12.21",
    "@types/mocha": "^2.2.42"
  }
}

src/extension.js

import * as vscode from 'vscode';

/**
 * 插件被激活时触发，所有代码总入口
 * @param {*} context 插件上下文
 */
export function activate(context: vscode.ExtensionContext) {
    console.log('Congratulations, your extension "vscode-test" is now active!');

  // 注册命令
  let disposable = vscode.commands.registerCommand('extension.helloWorld', () => {
    vscode.window.showInformationMessage('Hello World!');
  });
  context.subscriptions.push(disposable);
}

//插件被释放时触发
export function deactivate() {}

添加右键菜单和快捷键

在package.json中添加：

{
    "contributes": {
        "commands": [
            {
                "command": "extension.helloWorld",
                "title": "Hello World"
            }
        ],
        // 快捷键绑定
        "keybindings": [
            {
                "command": "extension.helloWorld",
                "key": "ctrl+f10",
                "mac": "cmd+f10",
                "when": "editorTextFocus"
            }
        ],
        // 设置菜单
        "menus": {
            "editor/context": [
                {
                    "when": "editorFocus",
                    "command": "extension.helloWorld",
                    "group": "navigation"
                }
            ]
        }
    }
}

在这里插入图片描述

package.json

{
  // 插件的名字，应全部小写，不能有空格
  "name": "vscode-test",
  // 插件的友好显示名称，用于显示在应用市场，支持中文
  "displayName": "vscode-test",
  // 描述
  "description": "vscode-test",
  // 关键字，用于应用市场搜索
  "keywords": [],
  // 版本号
  "version": "0.0.1",
  // 发布者，如果要发布到应用市场的话，这个名字必须与发布者一致
  "publisher": "",
  // 表示插件最低支持的vscode版本
  "engines": {
    "vscode": "^1.33.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.helloWorld"
  ],
  // 主入口
  "main": "./out/extension.js",
  // 贡献点，整个插件最重要最多的配置项
  "contributes": {
    // 插件配置项
    "configuration": {
      "type": "object",
      // 配置项标题，会显示在vscode的设置页
      "title": "vscode-plugin-demo",
      "properties": {
        // 这里我随便写了2个设置，配置你的昵称
        "vscodePluginDemo.yourName": {
          "type": "string",
          "default": "guest",
          "description": "你的名字"
        },
        // 是否在启动时显示提示
        "vscodePluginDemo.showTip": {
          "type": "boolean",
          "default": true,
          "description": "是否在每次启动时显示欢迎提示！"
        }
      }
    },
    // 命令
    "commands": [{
      "command": "extension.helloWorld",
      "title": "Hello World"
    }],
    // 快捷键绑定
    "keybindings": [{
      "command": "extension.sayHello",
      "key": "ctrl+f10",
      "mac": "cmd+f10",
      "when": "editorTextFocus"
    }],
    // 菜单
    "menus": {
      // 编辑器右键菜单
      "editor/context": [{
        // 表示只有编辑器具有焦点时才会在菜单中出现
          "when": "editorFocus",
          "command": "extension.sayHello",
          // navigation是一个永远置顶的分组，后面的@6是人工进行组内排序
          "group": "navigation@6"
        },
        {
          "when": "editorFocus",
          "command": "extension.demo.getCurrentFilePath",
          "group": "navigation@5"
        },
        {
          // 只有编辑器具有焦点，并且打开的是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": "smile",
        "title": "微笑",
        "icon": "images/smile.svg"
      }]
    ,
    // 自定义侧边栏内view的实现
    "views": {
      // 和 viewsContainers 的id对应
      "smile": [{
          "id": "smile1",
          "name": "微笑1"
        },
        {
          "id": "smile2",
          "name": "微笑2"
        }
      ]
    },
    // 图标主题
    "iconThemes": [{
      "id": "testIconTheme",
      "label": "测试图标主题",
      "path": "./theme/icon-theme.json"
    }]
  },
  // 同 npm scripts
  "scripts": {
    "vscode:prepublish": "npm run compile",
    "compile": "tsc -p ./",
    "watch": "tsc -watch -p ./",
    "postinstall": "node ./node_modules/vscode/bin/install",
    "test": "npm run compile && node ./node_modules/vscode/bin/test"
  },
  // 开发依赖
  "devDependencies": {
    "typescript": "^3.3.1",
    "vscode": "^1.1.28",
    "tslint": "^5.12.1",
    "@types/node": "^10.12.21",
    "@types/mocha": "^2.2.42"
  },
  "license": "SEE LICENSE IN LICENSE.txt",
  "bugs": {
      "url": "https://github.com/cytgenkidu/vscode-test/issues"
  },
  "repository": {
      "type": "git",
      "url": "https://github.com/cytgenkidu/vscode-test"
  },
  "homepage": "https://github.com/cytgenkidu/vscode-test/blob/master/README.md"
}

请参考extension-manifest，查看关于package.json描述。

activationEvents

onLanguage
onCommand
onDebug
- onDebugInitialConfigurations
- onDebugResolve
workspaceContains
onFileSystem
onView
onUri
onWebviewPanel
*

请参考Activation Events，查看所有Activation描述。

contributes

configuration：设置
commands：命令
menus：菜单
keybindings：快捷键绑定
languages：新语言支持
debuggers：调试
breakpoints：断点
grammars
themes：主题
snippets：代码片段
jsonValidation：自定义JSON校验
views：左侧侧边栏视图
viewsContainers：自定义activitybar
problemMatchers
problemPatterns
taskDefinitions
colors

请参考Contribution Points，查看所有contribute描述。

链接与资源

Visual Studio Code Extension API

eeenkidu

关注

0
点赞
踩
4

收藏

觉得还不错? 一键收藏
打赏
0
评论
Vscode插件开发

Vscode插件开发脚手架的使用安装脚手架生成代码运行项目结构及部分重要代码添加右键菜单和快捷键package.jsonactivationEventscontributes链接与资源脚手架的使用安装脚手架npm install -g yo generator-code生成代码cd myvscodetestyo code将询问一下问题，以获得所需不同选项输入。?(1) What type of extension do you want to create? (Use arrow keys
复制链接

扫一扫