当前位置: 首页 > news >正文

vscode插件开发

 准备

安装开发依赖

npm install -g yo generator-code

安装后,运行命令

yo code

 

运行 

打开项目, 点击 vscode 调式

 按 F5 或点击调试运行按钮

会打开一个新窗口,在新窗口按快捷键 `Ctrl+Shift+P` ,搜索 Hello World 选择执行

右下角出现消息弹窗,说明运行成功

项目解释

回到项目

package.json 主要配置文件

开发中文文档

VS Code插件创作中文开发文档

 开发测试

实现一个 Vue 项目提供代码片段 和 javascript 项目提供代码片段;

创建一个 snippets 目录 和 两个文件 js.json 、vue3.json

 

 js.json

{
  "create axios modul": {
    "prefix": "logs",
    "body": [
      "console.log($1)",
      "",
      "console.log($2)"
    ],
    "description": "create console"
  }
}

 vue3.json

{
  "Vue Component": {
    "prefix": "vue3",
    "body": [
      "<template>",
      "</template>",
      "",
      "<script setup>",
      "import { ref } from 'vue'",
      "</script>",
      "",
      "<style lang='less' scoped>",
      ".demo-page { height: 100%; }",
      "</style>"
    ],
    "description": "Create a Vue component"
  }
}

更新 package.json 配置,在 contributes 里面添加以下代码

    "snippets": [
      {
        "language": "javascript",
        "path": "./snippets/js.json"
      },
      {
        "language": "vue",
        "path": "./snippets/vue3.json"
      }
    ]

描述

运行

保存后,重启下调试

 在调试新窗口,添加一个 test.js 文件和 test.vue 文件

在 test.js 文件,输入 logs 就会出现代码提示

在 test.vue 文件,输入 vue3 就会出现代码提示

打包

安装依赖 vsce

npm install -g vsce

 执行打包命令

vsce package

遇到报错

ERROR  Make sure to edit the README.md file before you package or publish your extension. 

 编辑下 README.md 文件,以下示例模板

# My Extension

A Visual Studio Code extension that does amazing things!

## Features

- Feature 1: Describe feature 1.
- Feature 2: Describe feature 2.

## Installation

1. Open Visual Studio Code.
2. Go to the Extensions view by clicking on the Extensions icon in the Activity Bar on the side of the window or by pressing `Ctrl+Shift+X`.
3. Search for "My Extension".
4. Click the Install button.

## Usage

1. Open a file in Visual Studio Code.
2. Press `Ctrl+Shift+P` and type "My Extension: Do Something".
3. Enjoy the magic!

## Configuration

This extension provides the following settings:

- `myExtension.enable`: Enable or disable the extension. Default is `true`.

## Examples

Here are some examples of how to use this extension:

```json
{
    "myExtension.enable": true
}

 遇到警告1

 WARNING  A 'repository' field is missing from the 'package.json' manifest file.

在 package.json 文件中添加 repository 字段

  "repository": {
    "type": "git",
    "url": "https://example.com/your-username/your-repo-name.git"
  },

遇到警告2

 WARNING  LICENSE.md, LICENSE.txt or LICENSE not found

创建一个许可证文件 LICENSE.md ,输入以下内容(参考),将 [Year] 替换为当前年份,将 [Your Name] 替换为你的名字或组织名称

MIT License

Copyright (c) [Year] [Your Name]

Permission is hereby granted, free of charge, to any person obtaining a copy
of this software and associated documentation files (the "Software"), to deal
in the Software without restriction, including without limitation the rights
to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
copies of the Software, and to permit persons to whom the Software is
furnished to do so, subject to the following conditions:

The above copyright notice and this permission notice shall be included in all
copies or substantial portions of the Software.

THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
SOFTWARE.

更新 package.json 配置,publisher 的值替换为你的名字或组织名称(跟上面一至)

  "publisher": "your-publisher-name",
  "license": "MIT",

 

前面两个警告也可以临时忽略,不影响打包(但是打包后只能本地加载,不能发布线上)

 打包成功

打包成功后,根目录会生成一个 .vsix 文件

本地加载插件

 点击扩展 --- 加载刚刚打包的 .vsix 文件

加载并启用后,就可本地使用了

发布插件

发布插件前,可以先在插件市场搜索一下,是否有重名;

打开 Visual Studio Marketplace发布者管理页面

注意事项 

1、需要微软账号(可以直接注册);

2、需要能访问谷歌的网络(架梯子);

3、具备以上两点后,在创建发布者页面填写组织名称和ID(组织名称和ID要与前面 遇到警告2 里面解决方案填写的组织者名称一致)即可创建发布者;

4、创建发布者后,就可上传应用;

5、上传后等待审核,审核成功后就可以在应用市场搜索到;

注册成功后

在管理页面上传应用 

选择应用

选择打包好的 .vsix 文件上传

1、如遇到上传错误,一般为项目配置里面的组织名称与发布者名称不一致 或者 插件名称已在市场存在等问题;

2、在发布插件前,可以先在插件市场搜索一下,是否有重名;

 参考

开发一个自己的VSCode插件_vscode插件开发官方文档-CSDN博客

vscode插件开发教程 - 简书

相关文章:

  • 50道题快速复习MySQL之准备篇
  • Unity截取RenderTexture某帧画面显示在Image上
  • 装多系统踩的坑
  • Unity中可靠的UDP实现
  • 三层渗透测试-DMZ区域 二三层设备区域
  • Redis 过期键(expires)机制详解
  • 【个人开发】deepspeed+Llama-factory 本地数据多卡Lora微调【完整教程】
  • 2025三掌柜赠书活动第五期:Elasticsearch实战(第2版)
  • 250217-数据结构
  • Jetson Agx Orin平台JP6.0-r36.3版本修复了vi模式下的原始图像损坏(线条伪影)
  • DeepSeek等大模型功能集成到WPS中的详细步骤
  • 【javascript】录音可视化
  • C++反转字符串
  • Android MVC、MVP、MVVM、MVI的架构的区别
  • numpy库
  • 基于若依开发的工程项目管理系统开源免费,用于工程项目投标、进度及成本管理的OA 办公开源系统,非常出色!
  • spring boot知识点1
  • matlab 三维时频图绘制
  • 蓝桥杯篇---IAP15F2K61S2矩阵键盘
  • js第八题
  • 美国考虑让移民上真人秀竞逐公民权,制片人称非现实版《饥饿游戏》
  • 一旅客因上错车阻挡车门关闭 ,株洲西高铁站发布通报
  • 时隔3年,持续近2小时,俄乌在土耳其谈成了什么?
  • 国家统计局公布2024年城镇单位就业人员年平均工资情况
  • 探秘多维魅力,长江经济带、珠三角媒体总编辑岳阳行启动
  • 一图读懂丨创新创业人才最高补贴500万元!临港新片区发布创客新政“十二条”