vscode插件开发

木心操作

已于 2025-02-17 10:16:59 修改

阅读量541

点赞数 12

分类专栏：开发工具 javascript 文章标签： vscode ide 编辑器 javascript

于 2025-02-17 10:06:04 首次发布

本文链接：https://blog.youkuaiyun.com/qq_41579327/article/details/145653248

版权

javascript 同时被 2 个专栏收录

27 篇文章

订阅专栏

开发工具

12 篇文章

订阅专栏

准备

安装开发依赖

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、上传后等待审核，审核成功后就可以在应用市场搜索到；