首页
学习
活动
专区
圈层
工具
发布
首页
学习
活动
专区
圈层
工具
MCP广场
社区首页 >专栏 >VS Code开发插件使用 pnpm 打包异常的解决姿势

VS Code开发插件使用 pnpm 打包异常的解决姿势

作者头像
CRPER
发布于 2024-04-10 02:05:56
发布于 2024-04-10 02:05:56
91000
代码可运行
举报
文章被收录于专栏:CRPER折腾记CRPER折腾记
运行总次数:0
代码可运行

前言

刚刚准备发一个插件,发现用 pnpm 打出一个本地插件包直接扑街了。

这里只聚焦错误问题的解决,不是发插件的教程。。

聊点背景信息,vscode 的插件命令行的是 vsce 这个模块提供的 cli 能力去做的

环境

  • pnpm : 8.x

错误截图

  • 本地打包的命令: vsce package <version> -m "message"
  • vsce package --help 可以看到目前只支持 yarn 这个第三方,要不就是默认的 npm

官方仓库的相关 issue 讨论:github.com/microsoft/v…

修正姿势

在 package.json 的 scripts 字段写成命令去执行,就可以绕过默认采用 npm 执行导致依赖查询异常

代码语言:javascript
代码运行次数:0
运行
AI代码解释
复制
  "scripts": {
    "vscode:prepublish": "pnpm run compile",
    "compile": "tsc -p ./",
    "watch": "tsc -watch -p ./",
    "pretest": "pnpm run compile && pnpm run lint",
    "lint": "eslint src --ext ts",
    "test": "vscode-test",
    "package": "pnpm vsce package --no-dependencies",
    "publish": "pnpm vsce publish --no-dependencies"
  },

这个法子也是 issue 里面好心人给的法子: github.com/microsoft/v…

修正效果图

这样就可以打出本地的扩展,可以先自己安装试试有没有问题,然后再 publish 到商店

温馨提示

npm package : vsce

插件作品

git-branch-warn

这个插件主要用来提示当前所在的分支是否为敏感分支,提供了一些配置,具体可以看 README。

因为过往的经历告诉我,真的有不少人会莫名其妙的把部分增量改动在敏感分支提交,导致代码需要各种回退。。

有个警示语,应该有那么一些作用!!!(≧ω≦)

结语

有不对之处请留言,谢谢阅读

本文参与 腾讯云自媒体同步曝光计划,分享自作者个人站点/博客。
原始发表:2024-04-10,如有侵权请联系 cloudcommunity@tencent.com 删除

本文分享自 作者个人站点/博客 前往查看

如有侵权,请联系 cloudcommunity@tencent.com 删除。

本文参与 腾讯云自媒体同步曝光计划  ,欢迎热爱写作的你一起参与!

评论
登录后参与评论
暂无评论
推荐阅读
编辑精选文章
换一批
从零开发一款基于 webview 的 vscode 扩展
在团队降本提效的基建中,洛竹开发了一款 vscode 插件,第一版我使用的是 vscode 内置 UI,虽说也能用,但是用户体验欠佳。由于 vscode 内置 UI 不够灵活,一番调研后我决定使用 webview 重构。
用户1250838
2021/09/18
5.1K0
从零开发一款基于 webview 的 vscode 扩展
如何提升vscode扩展的速度
VS Code最受用户喜爱的就是它丰富的扩展。有成千上万的VS Code扩展可供选择。它们可以帮我们实现想要的一切,包括高亮语法显示我们喜欢的语言,格式化代码,为主题着色,方便地调试等等。
程序那些事儿
2023/03/07
4K0
如何提升vscode扩展的速度
vscode编写插件详细过程
前言 之前编写了一个vscode插件用vscode写博客和发布,然后有园友要求写一篇来介绍如何开发一个vscode扩展插件,或者说介绍开发这个插件的过程。然而文章还没有写,园子里面已经有人发布一个文章,是园友上位者的怜悯的VSCODE 插件初探介绍了自己开发的一个插件与如何简单的开发一个插件。虽然已经有这么一个文章,但是我觉得还是可以更仔细的来介绍如何来开发一个vscode插件,也算之前说好要写这么一个文章的一个承诺吧,于是就有了还这么篇文章。 一、开发环境介绍与安装 为了演示一个安装环境,我安装了一个干净
逸鹏
2018/04/11
2.5K0
vscode编写插件详细过程
npm scripts 使用指南
Node 开发离不开 npm,而脚本功能是 npm 最强大、最常用的功能之一。 本文介绍如何使用 npm 脚本(npm scripts)。 一、什么是 npm 脚本? npm 允许在package.j
ruanyf
2018/04/12
1.3K0
npm scripts 使用指南
pnpm技术体系之:打造企业级 pnpm 开源组件
pnpm 是 performant npm(高性能的 npm),它是一款快速的,节省磁盘空间的包管理工具,同时,它也较好地支持了 workspace 和 monorepos,简化开发者在多包组件开发下的复杂度和开发流程。
南山种子外卖跑手
2023/01/12
2.3K0
pnpm技术体系之:打造企业级 pnpm 开源组件
使用pnpm极速进入monorepos模式
近来对tripdocs编辑器项目(已开源)进行重构,目标是使他能够按需加载指定的功能。因为要让插件能够分开加载,所以我需要把插件打包多个npm包。这时候,一个问题来了,多个git仓库还是一个git仓库。
爱吃大橘
2023/03/08
1.2K0
pnpm + workspace + changesets 构建你的 monorepo 工
关于这些问题,在之前的一篇介绍 lerna 的文章中已经详细介绍过,感兴趣的同学可以再回顾下。
astonishqft
2022/08/31
5.5K0
pnpm + workspace + changesets 构建你的 monorepo 工
VueUse scripts,他们都模仿过的脚本
今天我们就“单纯”地从 VueUse scripts 入手,从中探索我们后续也许会用上的第三方包库。
码农小余
2022/06/16
1.3K0
VueUse scripts,他们都模仿过的脚本
一起来写 VS Code 插件:为你的团队提供常用代码片段
VS Code 是前端开发者最佳的开发工具,你在开发中是否疲倦了从一个文件拷贝来新建一个文件呢?或者在你的团队内部是否有一些内部组件库,比如 Ant Design、 React hooks 等组件库,团队内部伴随开发的也一直打开组件相关文档?
狂奔滴小马
2021/11/15
1.3K0
一起来写 VS Code 插件:为你的团队提供常用代码片段
一起来写 VS Code 插件:为你的团队提供常用代码片段
VS Code 是前端开发者最佳的开发工具,你在开发中是否疲倦了从一个文件拷贝来新建一个文件呢?或者在你的团队内部是否有一些内部组件库,比如 Ant Design、 React hooks 等组件库,团队内部伴随开发的也一直打开组件相关文档?
狂奔滴小马
2021/11/22
5330
一起来写 VS Code 插件:为你的团队提供常用代码片段
VS Code 折腾记 - (10) 你想发布自己捣鼓的snippets到VSCode插件市场!
em..自认为英文不错和自学能力灰常好的大佬,到这里可以停止阅读了,省的浪费时间!
CRPER
2018/08/28
1.1K0
VS Code 折腾记 - (10) 你想发布自己捣鼓的snippets到VSCode插件市场!
基于 Yarn WorkSpace + Lerna + OrangeCI 搭建 Typescript Monorepo 项目实践
Lerna 已然成为搭建 monorepo 工程的首选,然而官方文档[1]并没有给出构建 monorepo 项目最后一公里的解决方案。而在这次在迁移搭建全民 K 歌基础库的实践中,在诸如 Orange CI 自动发布 npm 包等问题上就遇到了不少阻碍,我们把经验总结记录如下。 名词解释: Orange CI:腾讯内部开源的持续集成服务,类似于 Travis CI,一旦代码有变更,就自动运行构建和发布,并输出结果,是实现自动更新版本号及发布npm包的基础。 Monorepo:一种管理组织代码的方式,其主要
QQ音乐技术团队
2020/07/13
4.1K0
授人予渔,VSCode 如何调试 Vite 代码?
大家好,我是码农小余。在正式开始剖析 Vite 源码之前,先了解调试 CLI 工具的前期准备工作。亲们可以跟着步骤在自己的 PC 上准备好调试环境,后续每读完一个小节,建议都去单步调试、执行一遍流程,效果更佳。
码农小余
2022/06/16
8K0
授人予渔,VSCode 如何调试 Vite 代码?
怎样开发一个 Node.js 命令行工具包
1. 初始化项目 在一个合适的地方创建项目文件夹,为了演示,本次的项目名为 demo-cli,然后执行以下命令初始化项目: npm init 执行以上命令之后,会先配置一些 package.json 的基础信息,按提示输入即可: 1.1 配置 package.json 为了方便,我们把项目从 vscode 中打开,然后对 package.json 进行详细配置,篇幅有限,这里仅介绍其中比较重要的部分: 推荐阅读:package.json 详细配置。 1.1.1 name 项目名,同时也是发包的时候别人引入
用户1097444
2022/06/29
1.1K0
怎样开发一个 Node.js 命令行工具包
基于pnpm + lerna + typescript的最佳项目实践 - 理论篇
为什么叫pnpm?是因为pnpm作者对现有的包管理工具,尤其是npm和yarn的性能比较特别失望,所以起名叫做perfomance npm,即pnpm(高性能npm)
Nealyang
2022/04/11
3.7K0
基于pnpm + lerna + typescript的最佳项目实践 - 理论篇
npm模块管理器
npm不需要单独安装。在安装node的时候,会连带一起安装npm。但是,node附带的npm可能不是最新版本,最好用下面的命令,更新到最新版本。
奋飛
2019/08/15
1.4K0
【打造前端现代化规范工程】Vite + ESLint + Husky + Commitlint + Lint-staged
本文虽然使用 Vite 创建了一个 Vue3 + TS 的项目,但其实文中涉及的内容和技术栈并没有关系,主要是结合 ESLint ,Husky,等第三方库实现比较规范的现代化前端工程,可应用于任何技术栈的项目中
一尾流莺
2023/04/23
1.4K0
【打造前端现代化规范工程】Vite + ESLint + Husky + Commitlint + Lint-staged
带你了解并实践monorepo和pnpm,绝对干货!熬夜总结!
简单来说就是,将多个项目或包文件放到一个git仓库来管理。 目前比较广泛应用的是yarn+lerna的方式实现monorepo的管理。 一个简单的monorepo的目录结构类似这样:
winty
2023/08/23
8.2K0
带你了解并实践monorepo和pnpm,绝对干货!熬夜总结!
【总结】超全面的前端工程化配置指南!
上图标红就是相关的工程化配置,有 Linter、Tests,Github Actions 等,覆盖开发、测试、发布的整个流程。
前端老道
2023/09/15
9840
【总结】超全面的前端工程化配置指南!
【Vue工程】002-配置 eslnt 与 prettier
ESLint 是一个静态代码分析工具,用于检查 JavaScript 代码的语法结构和查找程序错误。
訾博ZiBo
2025/01/06
3260
推荐阅读
相关推荐
从零开发一款基于 webview 的 vscode 扩展
更多 >
领券
问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档