0
0

前端从零到一开发vscode插件并发布到插件市场

前端从零到一开发vscode插件并发布到插件市场

背景

vscode作为前端开发神器，功能十分强大，这背后是大量vscode插件在支持。比如用react的snippets插件，只需输入rfc即可快速生成一个模版，大大提高了我们的开发效率，也可提早下班。
在这里插入图片描述
作为多年的资深前端，假如我们开发一个好用的插件，同事用上我们的插件，不得大大的说声牛逼😎，同时也是提高段位和收入的好方法。

开发插件的路并非一帆风顺，今天就记录下开发插件的过程和踩过的坑
在这里插入图片描述
所有的步骤都已走通，如果有帮助，请小伙伴们点赞关注😄

下边进入主题

目标

  1. 初级：掌握注册、开发、发布全流程-用小demo实现
  2. 进阶：开发代码片段差价

成果展示

大家可在vscode搜索taro-code
在这里插入图片描述
输入代码提示效果
在这里插入图片描述

一条龙实现过程

安装插件脚手架和工具

# 安装插件脚手架-可快速生成项目
npm install -g yo generator-code
 
# 安装插件发布工具
npm install -g vsce

创建项目

终端 yo code
注意：创建时不要选pnpm，否则后续很麻烦

运行

npm run watch

调试

在 VSCode 中按下 F5 会进入调试状态，这时候会自动打开一个名为 扩展开发宿主 的新窗口。
再在新窗口中，按下 command + shift + p 或 ctrl + shift + p，在里面输入我们插件注册的命令名，按下回车就能触发回调。

在这里插入图片描述

打包

打包指令：

vsce package

// 列出已发布的扩展
vsce ls

// 成功标志
跟目录下出现 taro-code-0.0.1.vsix 文件即可

第一次打包前的必要操作

  1. 第一次打包需要修改readme.md的内容-否则报错
  2. package.json填写发布人，仓库信息
{
  // 1.添加开发者账号
  "publisher": "jerrycc",
  // 2.添加仓库，处理报错
  "repository": "git+https://github.com/username/xxx.git"
  "scripts": {}
}
  1. 添加LICENSE.md 根目录下增加LICENSE.md文件，即可

发布

vsce publish -p token令牌

第一次发布前账号准备

参考：https://blog.csdn.net/qq_36947128/article/details/136171963

注册Azure DevOps发布账号-获取token

目的：使用token在终端登录vsce账号，然后才能发布

  1. 进入 https://dev.azure.com/
  2. 创建项目，生成token
  3. 生成token时一定注意 1. 选 all accessible organizations， 2.点击右下角的 Show all scopes 找到 Marketplace 选择 Manage。 否则发布会失败
  4. 将生成的token保存，否则找不到，注：可以重新生成。在这里插入图片描述

认真看，下边两项不能选错，否则发布失败
在这里插入图片描述

注册vscode开发者账号

  1. 若没有vscode账号需要去注册：https://marketplace.visualstudio.com/manage/createpublisher?managePageRedirect=true。
  2. vscode发布者中心：https://marketplace.visualstudio.com/manage

终端登录vsce

// 输入账号
vsce login jerrycc

// 回车后输入token 
ga2fokrzz6drvuwddy3x2onyluenvvbkipa5jpigv7sf77yttgma

// 登录成功
// 发布
// vsce publish

发布方式2-手动上传插件

访问Visual Studio Marketplace，并登陆上一节中创建的Microsoft账户，然后点击右上角的Publish extension
在这里插入图片描述

进阶

开发代码片段插件

创建代码片段

示例：root/snippets/tarocode.code-snippets，注意后缀名
注：是json格式，可以用此网站转化 https://snippet-generator.app/

{
  "zyfbtn": {
    "prefix": "zyfbtn",
    "body": [
      "<div>",
      "  <button>我是zyfbtn</button>",
      "</div>",
      ""
    ],
    "description": "zyfbtn"
  }
}

代码转化为json
在这里插入图片描述

配置package.json

为了支持react和ts，可配置4份

"contributes": {
  "snippets": [
    {
      "language": "javascript",
      "path": "./snippets/tarocode.code-snippets"
    },
    {
      "language": "javascriptreact",
      "path": "./snippets/tarocode.code-snippets"
    },
    {
      "language": "typescript",
      "path": "./snippets/tarocode.code-snippets"
    },
    {
      "language": "typescriptreact",
      "path": "./snippets/tarocode.code-snippets"
    }
  ],
}

搞定

结果展示

在这里插入图片描述

其他

package.json介绍

{
    // 插件的名字，应全部小写，不能有空格
    "name": "fast-admin",
    // 插件的友好显示名称，用于显示在应用市场，支持中文
    "displayName": "fast-admin",
    // 描述
    "description": "Quickly generate admin page",
    // 版本号
    "version": "0.0.1",
    // 插件最低支持的vscode版本
    "engines": {
        "vscode": "^1.48.0"
    },
    // 插件应用市场分类，可选值： [Programming Languages, Snippets, Linters, Themes, Debuggers, Formatters, Keymaps, SCM Providers, Other, Extension Packs, Language Packs]
    "categories": [
        "Other"
    ],
    /** 扩展的激活事件数组，可以被哪些事件激活扩展：
    **    1.onLanguage:${language}
    **    2.onCommand:${command}
    **    3.onDebug
    **    4.workspaceContains:${toplevelfilename}
    **    5.onFileSystem:${scheme}
    **    6.onView:${viewId}
    **    7.onUri
    **    8.*
    **/
    "activationEvents": [
        "onCommand:fast-admin.helloWorld"
    ],
    // 插件的主入口
    "main": "./extension.js",
    // 贡献点，整个插件最重要最多的配置项，下面单独列出
    "contributes": {
        // 命令
        "commands": [
            {
                "command": "fast-admin.helloWorld",
                "title": "Hello World"
            }
        ]
    },
    // 同 npm scripts
    "scripts": {
        "lint": "eslint .",
        "pretest": "npm run lint",
        "test": "node ./test/runTest.js"
    },
    // 开发依赖
    "devDependencies": {
        "@types/vscode": "^1.48.0",
        "@types/glob": "^7.1.3",
        "@types/mocha": "^8.0.0",
        "@types/node": "^14.0.27",
        "eslint": "^7.6.0",
        "glob": "^7.1.6",
        "mocha": "^8.0.1",
        "typescript": "^3.8.3",
        "vscode-test": "^1.4.0"
    },
    // 以下为一些非关键配置
    // 关键字，用于应用市场搜索
    "keywords": ["vscode", "plugin", "fast", "admin"],
    // 发布者，如果要发布到应用市场的话，这个名字必须与发布者一致
    "publisher": "kukudelaomao",
    // 插件图标，至少128x128像素
    "icon": "images/icon.png",
    // 许可
    "license": "SEE LICENSE IN LICENSE.txt",
    // 问题
    "bugs": {
        "url": "https://github.com/kukudelaomao/fast-admin/issues"
    },
    // 仓库
    "repository": {
        "type": "git",
        "url": "https://github.com/kukudelaomao/fast-admin"
    },
    // 主页
    "homepage": "https://github.com/kukudelaomao/fast-admin/blob/master/README.md"
}

contributes

  1. configuration：设置
  2. commands：命令
  3. menus：菜单
  4. keybindings：快捷键绑定
  5. languages：新语言支持
  6. debuggers：调试
  7. breakpoints：断点
  8. grammars
  9. themes：主题
  10. snippets：代码片段
  11. jsonValidation：自定义JSON校验
  12. views：左侧侧边栏视图
  13. viewsContainers：自定义
  14. activitybar
  15. problemMatchers
  16. problemPatterns
  17. taskDefinitions
  18. colors
    "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.sayHello",
                "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": "beautifulGirl",
                    "title": "美女",
                    "icon": "images/beautifulGirl.svg"
                }
            ]
        },
        // 自定义侧边栏内view的实现
        "views": {
            // 和 viewsContainers 的id对应
            "beautifulGirl": [
                {
                    "id": "beautifulGirl1",
                    "name": "美女1"
                },
                {
                    "id": "beautifulGirl2",
                    "name": "美女2"
                },
                {
                    "id": "beautifulGirl3",
                    "name": "美女3"
                }
            ]
        },
        // 图标主题
        "iconThemes": [
            {
                "id": "testIconTheme",
                "label": "测试图标主题",
                "path": "./theme/icon-theme.json"
            }
        ]
    },

参考：
搭建到发布：https://blog.csdn.net/m0_74802419/article/details/136228018
处理打包报错：https://blog.csdn.net/crper/article/details/137558270
vscode如何发布：https://blog.csdn.net/bulucc/article/details/137837339
1.解决vsce发布失败的问题 2.如何开发代码片段 https://blog.csdn.net/qq_36947128/article/details/136171963
将代码转化为json 格式： https://snippet-generator.app/

在这里插入图片描述

标签： 前端 vscode ide
本文转载自: https://blog.csdn.net/u012570307/article/details/139331041
版权归原作者 张三疯ts 所有， 如有侵权，请联系我们删除。
登录后发布评论

“前端从零到一开发vscode插件并发布到插件市场”的评论:

还没有评论
关于作者
...
overfit同步小助手
文章同步
相关阅读

网络安全法-网络运行安全

使用selenium/drissionpage时如何阻止chrome自动跳转http到https

docker desktop 里部署的Open WebUI 管理员密码忘记了的处理方法

在ubuntu20.04中搭建onsite比赛运行环境

利用开源的低代码表单设计器FcDesigner高效管理和渲染复杂表单结构

Kafka学习笔记

【前端】浏览器输入url到页面呈现发生了什么？

文章导航