基于VS Code的插件开发(基础篇)

这篇具有很好参考价值的文章主要介绍了基于VS Code的插件开发(基础篇)。希望对大家有所帮助。如果存在错误或未考虑完全的地方,请大家不吝赐教,您也可以点击"举报违法"按钮提交疑问。

一、基础介绍

VSCode 采用了 Electron,在语言上,VSCode 使用了自家的 TypeScript 语言开发。Electron是基于 Chromium 和 Node.js,使用 JavaScript, HTML 和 CSS 构建跨平台的桌面应用,它兼容 Mac、Windows 和 Linux,可以构建出三个平台的应用程序。
从实现上来看,Electron = Node.js + Chromium + Native API
接下来看下VS Code布局
vscode插件开发,Html5做大前端,vscode,javascript,ide
vscode插件开发,Html5做大前端,vscode,javascript,ide

二、插件开发

IDE介绍

Visual Studio Code(简称 VSCode)凭借其占用内存小、文件加载快、稳定性好、插件丰富等等特点,从众多 IDE 中脱颖而出,受到了广大开发人员的青睐。
VSCode 提供以下扩展能力:代码自动补全、自定义命令/菜单/快捷键、悬浮提示、自定义跳转、主题定制、自定义 WebView 等等。
接下来主要介绍如何在VS Code中开发一个插件。
官方文档地址:https://code.visualstudio.com/api/references/vscode-api
vscode插件开发,Html5做大前端,vscode,javascript,ide

2、开发环境准备

  • 安装最新版本的 VSCode
  • Nodejs,建议使用 LTS 版本
  • 官方推荐使用的脚手架工具 Yeoman 和 Generator-code
  • 插件打包和发布工具 vsce

3、安装工具

全局安装 Generator-code

jianshuangpeng@ZBMac-C02F2R9QM  npm install -g yo generator-code
npm WARN deprecated @npmcli/move-file@1.1.2: This functionality has been moved to @npmcli/fs
npm WARN deprecated readdir-scoped-modules@1.1.0: This functionality has been moved to @npmcli/fs
npm WARN deprecated @npmcli/move-file@2.0.1: This functionality has been moved to @npmcli/fs


added 128 packages, removed 450 packages, and changed 730 packages in 47

全局安装 vsce

jianshuangpeng@ZBMac-C02F2R9QM  ~  npm install -g vsce
changed 106 packages in 7s

4、脚手架使用

选择一个文件目录下执行命令:

yo code

选择 New Extension 类型,然后依次填写插件名称、描述、包管理工具等基础信息。

jianshuangpeng@ZBMac-C02F2R9QM  ~/Documents/project  yo code


     _-----_     ╭──────────────────────────╮
    |       |    │   Welcome to the Visual  │
    |--(o)--|    │   Studio Code Extension  │
   `---------´   │        generator!        │
    ( _´U`_ )    ╰──────────────────────────╯
    /___A___\   /
     |  ~  |
   __'.___.'__
 ´   `  |° ´ Y `


? What type of extension do you want to create? New Extension (TypeScript)
? What's the name of your extension? vscode-plugin-todo
? What's the identifier of your extension? vscode-plugin-todo
? What's the description of your extension? 测试插件
? Initialize a git repository? Yes
? Bundle the source code with webpack? Yes
? Which package manager to use? n

安装各种依赖后生成一个文件,目录如下, 更详细文档请查看

jianshuangpeng@ZBMac-C02F2R9QM tree -L 2 -a
.
├── .vscode
│   ├── extensions.json
│   ├── launch.json //插件加载和调试的配置
│   ├── settings.json
│   └── tasks.json // // 配置TypeScript编译任务
├── .vscodeignore
├── CHANGELOG.md //变更记录
├── README.md
├── node_modules
├── package-lock.json
├── package.json // TypeScript配置
├── src
│   ├── extension.ts // 插件源代码
│   └── test
├── tsconfig.json // ts配置文件
├── vsc-extension-quickstart.md
└── webpack.config.js

针对生成文件目录重点说明,其中最重要的文件是package.json和extension.js,了解这两个文件基本上就可以入门开发一个vscode插件了。

1、package.json
该文件是vscode扩展的清单文件,里面有很多字段,官方对每个字段都进行了详细阐述,本次我们重点阐述以下初始化后期清单文件

// package.json
{
  "name": "vscode-plugin-todo", // 一个插件的ID
  "displayName": "vscode-plugin-todo",
  "description": "测试插件",
  "version": "0.0.1",
  "engines": { // 描述了这个插件依赖的最低VS Code API版本
    "vscode": "^1.73.0"
  },
  "categories": [
    "Other"
  ],
  "activationEvents": [ // 激活事件
    "onCommand:vscode-plugin-todo.helloWorld"
  ],
  "main": "./dist/extension.js", // 插件的主入口
  "contributes": { // 发布内容配置
    "commands": [
      {
        "command": "vscode-plugin-todo.helloWorld",
        "title": "Hello World"
      }
    ]
  },
  "scripts": {
    "vscode:prepublish": "npm run package",
    "compile": "webpack",
    "watch": "webpack --watch",
    "package": "webpack --mode production --devtool hidden-source-map",
    "compile-tests": "tsc -p . --outDir out",
    "watch-tests": "tsc -p . -w --outDir out",
    "pretest": "npm run compile-tests && npm run compile && npm run lint",
    "lint": "eslint src --ext ts",
    "test": "node ./out/test/runTest.js"
  },
  "devDependencies": {
    "@types/vscode": "^1.73.0",
    "@types/glob": "^8.0.0",
    "@types/mocha": "^10.0.0",
    "@types/node": "16.x",
    "@typescript-eslint/eslint-plugin": "^5.42.0",
    "@typescript-eslint/parser": "^5.42.0",
    "eslint": "^8.26.0",
    "glob": "^8.0.3",
    "mocha": "^10.1.0",
    "typescript": "^4.8.4",
    "ts-loader": "^9.4.1",
    "webpack": "^5.74.0",
    "webpack-cli": "^4.10.0",
    "@vscode/test-electron": "^2.2.0"
  }
}

重点关注的主要有三部分内容:activationEvents、main以及contributes

main:指明了该插件的主入口在哪,只有找到主入口整个项目才能正常的运转

activationEvents:指明该插件在何种情况下才会被激活,因为只有激活后插件才能被正常使用,官网已经指明了激活的时机,这样我们就可以按需设置对应时机。(具体每个时机用的时候详细查看即可)。

  • onLanguage 打开解析为特定语言文件时被激活,例如"onLanguage:python"
  • onCommand 在调用命令时被激活
  • workspaceContains 每当打开文件夹并且该文件夹包含至少一个与 glob 模式匹配的文件时
  • onView 每当在 VS Code 侧栏中展开指定 id 的视图
  • onUri 每当打开该扩展的系统范围的 Uri 时
  • onWebviewPanel
  • onCustomEditor

contributes:通过扩展注册contributes用来扩展Visual Studio Code中的各项技能,其有多个配置,如下所示:

  • commands 命令
  • configuration 配置
  • configurationDefaults 默认的特定于语言的编辑器配置
  • keybindings 快捷键绑定

2、extension.ts
该文件时其入口文件,即package.json中main字段对应的文件(不一定叫extension.js这个名字),该文件中将导出两个方法:activate和deactivate,两个方法的执行时机如下所示:

  • activate
    这是插件被激活时执行的函数
  • deactivate
    这是插件被销毁时调用的方法,比如释放内存等。

5、运行插件

默认已经很顺利的完成上面所有的操作,接下来我们尝试启动刚才的插件,使用vscode打开文件目录后,按F5刷新
vscode插件开发,Html5做大前端,vscode,javascript,ide
在新打开的页面中,按command+Shit+P进入「Command Palette」,输入「Hello World」执行这个项目
vscode插件开发,Html5做大前端,vscode,javascript,ide

6、发布插件

发布插件的方式基本有三种:
1、直接共享源文件;
2、发布到插件市场;
3、打包成vsix插件安装。这里只介绍下第三种方式。
前面我们已经全局安装了vsce。现在只需要在插件根目录下执行:vsce package即可生成插件

jianshuangpeng@ZBMac-C02F2R9QM  vsce package
Executing prepublish script 'npm run vscode:prepublish'...


> vscode-plugin-todo@0.0.1 package
> webpack --mode production --devtool hidden-source-map


    [webpack-cli] Compiler starting...
    [webpack-cli] Compiler finished
Do you want to continue? [y/N] y
 DONE  Packaged: /Users/jianshuangpeng/Documents/project/vscode-plugin-todo/vscode-plugin-todo-0.0.1.vsix (6 files, 3.

7、安装插件

插件安装完成后左侧菜单中会自动添加插件
vscode插件开发,Html5做大前端,vscode,javascript,ide文章来源地址https://www.toymoban.com/news/detail-726223.html

到了这里,关于基于VS Code的插件开发(基础篇)的文章就介绍完了。如果您还想了解更多内容,请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章,希望大家以后多多支持TOY模板网!

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处: 如若内容造成侵权/违法违规/事实不符,请点击违法举报进行投诉反馈,一经查实,立即删除!

领支付宝红包 赞助服务器费用

相关文章

  • VS Code开发插件使用 pnpm 打包异常的解决姿势

    刚刚准备发一个插件,发现用 pnpm 打出一个本地插件包直接扑街了。 这里只聚焦错误问题的解决,不是发插件的教程。。 聊点背景信息,vscode 的插件命令行的是 vsce 这个模块提供的 cli 能力去做的 pnpm : 8.x 本地打包的命令: vsce package version -m \\\"message\\\" vsce package --help 可以看到

    2024年04月10日
    浏览(45)
  • 【MCUXpresso for VS Code】 -- 基于VSCode搭建nxp mcu工程

    MCUXpresso for VS Code 是nxp推出插件,旗下MCX LPC, Kinetis和i.MX rt等MCU,都能在VS Code平台进行嵌入式开发。功能框图如下: 前期准备: 软件环境: CMake下载地址 Download | CMake Ninja下载地址 Ninja, a small build system with a focus on speed (ninja-build.org) MCUXpresso IDE 下载地址 MCUXpresso IDE 解压安装后

    2024年02月12日
    浏览(46)
  • Visual Studio Code 常见的配置、常用好用插件以及【vsCode 开发相应项目推荐安装的插件】

    把插件的更新也一起取消了 字体对开发也很重要,不同字体,字母形态都不太一样,尤其是标点符号,逗号和分号的区分,有的字体看着这两者就很像 这样打开了很多个文件,就不会导致有的打开的文件被隐藏 相当于idea 查看当前类或接口的结构 Structure 支持快捷键与鼠标右

    2023年04月16日
    浏览(96)
  • Mac 开发 Tang Nano FPGA 指南(使用终端和使用 VS Code 和插件,适用所有 Gowin FPGA)

    最近收到了一个 Tang nano 9K FPGA开发板,就想借此机会研究一下。 官方文档里介绍如果想使用高云的 FPGA,就需要使用 GOWIN IDE,但是需要申请 license 提交一堆资料,我是别人送的就不太方便让别人弄。加上 IDE 其实并不是很适合学习和投入生产,因为 IDE 忽略了很多细节,以及

    2024年02月12日
    浏览(93)
  • 基于html5+javascript技术开发的房贷利率计算器

    房贷计算器是一款专为购房者设计的实用工具应用,其主要功能是帮助用户详细计算房贷的还款金额、利息以及还款计划等。通过这款软件,用户可以更加便捷地了解到自己的还款情况和计划,从而更好地规划自己的财务。下面将对房贷计算器进行详细的介绍。 房贷计算器体

    2024年02月08日
    浏览(44)
  • [HTML]Web前端开发技术26(HTML5、CSS3、JavaScript )JavaScript基础——喵喵画网页

    希望你开心,希望你健康,希望你幸福,希望你点赞! 最后的最后,关注喵,关注喵,关注喵,佬佬会看到更多有趣的博客哦!!! 喵喵喵,你对我真的很重要! 目录 前言 数据类型 数据类型-字符型 数据类型-数值型 数据类型-布尔型 数据类型-其它类型 变量 转义字符 运算

    2024年02月20日
    浏览(65)
  • VS Code基于服务器中的docker的开发环境配置

    当然可以在vscode中直接下载Dev Containers插件,在连接到服务器之后,在Dev Containers中找到相应的docker连接后直接进行开发。 此时你就会看到你服务器上所有正在运行的docker容器(必须要保证你想要开发的docker容器此时的状态是正在运行),然后点击对应的docker容器连接即可,

    2024年02月11日
    浏览(48)
  • 前端开发基础(HTML5 + CSS3)【第一篇】:HTML标签之文字排版、图片、链接、音频、视频 && 涵盖了两个综合案例 做到了基础学得会,实战写的出

    点击前往前端开发基础专栏: 一、开发环境搭建 这里google浏览器不能用我们就使用电脑自带的微软浏览器就可以了! 下载 VS Code VS Code 官网下载地址 这里根据自己电脑的操作系统进行下载! 安装步骤如下: (是在不知道如何操作,可以找个教程一步一步来) 安装这个还是

    2024年04月16日
    浏览(61)
  • 【开发环境】VSCode 安装插件 ( 简体中文插件 | Open in Browser 插件 | Auto Rename Tag 插件 | JS-CSS-HTML Formatter 插件 )

    在 VSCode 中 , 左侧的 按钮 是 扩展 按钮 , 使用 Ctrl + Shift + X 也可以快速进入插件安装界面 ; 在弹出的 扩展 面板中 , 可以搜索和安装插件 ; 在扩展工具面板中 , 搜索 Chinese , 可以看到 简体中文 插件 , 安装该插件后 , 界面会变为简体中文界面 ; 安装完毕后 , 重启 VSCode 即可完成

    2024年02月13日
    浏览(45)
  • 【单片机】基于Arduino cli和VS Code配置开发环境,彻底抛弃Arduino IDE

      之前有在电脑上基于VS Code配置Arduino环境,大致方法就是在安装Arduino IDE的前提下在VS Code上下载一个插件并配置好Arduino IDE的路径即可,总的来说还是非常简单的。但是今天按照记忆中的方法配置的时候出现了一个弹窗: 经过反复试验,发现如果要像以前一样基于Arduino

    2024年02月10日
    浏览(64)

觉得文章有用就打赏一下文章作者

支付宝扫一扫打赏

博客赞助

微信扫一扫打赏

请作者喝杯咖啡吧~博客赞助

支付宝扫一扫领取红包,优惠每天领

二维码1

领取红包

二维码2

领红包