VSCode插件开发入门全攻略

最新推荐文章于 2024-03-30 15:41:49 发布
最新推荐文章于 2024-03-30 15:41:49 发布
阅读量1.4k 收藏 7
点赞数
文章标签： vscode 编辑器 ide
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/YukiGreen/article/details/131575532
版权

我整理了下入门VSCode开发的全攻略。具体入门路径如下，仅供参考。

首先先认真看完小茗同学写的VSCode插件开发全攻略

一共10篇全部先看完。

然后对照这几个具体的项目运行起来看看效果和实现方式：

vscode-vue-element-demo

vscode-plugin-demo

vscode-yapi-file-help

然后其他不理解的再看vscode插件开发官方文档：

demo：GitHub - microsoft/vscode-extension-samples: Sample code illustrating the VS Code extension API.

api手册：VS Code API | Visual Studio Code Extension API

插件使用：Extension API | Visual Studio Code Extension API

vscode开发调试的常用快捷键：

vscode插件很多功能都是基于一个个命令实现的，我们可以自定义一些命令，这个命令将出现在按下

Ctrl+Shift+P

后的命令列表里面，同时可以给命令配置快捷键、配置资源管理器菜单、编辑器菜单、标题菜单、下拉菜单、右上角图标等。

ctrl+R——重新加载

打开调试控制台：ctrl+shift+I，或者输入ctrl+shift+P然后选择“开发者：打开Webview开发者工具”。

 

YukiGreen
关注
  • 0
    点赞
  • 踩
  • 7
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
VSCode插件开发全攻略之命令、菜单、快捷键
08-19
主要介绍了VSCode插件开发全攻略之命令、菜单、快捷键,本文给大家介绍的非常详细，对大家的学习或工作具有一定的参考借鉴价值，需要的朋友可以参考下
VSCode 插件开发教程
油墨香^-^的博客
09-23 8381
上面提到了生成一个command只需要 2 步，先是利用vscode.commands.registerCommand注册一个，然后再到package.json里的contributes.commands中配置即可。是新手引导，里面包含了对文件的作用解析、如何运行插件、测试插等等，推荐去看一看，我们在下面也会介绍一些。保存文件到指定位置使用showSaveDialog，它会打开文件选择器弹窗，选择了保存路径后点击确定会返回选中的路径，如果点击取消会返回undefined。这里只列举一些常见的api.
VS code 插件开发——开发第一个 vscode 插件
最新发布
weixin_46086458的博客
03-30 912
一文了解 Vscode 插件开发——怎么创建项目、怎么调试、怎么打包发布。VS code 插件开发主要采用的是 TS 作为开发语言。运行打包都很简单，接口丰富易用。
VSCode插件开发全攻略之跳转到定义、自动补全、悬停提示功能
01-20
跳转到定义 跳转到定义其实很简单，通过vscode.languages.registerDefinitionProvider注册一个provider，这个provider如果返回了new vscode.Location()就表示当前光标所在单词支持跳转，并且跳转到对应location。 为了示例更加有意义，我在这里写了一个支持package.json中dependencies、devDependencies跳转到对应依赖包的例子jump-to-definition.js（当然我们这里只是很简单的实现，没有考虑特殊情况，直接从node_modules文件夹下面去找）： 代码如下： /**
VSCode插件开发全攻略之打包、发布、升级的详细教程
12-20
一、发布方式 插件开发完了，如何发布出去分享给他人呢？主要有3种方法： 方法一：直接把文件夹发给别人，让别人找到vscode的插件存放目录并放进去，然后重启vscode，一般不推荐； 方法二：打包成vsix插件，然后发送给别人安装，如果你的插件涉及机密不方便发布到应用市场，可以尝试采用这种方式； 方法三：注册开发者账号，发布到官网应用市场，这个发布和npm一样是不需要审核的。 二、本地打包 无论是本地打包还是发布到应用市场都需要借助vsce这个工具。 安装： npm i vsce -g 打包成vsix文件： vsce package 打包的时候如果没有设置repository会
VSCode插件开发全攻略之package.json详解
08-19
VSCode插件demo集锦
vscode插件开发
奇舞周刊
12-01 9466
作为一个前端开发相信，大家对于vscode非常熟悉。vscode是微软开源的一款基于 Electron 开发的代码编辑器。并且vscode支持通过插件来扩展编辑器的功能，比如Prettier插件帮助我们快速格式化代码，ES7+ React/Redux/React-Native snippets插件帮助我们快速快速编写react代码......这些插件极大地优化了开发体验。那么插件是如何开发的呢？接...
从小白到大白 — 如何开发 VSCode 插件
程序员成长指北
10-13 3434
大厂技术高级前端Node进阶点击上方程序员成长指北，关注公众号回复1，加入高级Node交流群前言由于之前的国际化的项目中总是要统计老项目中待翻译的内容，然后再交由业务进行翻译，如果总是人为统计不仅相当耗费精力和时间，而且还不能保证是否有遗漏，因此想通过编写一个i18n-helper插件来实现这个功能。然而，大家的需求总是出奇的相似（因为已经有很多类似的插件存在了），因此没必要重复造轮...
基于VS Code的插件开发（基础篇）
麻球科技
02-28 6718
VSCode 采用了 Electron，在语言上，VSCode 使用了自家的 TypeScript 语言开发。Electron是基于 Chromium 和 Node.js，使用 JavaScript, HTML 和 CSS 构建跨平台的桌面应用，它兼容 Mac、Windows 和 Linux，可以构建出三个平台的应用程序。从实现上来看，Electron = Node.js + Chromium + Native API接下来看下VS Code布局。
vscode插件开发总结
woyebuzhidao321的博客
01-10 9816
比较好的文章可供参考： https://zhaomenghuan.js.org/note/vscode/awesome-vscode.html https://zhuanlan.zhihu.com/p/99587182 一、关键字高亮实现
VScode插件推荐新手入门手册
weixin_56872849的博客
08-18 462
方便新手快速掌握和适应vscode编程环境的插件宝典
vscode和插件开发详解
zhouhangzooo的博客
09-16 1万+
vscode vscode的官方源码下载地址：https://github.com/microsoft/vscode 我们可以将vscode源码运行起来看演示效果，假设我们将vscode源码下载到这个目录下： D:\new-vscode\vscode-master，那么运行步骤如下： vscode运行 1.打开cmd命令行，进入到D:\new-vscode\vscode-ma...
vscode插件开发（一） - 入手Hello World
咻咻咻的博客
07-16 489
vscode插件开发入门
【VS Code插件开发】入门篇（一）
热门推荐
编码世界
07-31 7万+
讲解了VS Code插件入门开发，讲解了项目的搭建、测试、打包、发布等一系列流程
vscode自定义插件的开发过程记录
用沸腾的热血，支付我们的人生吧！
03-07 1221
本文是关于visual studio code软件上自定义插件的开发记录，将从头记录本人开发的过程，虽然网上也有很多文章，但个人在实践的过程还是会遇到不一样的问题，所以记录下来，以便于后期参考。前期准备：1、node.js环境配置：平台：windows工具：visual studio code库：node.js。
【工具开发】VSCdoe 插件开发
朝拜者
10-13 941
Vscode 插件开发
功能问题：如何开发一个自己的 VS Code 插件？
m0_74802419的博客
02-22 1042
本文简单介绍了，如何一步步的开发一个自己的 VS Code 插件，并最终选择本地自己使用，或者发布到插件商店。
vscode插件开发全攻略
05-26
VS Code 是一款非常受欢迎的开源代码编辑器，它支持各种语言和框架，并且具有强大的插件生态系统。VS Code 的插件开发非常方便，需要掌握一些基本的技能和知识。下面是 VS Code 插件开发的全攻略： 1. 准备工作：安装 Node.js 和 VS Code 首先，你需要安装 Node.js 和 VS Code。Node.js 是一个 JavaScript 运行环境，用于在本地开发和测试插件。VS Code 是编辑器本身，你需要使用它来编写和调试插件。 2. 创建一个新的插件项目 使用 VS Code 的命令面板（Ctrl + Shift + P）或菜单栏，通过 “扩展: 创建新的扩展” 命令创建一个新的插件项目。这将创建一个包含基本文件的文件夹结构，包括 package.json、README.md 和 src 文件夹。 3. 编写代码 在 src 文件夹中，你可以编写插件代码。VS Code 插件使用 TypeScript 或 JavaScript。你可以使用 VS Code 的内置代码编辑器来编写代码。 4. 定义插件的功能 在 package.json 文件中，你可以定义插件的名称、描述、版本号和依赖项。你还可以在 extension.ts 文件中定义插件的功能和行为。 5. 调试插件 在开发插件时，你需要调试代码以确保它正常工作。VS Code 提供了一个内置的调试器，可以通过调试配置文件进行配置。在调试模式下，你可以在 VS Code 中启动插件，设置断点并查看变量值。 6. 发布插件 当你完成了插件的开发和测试后，你可以将其发布到 VS Code 的插件市场中。在发布前，你需要在 package.json 文件中指定你的发布者名称和令牌。然后，使用 VS Code 命令行工具或 VS Code 扩展市场网站进行发布。 以上是 VS Code 插件开发的全攻略，希望能对你有所帮助。

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值