更多文章请戳VSCode插件开发全攻略系列目录导航. 本文提炼一些常见的API使用场景供参考,本文内容有待完善. 编辑器相关 修改当前激活编辑器内容 替换当前编辑器全部内容: vscode.window.activeTextEditor.edit(editBuilder => { // 从开始到结束,全量替换 const end = new vscode.Position(vscode.window.activeTextEditor.document.lineCount + 1, 0); con…

更多文章请戳VSCode插件开发全攻略系列目录导航. 发布方式 插件开发完了,如何发布出去分享给他人呢?主要有3种方法: 方法一:直接把文件夹发给别人,让别人找到vscode的插件存放目录并放进去,然后重启vscode,一般不推荐: 方法二:打包成vsix插件,然后发送给别人安装,如果你的插件涉及机密不方便发布到应用市场,可以尝试采用这种方式: 方法三:注册开发者账号,发布到官网应用市场,这个发布和npm一样是不需要审核的. 本地打包 无论是本地打包还是发布到应用市场都需要借助vsce这个工具.…

更多文章请戳VSCode插件开发全攻略系列目录导航. 代码片段 代码片段,也叫snippets,相信大家都不陌生,就是输入一个很简单的单词然后一回车带出来很多代码.平时大家也可以直接在vscode中创建属于自己的snippets: 创建代码片段 那么如何在扩展中创建snippets呢? package.json文件新增如下: "contributes": { "snippets": [ { // 代码片段作用于那种语言 "language": &…

更多文章请戳VSCode插件开发全攻略系列目录导航. 什么是Webview 大家都知道,整个VSCode编辑器就是一张大的网页,其实,我们还可以在Visual Studio Code中创建完全自定义的.可以间接和nodejs通信的特殊网页(通过一个acquireVsCodeApi特殊方法),这个网页就叫WebView.内置的Markdown的预览就是使用WebView实现的.使用Webview可以构建复杂的.支持本地文件操作的用户界面. VSCode插件的WebView类似于iframe的实现,…

更多文章请戳VSCode插件开发全攻略系列目录导航. 前言 在介绍完一些比较简单的内容点之后,我觉得有必要先和大家介绍一些开发中遇到的一些细节问题以及技巧,特别是后面一章节将要介绍WebView的知识,这个坑会比较多,避免大家走弯路. 开发方式 最理想的方式是准备双显示器,一个写代码,一个运行插件,实践证明这种方式开发效率会提升很多,每次修改完代码之后直接Ctrl+R重新加载即可,非常方便. 日志查看 就我目前遇到的情况来看,vscode日志主要有这5种: 旧窗口的调试控制台 扩展里的conso…

更多文章请戳VSCode插件开发全攻略系列目录导航. 跳转到定义 跳转到定义其实很简单,通过vscode.languages.registerDefinitionProvider注册一个provider,这个provider如果返回了new vscode.Location()就表示当前光标所在单词支持跳转,并且跳转到对应location. 为了示例更加有意义,我在这里写了一个支持package.json中dependencies.devDependencies跳转到对应依赖包的例子jump-to…

更多文章请戳VSCode插件开发全攻略系列目录导航. 命令 我们在前面HelloWord章节中已经提到了命令写法,这里再重温一下. context.subscriptions.push(vscode.commands.registerCommand('extension.sayHello', () => { vscode.window.showInformationMessage('您执行了extension.sayHello命令!'); })); 然后在清单文件声明: "commands…

更多文章请戳VSCode插件开发全攻略系列目录导航. package.json 在详细介绍vscode插件开发细节之前,这里我们先详细介绍一下vscode插件的package.json写法,但是建议先只需要随便看一下,了解个大概,等后面讲到具体细节的时候再回过头来看. 如下是package.json文件的常用配置,当然这里还不是全部: { // 插件的名字,应全部小写,不能有空格 "name": "vscode-plugin-demo", // 插件的友好显示名称,…

更多文章请戳VSCode插件开发全攻略系列目录导航. 写着前面 学习一门新的语言或者生态首先肯定是从HelloWord开始. 您可以直接克隆我放在GitHub上vscode-plugin-demo 的代码到本地,然后尝试修改代码并运行,也可以使用微软官方的脚手架vscode-generator-code来生成项目结构,脚手架的使用我们后面再来介绍,先来熟悉一下项目结构. HelloWorld 项目结构 项目结构其实很简单,主要是清单文件package.json以及extension.js这个插件…

文章索引 VSCode插件开发全攻略(一)概览 VSCode插件开发全攻略(二)HelloWord VSCode插件开发全攻略(三)package.json详解 VSCode插件开发全攻略(四)命令.菜单.快捷键 VSCode插件开发全攻略(五)跳转到定义.自动补全.悬停提示 VSCode插件开发全攻略(六)开发调试技巧 VSCode插件开发全攻略(七)WebView VSCode插件开发全攻略(八)代码片段.设置.自定义欢迎页 VSCode插件开发全攻略(九)常用API总结 VSCode插件开…

VSCode插件开发全攻略(十)打包.发布.升级 发布方式 插件开发完了,如何发布出去分享给他人呢?主要有3种方法: 方法一:直接把文件夹发给别人,让别人找到vscode的插件存放目录并放进去,然后重启vscode,一般不推荐: 方法二:打包成vsix插件,然后发送给别人安装,如果你的插件涉及机密不方便发布到应用市场,可以尝试采用这种方式: 方法三:注册开发者账号,发布到官网应用市场,这个发布和npm一样是不需要审核的. 本地打包 无论是本地打包还是发布到应用市场都需要借助vsce这个工具. 安…

参考了Egret Wing,想像Egret Wing那样在上方titlebar最右边上面增加一个menu(这个menu相对于一个按钮,当点击这个按钮时会出现一个window弹框,这个window弹框里就包含相关的表单信息以供登录或者注册使用.我是以这个作为参考模板的.但是目前进展并不是很顺.于是我通过插件的方式暂时性解决了这个问题.但是觉得还不是想要的那样. Egret Wing是这样的,如图所示: 不得不承认一点Egret Wing改造的挺不错的,不愧是对VsCode进行魔改. 今天先说一下通…

这里以插件开发为例,VsCode之所以那么强大是因为它背后有千千万万的开发者们为其开发大量功能插件,WordPress同理. 那么如何玩转VsCode命令呢(以插件开发为例)? 官方文档必不可少 https://code.visualstudio.com/api 要像产品经理那样面对产品时,多点点多看看多想想 举个例子说明:以关闭VsCode窗口为例我从VsCode的源码中找到了相关的关闭窗口方法,但是无奈插件API不支持这样的,为此我只得另寻其它方法.最后找到的方法是通过VsCode API命…

主要参考官网:https://code.visualstudio.com/api/get-started/your-first-extension 其实也就三步 一.安装环境 npm install -g yo generator-code 二.运行生成器 yo code # ? What type of extension do you want to create? New Extension (TypeScript) # ? What's the name of your extensio…

阅读这篇文章之前,假设你已经具有开发helloworld的插件的能力. vscode.window 简介 vscode.window 负责当前激活窗口的输入输出,比如展示信息,和用户输入等功能都是用vscode.window实现 代码输出提示信息 简单的输出提示信息 使用vscode.windows.showInformationMessage('Hello World!')可以进行简单输出信息展示. let disposable = vscode.commands.registerComman…

写在前面 分享一个vscode插件background(用于改变背景).点击直接跳到vscode插件开发步骤 做vscode的插件,很久就有这个想法了,但是一直因为这样,那样的事情耽误,放弃了N次.不过确实让我对文档有了个直观的了解. 上周末的时候因为测试妹纸要加班测试,让我也到公司加班,等待可能出现的bug这理由听着就扯淡 当然一群妹纸都到公司等着了,我也必须去......于是在等待bug的时间里看了看官方的文档,在这里写了点自己的摸索结果. 本文分为2部分,1是分享自己做的一个demo,2个…

之前我在这篇文章VsCode插件开发之插件初步通信 通过插件完成通信,这回我还是通过插件,只不过方式主要以在ts文件里面使用webview来进行通信. 另外在此声明,一定要好好看仔细看官方文档,国内关于VsCode相关的开发,少之又少,虽然有一个叫小茗同学写的相对较全面,但是大家可以仔细看,其实他的内容大多也来自官方,同时有部分也加上自己的理解和想法.个人建议,关于VsCode插件相关的,最好是跑一跑VsCode相关官方例子,这样有助于对VsCode插件开发有一个大致的思路和全局认识,换言之有一…

首先关于VsCode插件通信,如果不明白的可以参考我的这篇博客VsCode插件开发之插件初步通信 如果需要详细例子的话,可以参考VsCode插件开发 现在又有一个新的需求是,VsCode插件可以通过jQuery的方式/或者引入某种前端通信框架实现与后台交互.但是针对之前某个需求,需求描述:用户登录后在本地某盘创建特定的文件夹.通常像创建特定文件夹的话,一般都是后端语言实现.而我当时编写的这个插件是用JavaScript,JavaScript是不能读写文件的,当然了,有些朋友可能会说可以使用Act…

破解对象: luaide 破解目的:学习如何破解vscode插件 破解背景: vsscode用了这么多年,安装了很多插件,其中luaide插件是收费的.  说实话,100块并不贵, 我本来准备买的. 结果我想加入luaide群,问几个插件相关问题,结果需要回答验证码.太扯了.  既然有7天试用,为何还要入群权限?真搞不懂 一般群我也懒得加,反正加入群,基本上是划水,没什么软用. 刚好之前没有破解vscode插件经验, 那就拿这个练手好了. 纯属破解学习用, 不做非法用途. 我破解的过程中,发现l…

写在前面 为什么要开发这个扩展呢,是因为微信开发者工具自身不支持页面引入组件的跳转,人工根据引入组件路径查看对应代码的方式,效率偏低.就形如这样的json文件,引入了多个组件,比如要查看 "/component/card-bg/card-bg"组件的源代码,通过人工检索目录查找对应文件,显然不如ctrl+鼠标左键单击一下这个组件路径,跳转到对应的组件文档,更高效.作为一个有追求的程序员.我们不能只做工具的使用者,我们要升级为工具的开发者. 先看看效果,功能展示如下:按下ctrl+鼠标左…

需求来源 vscode插件修改代码要怎样重新编译并安装到vscode中? 起源于我使用一个vscode插件,它可以在vscode中发布文章到知乎上,然后我修改了插件的部分源代码,希望在vscode中安装我修改后的版本,今天花了1个多小时解决了我自己的这个需求,这里记录一下笔记,本篇的方法同样适用于修改和编译vscode的任意插件. 安装依赖 vscode是使用typescript开发,需要安装nodejs,建议把npm的源切到国内:npm config set registry https://…

VSCode提供了丰富的 API,可以借助编辑器扩展许多定制功能. 本次研发了一款名为 Search Method 的插件,在此记录整个研发过程. 一.准备工作 1)安装环境 首先是全局安装 yo 和 generator-code 两个库,我本地全局安装了 cnpm,所以用它来安装. npm install yo generator-code -g 然后使用 yo 命令初始化插件项目. yo code 回答些问题,但如果在回答 Initialize a git repository 时选择 ye…

主要解决的问题的,以最近VsCode插件开发为例,每次请求都需要token,而vscode并不支持cookie这样的存储,所以就采用粗暴点办法,存到某个用户目录下并读取. 源码如下: var fs=require("fs"); function getToken(isRelease) { //是否为正式版本,路径不一样 if (isRelease) { const scriptSrc = path.dirname(__filename); const jsName = scriptSr…

之前学习过node.js接触过express框架,最近为了编写一个mock server正好用到了express.下面正好就跟大家介绍一下关于express.今天的内容主要围绕这么几个方面? express框架初步介绍 express框架中的app.use和app.get/app.post mock server 介绍 mock server的实现思路 一.express框架初步介绍 关于express框架的介绍,这里我引用菜鸟教程的简介:Express是一个简洁而灵活的node.js web框…

前言 提起JavaScript,我们也许经常会想到的是,可以用来写Web页面嘛,又或者,会想起Node.js 这个服务端环境,搞前后端同构. 那么,除此之外, JavaScript还可以做什么?   JavaScript可以 通过electron.js建设跨平台电脑桌面应用 通过树莓派和Node.js,沟通硬件 做电视机机顶盒应用,例如借助ntv.js 从Hybird到React-Native,编写跨平台的混合APP,或者原生APP 通过Cocos2d-x 框架或白鹭引擎,JS可以开发流行游戏…

背景简介 Visual Studio Code 是一款现代化轻量级代码编辑器,它免费.开源.跨平台.功能强大.本次 VS Code Day 是广大 VS Code 爱好者一起学习与交流的盛会,让我们对 VS Code 有一次再深入的理解与探讨,看看 VS Code 有哪些重要的组件,聊聊 VS Code 及其插件的设计理念,看看 VS Code 是如何做开源产品的,我们从中又能学到什么?此外,你也能轻松地开发一款属于你的插件. VS Code中文社区成立 11 月 30 日,VS Code Da…

应用场景:1.VsCode插件开发(主要针对以javascript为主的vscode插件);2.使用Node.js开发的客户端程序 Node.js之http请求(客户端) 代码示例如下: var http = require('http'); var qs = require('querystring'); "; var post_data = { userCode: userCode};//这是需要提交的数据 var content = qs.stringify(post_data); var…

本文主要参考官方文档,地址为:http://developer.edusoho.com/plugin/start.html 插件开发的目的,一方面为了更好的扩展,另外一方面为了更好的维护. 关于这方面的例子,如wordpress.vscode等.至于EduSoho的插件开发是否也像wordpress.vscode那样无缝集成且学习成本并不是特别高,目前刚刚开始写,不好妄下结论. 创建插件初始目录结构 app/console plugin:create Example 使用此命令会在plugins…

当你点进来的时候 ,你可能是被标题吸引进来的,也有可能是 偶然间,看到的,首先恭喜你,已经准备好向全栈开发工程师靠近 ,那我们不说废话,直接开始,咱们先从安装步骤开始讲起 ,因为有些人连插件在哪都不知道 记得点关注哦 !防止迷路 VSCODE 插件安装步骤 : 这里我们开始以 VSCode Icons.为例,有点基础的,麻烦跳过..... 一.安装拓展 拓展插件如上图所示. 首先VScode 打开之后是这样的 然后我们点击 这里 要是上面这里你都找不到的话,大哥你退圈把,不适合做程序员 哈哈 安…

一.前言 VSCode是微软家一个非常轻量化的编辑器,体量虽轻,但是却有异常强大的功能.原因在于VSCode许多强大功能都是基于插件实现的,IDE只提供一个最基本的框架和基本功能,我们需要使用插件来丰富和扩展它的功能. 由于插件的重要作用,现在VSCode的插件社区规模已经非常可观我们平时常用的大部分开发小工具都可以在这个应用市场中找到. 打开VScode后,界面左边是应用市场的入口, 在这里可以搜索我们需要的插件. 但是我们的需求总是复杂多变的,总有一些场景是现有的插件无法满足,这时候就需要我…