首页
学习
活动
专区
圈层
工具
发布
精选内容/技术社群/优惠产品,尽在小程序
立即前往

写一个VSCode扩展

这里就需要设置全局参数了,在 package.json 中 contributes 设置 configuration,具体如下,注意kuizuoPlugin.showTip 为全局参数之一 package.json...此时的我不知该哭该笑,折腾半天的功能其实只是设置个快捷键的事情。 备注 这些命令在 vscode 中作为内置命令Built-in Commands。...(id) 键盘快捷键(光标移动)​ 接着我就在想,既然很多 vscode 功能都是命令的形式,那是不是在插件级别就能做键盘映射,而不用让用户在 vscode 设置,很显然是可以的。...就说明验证成功 4、发布应用 vsce publish 危险 这里要保证 package.json 的 name 在插件市场中唯一,否则会提示 The Extension Id already exist...可以在 Manage Extensions | Visual Studio Marketplace 中管理已发布的插件 这时在 vscode 扩展商店中搜索 vscode-extension-sample

2.8K20

从零开发一款基于 webview 的 vscode 扩展

我猜的是挂在 node 环境上了,读了源码[13]后我发现我竟然是对的: vscode 实现了拦截器在加载 Node 环境的时候将 vscode 给添加到了内置包中,这样的好处是减小插件的体积。...') ); 在 vscode 扩展中我们需要通过 vscode.Uri.file 方法获取磁盘上的资源路径。...在 @luozhu/vscode-utils[22] 中我们对获取本地资源路径做了封装: // 获取内容的 Uri const getDiskPath = (fileName: string) => {..., context.subscriptions ); 「效果」: 在 webview 中请求接口 一开始,我以为这是个轻松的工作,直到遇到跨域半天解决不了后我绝望了,在 VSCode WebView...配置国际化 我们已经知道 vscode 中的配置都是在 package.json 中,而配置的国际化是约定在 package.nls.json 和 package.nls.zh-cn.json 这种文件中编写

4.9K20
  • 您找到你想要的搜索结果了吗?
    是的
    没有找到

    一次关于Flutter的碰壁 | VSCode中搭建开发环境(插件 | 虚拟机 | 新建项目并运行)

    参考链接 本文摘要 flutter SDK的安装 在vscode中安装flutter和dart插件 vscode中如何安装和启动虚拟机 vscode中新建flutter项目并运行 flutter SDK...这里pick一下一个解决签证的方法: ? 在vscode中安装flutter和dart插件 打开VSCode,如下操作: ?...有时候刚刚新建的项目可能会像下面这些图片中的代码所示各种爆红报错: 把鼠标移到首行的import处,还会显示如下报错: [dart] Target of URI doesn't exist: 'package...会弹出在AS创建过的虚拟机(也建议在AS中创建虚拟机,而不是在VSCode这里创建虚拟机,因为这里新建虚拟机是不会有选项的,而AS不一样,有诸多选项可选): ?...现在点击上图的第一个虚拟机,启动之: ? 运行程序: ? ? 我觉得终究啊,还是要用3.0以上的gradle才能正正经经地把flutter给跑起来。 无论是AS还是VSCode。

    2.8K30

    vscode插件开发入门

    主要集中在以下的更改: 自定义上下文菜单操作,如:平时我们右键的菜单栏 在侧边栏创建自定义交互,如:npm插件安装后在资源管理中-主侧边栏添加了一个npm操作视图 定义一个新的活动栏视图,如:Git插件安装后左侧活动栏中的图标...在状态栏中显示自定义信息,如:Git插件安装后显示当前分支 使用webview自定义内容,如:markdown预览插件提供预览的视图 UI类插件主要用于更改vscode的外观也就是我们常说的主题,主要集中在以下...UX层时我们会和整个编辑器中的区域打交道,在vscode中,它把整体分为了containers(图一)和items(图二)。...activate函数接受一个context对象用于获取vscode上下文,通过vscode.commands.registerCommand注册我们在package.json中定义的命令,并且传入一个回调函数...的提示框 总结一下,对于command注册流程: 通过package.json注册command 通过vscode.commands.registerCommand传入package.json中配置的

    5.8K20

    VSCode插件开发:LaTeX Snippets

    于是我便使用了VSCode+LaTeX+Plugin的方案。但是很多我想要的Snippets都没有而且也不能做到个性化的自定义,我便尝试编写一个Plugin达到此功能。...另外,我还是用到了一种较为特殊的占位符--选择占位符--顾名思义其可以让用户在几个选项中做出选择。...DOM事件 在VSCode中,DOM事件入口: window.addEventListener('DOMContentLoaded', () => { } 和页面相关的内容全部写在这个接口内。...VSCode与WebView的通讯 这里我使用了封装好的接口 在网页的js文件当中: const testMode = false; // 为true时可以在浏览器打开不报错 // vscode webview...在package.json中完成注册 最终,package.json中contributes变成: "contributes": { "snippets": [ {

    3.1K40

    【Web技术】746- VSCode 插件开发入门教程

    vscode官方提供的脚手架还帮忙加上了调试配置,调试非常方便。下面就来说下具体步骤,在学习的过程中参考了一些博客,放在了最后面。 环境准备 这个很简单,我就直接拷贝过来了。...快捷键 有了快捷键后,就不用每次在命令面板里查找并运行命令了,同样是在package.json中配置: "contributes": { "keybindings": [ { "...+f11", // 在mac上的快捷键 "when": "editorTextFocus" // 出现时机, 当编辑器焦点在某个文本中 } ], } 发布 主要参考的是官方文档...$t" // snippets描述,当有多个匹配的代码片段时,可以用来识别 } } 在package.json中配置 "contributes": { "snippets": [ {...// 让用户手动选择文件的的存储路径 const uri = await vscode.window.showSaveDialog({ filters: { zip: ['zip'], //

    2.3K21

    Node.js 项目 TypeScript 改造指南

    /node_modules/.bin/tsc(全局安装忽略,不建议这么做,其他同学可能已经全局安装了,但可能会与你项目所依赖的 typescript 版本不一致),在 package.json 中添加以下脚本...中集成ESLint配置 为了开发方便我们可以在 VSCode 中集成 ESLint 的配置,一是用于实时提示,二是可以在保存时自动 fix。...import小结: 看完后再来回顾前面的问题:是否可以去掉这个配置"esModuleInterop":true 个人认为在 Node.js 场景是可以去掉的我并不想看到那两个多余的工具函数。...Class构造函数this.xx初始化报错 在 Class 的构造函数中对 this 属性进行初始化是常见做法,但在 ts 中,你得先定义。...对象属性赋值报错 动态对象是 js 的特色,我先定义个对象,不管啥时候我都可以直接往里面加属性,这种报错,最快的改造办法就是给对象申明 any 类型。

    8.4K32

    Node.js项目TypeScript改造指南

    /node_modules/.bin/tsc(全局安装忽略,不建议这么做,其他同学可能已经全局安装了,但可能会与你项目所依赖的 typescript 版本不一致),在 package.json 中添加以下脚本...中集成ESLint配置 为了开发方便我们可以在 VSCode 中集成 ESLint 的配置,一是用于实时提示,二是可以在保存时自动 fix。...import小结: 看完后再来回顾前面的问题:是否可以去掉这个配置"esModuleInterop":true 个人认为在 Node.js 场景是可以去掉的我并不想看到那两个多余的工具函数。...Class构造函数this.xx初始化报错 在 Class 的构造函数中对 this 属性进行初始化是常见做法,但在 ts 中,你得先定义。...对象属性赋值报错 动态对象是 js 的特色,我先定义个对象,不管啥时候我都可以直接往里面加属性,这种报错,最快的改造办法就是给对象申明 any 类型。

    4.4K20

    Node.js项目TypeScript改造指南

    /node_modules/.bin/tsc(全局安装忽略,不建议这么做,其他同学可能已经全局安装了,但可能会与你项目所依赖的 typescript 版本不一致),在 package.json 中添加以下脚本...中集成ESLint配置 为了开发方便我们可以在 VSCode 中集成 ESLint 的配置,一是用于实时提示,二是可以在保存时自动 fix。...import小结: 看完后再来回顾前面的问题:是否可以去掉这个配置"esModuleInterop":true 个人认为在 Node.js 场景是可以去掉的我并不想看到那两个多余的工具函数。...Class构造函数this.xx初始化报错 在 Class 的构造函数中对 this 属性进行初始化是常见做法,但在 ts 中,你得先定义。...对象属性赋值报错 动态对象是 js 的特色,我先定义个对象,不管啥时候我都可以直接往里面加属性,这种报错,最快的改造办法就是给对象申明 any 类型。

    4.6K10

    python进行安装第三方库(以及解决导入库出错的问题)

    我这边用的是pycharm,pycharm可以导入包 pycharm里面File-Setting-Python Interpreter,然后你就可以看到下面这些,就是目前你的python现有的包。...另外一种就是通过控制台安装了,具体还是在下面的说明中。 在使用python安装或导入相应的库时,常常会遇到各种问题。今天为大家分享一下在导入包时为什么会出错,以及该怎样解决。...当然,每个人出错的原因是不一样的,我为大家分享的就是我所遇见的问题。...1: 我们通常会使用pycharm来编写python代码,在pycharm中导入库是一种常见的方法,当导入第三方库时常常会出 现各中各样的问题,比如下载缓慢,或根本无法显示版本,找不到信息,以及安装失败...我们可以尝试在命令控制台来进行 安装,进入命令控制台,输入pip install package ,其中package 为你要安装的库名。

    1.7K20

    一起来写 VS Code 插件:VS Code 版 CNode 已上线

    Webview API 允许扩展在 visualstudio 代码中创建完全可定制的视图,可以将 webview 看作是 VS Code 中的 iframe。...注册一个侧边栏 在 extension.ts 中注册一个 与 package.json 对应的 vs-sidebar-view侧边栏ID import * as vscode from "vscode"...上述代码中, Nonce是一个在加密通信只能使用一次的数字。在认证协议中,它往往是一个随机或伪随机数,以避免重放攻击。Nonce也用于流密码以确保安全。...state 在 webview 的 js 中我们可以使用vscode.getState()和vscode.setState()方法来保存和恢复 JSON 可序列化状态对象。...希望这篇文章对大家有所帮助,也可以参考我往期的文章或者在评论区交流你的想法和心得,欢迎一起探索前端。

    1.4K40

    一起来写 VS Code 插件:VS Code 版 CNode 已上线

    Webview API 允许扩展在 visualstudio 代码中创建完全可定制的视图,可以将 webview 看作是 VS Code 中的 iframe。...注册一个侧边栏 在 extension.ts 中注册一个 与 package.json 对应的 vs-sidebar-view侧边栏 ID import * as vscode from 'vscode...上述代码中, Nonce是一个在加密通信只能使用一次的数字。在认证协议中,它往往是一个随机或伪随机数,以避免重放攻击。Nonce 也用于流密码以确保安全。...state 在 webview 的 js 中我们可以使用vscode.getState()和vscode.setState()方法来保存和恢复 JSON 可序列化状态对象。...希望这篇文章对大家有所帮助,也可以参考我往期的文章或者在评论区交流你的想法和心得,欢迎一起探索前端。

    2.4K10

    【TypeScript】014-工程相关

    可是每次执行这么长一段脚本颇有不便,我们可以通过在 package.json 中添加一个 script 来创建一个 npm script 来简化这个步骤: { "scripts": {...在 VSCode 中集成 ESLint 检查 在编辑器中集成 ESLint 检查,可以在开发过程中就发现错误,甚至可以在保存时自动修复错误,极大的增加了开发效率。...VSCode 中的 ESLint 插件默认是不会检查 .ts 后缀的,需要在「文件 => 首选项 => 设置 => 工作区」中(也可以在项目根目录下创建一个配置文件 .vscode/settings.json...这里我推荐使用 AlloyTeam ESLint 规则中的 TypeScript 版本,它已经为我们提供了一套完善的配置规则,并且与 Prettier 是完全兼容的(eslint-config-alloy...[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-cOdoezQ0-1628513852676)(vscode-output-eslint.png)] 为什么有些定义了的变量

    11210

    TypeScript是如何工作的

    AST 中的节点称为 Node,Node 中记录了这个节点的类型、在源码中的位置等信息。...对于赋值操作,检查给这个 Node 赋的值是否匹配这个 Node 的类型。对于导入操作,检查 Symbol 是否导出了这个变量。...对应的是工作区版本——package.json 中依赖的 typescript 的版本。点击状态栏右下角 TypeScript 版本,会弹窗提示切换 tsserver 的版本。...三、TypeScript 与 babel 在开发过程中,错误提示功能由 VSCode 提供。但是我们的代码需要经过编译之后才能在浏览器中运行,这个过程中是什么东西处理了 TypeScript 呢?...我认为主要有以下几点考虑: 性能方面,移除类型注解速度最快。收集类型并且验证类型是否正确,是一个相当耗时的操作。 babel 本身的限制。

    5.5K30

    Dart 语法基础

    在连续行上使用 /// 与多行文档注释的效果相同。在文档注释中,分析器会忽略所有文本,除非它包含在方括号中。使用方括号,您可以引用类、方法、字段、顶级变量、函数和参数。...方括号中的名称在已记录程序元素的词法作用域中解析。这是一个带有对其他类和参数引用的文档注释示例:/// 一种驯养的南美骆驼科动物(羊驼)。...对于内置库,URI 具有特殊的 dart: 模式。对于其他库,您可以使用文件系统路径或 package: 模式。 package: 模式指定由包管理器(例如 pub 工具)提供的库。...例如:import 'package:test/test.dart';注意URI 代表统一资源标识符。URL(统一资源定位符)是一种常见的 URI。...使用延迟加载时,请记住以下几点:延迟库的常量在导入文件中不是常量。请记住,这些常量在延迟库加载之前不存在。您不能在导入文件中使用延迟库中的类型。

    10110
    领券