提到脚手架,大家想到的可能就是各种 xxx-cli,本文介绍的是另一种方式:以 vscode 插件的形式实现,提供 web 可视化操作,如下图: 下面介绍如何安装使用,以及实现原理. 安装使用 vscode 安装 lowcode 插件,此插件是一个效率工具,脚手架只是其中一个功能,更多功能可以查看文档,这集只讲脚手架相关的. 插件安装之后,打开脚手架界面,步骤如下图: 可以直接使用分享的脚手架,勾选选项后直接创建即可: 制作脚手架 在模板项目根目录下创建 lowcode.scaffold.con

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

更多文章请戳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插件开发全攻略(一)概览 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进行魔改. 今天先说一下通

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

这里以插件开发为例,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

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

写在前面 分享一个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