VS Code 插件开发概览

news/2024/7/16 8:45:24 标签: 前端, ide, vscode

VS Code 插件开发概览

在这里插入图片描述

前言

VS Code作为开发者的代码开发利器,越来越受开发者的喜爱。像我身边的前端,每天80%的开发工作都是在VS Code上完成的。随着人们对它的使用,不再满足简单的优雅,舒服写代码这一基本需求。有些人利用它进行摸鱼,看小说,查股票,看文章,下五子棋。当你在VS Code的插件市场输入摸鱼二个字时,会有20多个插件供你选择。
本篇文章就来概述一下 VS Code的能力,并帮你快速建立插件文档的索引。

插件功能

插件能够实现以下功能

  • 自定义各类文件的图标和主题颜色
  • 添加自定义组件和UI
  • 使用html创建功能丰富的webview
  • 支持新的编程语言
  • 支持特殊的调试手段

组件的各大模块

案例大集合

插件的官方案例大集合 https://github.com/microsoft/vscode-extension-samples
看了这里提供的案例,能够了解大部分场景的开发范式。

每个插件的目录大致是相同的,这也是官方约定的标准插件目录。

UI组件

vscode提供了很标准的UI,在制作插件时要严格按照要求,比如图标的大小16*16的svg文件。

命令行工具

yogenerator-code

按照

# 安装依赖
npm install -g yo generator-code
yo code # 新建项目

按钮位置

你可以利用插件在vscode中注入很多的自定义按钮,各个位置。vscode支持的位置包括这些
https://code.visualstudio.com/api/references/contribution-points#contributes.menus

本地开发组件步骤

本地开发的步骤很简单

# 安装依赖
npm install -g yo generator-code
yo code # 新建项目

安装依赖后,按下F5键就会打开一个新的窗口,这是用于调试的。
修改代码后,重新reload 就能生效。

发布 https://code.visualstudio.com/api/working-with-extensions/publishing-extension

npm install -g @vscode/vsce

vsce package

vsce login <publisher name>

vsce publish

When 条件

在注入按钮时有时需要一些条件判断,
比如,当前打开的是某类文件时,才会显示某个按钮。
这些判断条件的编写应该遵循以下这个文档
https://code.visualstudio.com/api/references/when-clause-contexts

插件的概览 指导
https://code.visualstudio.com/api/extension-guides/overview

能够使用的VS code api
https://code.visualstudio.com/api/references/vscode-api#tasks.registerTaskProvider


http://www.niftyadmin.cn/n/231662.html

相关文章

【ConfluxNews】2023.4.17 我们将在香港扎根

1.【网络状态】当前版本V2.2.3&#xff0c;全网算力≈8T&#xff0c;昨日交易次数43K&#xff0c;昨日新增账户0.32K&#xff0c;昨日新增合约1个&#xff1b; 2.【POS参数】总锁仓257M&#xff08;1&#xff09;&#xff0c;节点总数268&#xff0c;年利率14.2%&#xff08;理…

哈希表(HashTable)

哈希表&#xff08;HashTable&#xff09;1. 相关概念2. 哈希函数选择&#xff08;常用&#xff09;3. 哈希冲突&#xff08;常用&#xff09;开散列法/哈希桶法/链地址法&#xff1a;4. Set接口及实现类4.0 常用方法4.1 HashSet4.2 LinkedHashSet4.3 TreeSet4.4 例题1. 相关概…

openEuler实验-基于openEuler的云景平台文件管理系统

一些常见的Linux命令 目录 前言 实验目的 实验内容 实验知识点 实验环境 实验分析 系统登录和电源管理 1&#xff09;使用login命令登录系统 2&#xff09;退出openEuler 3&#xff09;退出当前的shell 软件管理 1&#xff09;查询目录信息 2&#xff09;切换目录路…

【华为OD机试真题 C++】1021 - 最远足迹 | 机试题+算法思路+考点+代码解析

文章目录 一、题目🔸题目描述🔸输入输出🔸样例1🔸样例2二、代码参考作者:KJ.JK🌈 🌈 🌈 🌈 🌈 🌈 🌈 🌈 🌈 🌈 🌈 🌈 🌈 🍂个人博客首页: KJ.JK 💖系列专栏:华为OD机试真题(C++) 一、题目 🔸题目描述 某探险队负责对地下洞穴进

AI企划-《大明镇抚司到此一游》商业计划书

结合中国文化和当地资源打造的独特旅游产品 一、项目概述 本项目旨在利用中国文化特色&#xff0c;结合新西兰当地资源和市场需求&#xff0c;打造一款独特的旅游产品——“大明镇抚司到此一游”网红打卡点。该打卡点以大明镇抚司为主题&#xff0c;以大明小龙虾美食为特色&a…

夜天之书 #81 大厂开源之殇

本轮开源之风吹起迄今数年&#xff0c;最大的影响还是越来越多的商业公司开始探索开源方法能够如何改变自己的经营策略。开源策略循序渐进分成使用、参与和发起。在发起开源项目实践一线的&#xff0c;一个是打着开源旗号的创业公司&#xff0c;另一个就是大型企业尤其互联网企…

LNMP架构部署

L&#xff1a;Linux A:Apache M:Mysql P:PHP 各组件的主要作用如下&#xff1a; (平台)Linux&#xff1a;作为LAMP架构的基础&#xff0c;提供用于支撑Web站点的操作系统&#xff0c;能够与其他三个组件提供更好的稳定性&#xff0c;兼容性(AMP组件也支持Windows、UNIX等平…

【unity实战】用对象池设计制作Dash冲锋残影的效果

什么是对象池? 在Unity中,对象池是一种重复使用游戏对象的技术。使用对象池的好处是可以减少游戏对象的创建和销毁,从而提高游戏的性能。如果不使用对象池,每次需要创建游戏对象时,都需要调用Unity的Instantiate函数,这会导致内存分配和垃圾回收的开销。而使用对象池,可…