开发工具IDE代码编辑器后端【免费下载链接】openvscode-serverRun upstream VS Code on a remote machine with access through a modern web browser from any device, anywhere.项目地址https://gitcode.com/gh_mirrors/op/openvscode-server点击查看免费下载本文以 openvscode-serverRun upstream VS Code on a remote machine通过现代浏览器远程访问仓库中随附的 npm 扩展为对象系统讲解它如何把package.json中的 npm scripts 自动识别为 VS Code Tasks、如何在 NPM Scripts 视图中一键运行/调试脚本、以及如何通过编辑器悬停、资源管理器右键菜单和 CodeLens 触发脚本并完整梳理其全部配置项与包管理器自动检测的底层实现。读完本文你将掌握该扩展从任务自动检测到脚本运行/调试的完整用法并能在配置npm.autoDetect、npm.packageManager、npm.scriptRunner、npm.exclude等设置时做出准确决策。扩展概览随 VS Code 内置、可禁用不可卸载npm 扩展内部名npmdisplayName 为 NPM support for VS Code见 package.json是随 VS Code以及 openvscode-server一起捆绑发布的扩展。官方 README 明确提示它可以被禁用disabled但不能被卸载uninstalled见 README.md。扩展通过三个激活事件按需启动package.jsononTaskType:npm用户解析/运行类型为npm的任务时激活onLanguage:json编辑 JSON 文件时激活workspaceContains:package.json工作区存在package.json时激活。同时扩展声明了对虚拟工作区virtual workspaces与不受信任工作区untrusted workspaces的受限支持package.json凡是需要实际执行npm命令的功能在虚拟工作区中不可用执行任务需要工作区信任。Task Running把 npm scripts 变成 VS Code 任务扩展的核心能力是把package.json中定义的scripts自动映射为 VS Code 的 Tasks。任务自动检测Task Autodetection是 VS Code 内置机制当工作区包含package.json时扩展会扫描其中scripts字段为每个脚本生成一个类型为npm的任务。构建/测试任务的特殊分组在脚本名包含build、compile或watch时脚本会被当作构建任务build tasks名为test的脚本会被标记为测试任务。这一逻辑在 tasks.ts 中实现const buildNames: string[] [build, compile, watch]; function isBuildTask(name: string): boolean { for (const buildName of buildNames) { if (name.indexOf(buildName) ! -1) return true; } return false; } const testNames: string[] [test]; function isTestTask(name: string): boolean { for (const testName of testNames) { if (name testName) return true; } return false; }注意isBuildTask使用的是子串匹配indexOf因此dev:build、compile:watch这类脚本也会进入 Build 组而isTestTask要求脚本名精确等于test。除此之外pre/post生命周期脚本对应install、pack、publish、restart、shrinkwrap、stop、test、uninstall、version等会被归入 Clean 组用于标记脚本值中包含--inspect/--debug含-brk与端口参数的会被识别为调试脚本tasks.ts、tasks.ts。运行方式Tasks 菜单要运行这些脚本直接使用Tasks菜单Tasks: Run Task...扩展会自动检测到工作区中的所有 npm 脚本任务。也可以使用TerminalRun Task...或命令面板中的Tasks: Run Task命令从列表中选择脚本即可执行。底层实现NpmTaskProvider 与缓存任务检测的核心是 NpmTaskProvider它实现 VS Code 的TaskProvider接口provideTasks()调用provideNpmScripts()全量收集工作区内的 npm 脚本任务resolveTask()负责把tasks.json中手写的npm类型任务还原成可执行任务——解析时会根据任务定义中的path字段拼接出对应的package.json绝对路径再通过createScriptRunnerTask或createInstallationTask生成真正的任务tasks.ts检测结果带有缓存cachedTasks扩展会通过文件系统监听器监听**/package.json的创建、变更、删除以及工作区文件夹的增删自动失效缓存并刷新见 npmMain.ts 中的vscode.workspace.createFileSystemWatcher(**/package.json)与invalidateScriptCaches()。脚本解析本身使用jsonc-parser的visitAPI 遍历 JSON 文档只提取顶层scripts对象的每个键值对及其在文档中的位置区间readScripts.ts因此脚本名位置信息还能服务于悬停、CodeLens 与打开脚本定位。NPM Scripts 资源管理器视图扩展提供一个资源管理器视图NPM Scripts按工作区文件夹 → package.json → 脚本三层结构展示工作区内发现的所有脚本。该视图由 npmView.ts 中的NpmScriptsTreeDataProvider驱动树节点分为Folder、PackageJSON、NpmScript三类脚本节点悬停显示脚本内容tooltip/description取自task.detail每个脚本节点带内联Runnpm.runScript与Debugnpm.debugScript按钮以及打开脚本npm.openScript操作视图标题栏提供刷新按钮npm.refresh等价于失效所有缓存并重建树单个工作区时视图省略文件夹层级直接展示各package.json及其脚本多文件夹时按文件夹分组npmView.ts。启用视图npm.enableScriptExplorer已弃用README 提到视图由设置npm.enableScriptExplorer启用。需要特别说明的是在 package.json 中该设置已带有deprecationMessageThe NPM Script Explorer is now available in Views menu in the Explorer in all folders.即现在无需任何设置直接通过资源管理器顶部的 Views 菜单勾选 NPM Scripts 即可显示视图视图声明于 package.json其可见性由上下文键npm:showScriptExplorer控制扩展在工作区存在package.json时将其置为 true见 npmMain.ts。npm.enableScriptExplorer仍被保留仅为向后兼容默认值为false。点击行为npm.scriptExplorerAction视图里点击脚本节点默认是打开open脚本在编辑器中定位也可改为运行run。由设置npm.scriptExplorerAction控制取值open或run默认open作用域为windowpackage.json。在源码中除install脚本固定为 run 外其余脚本均按该设置决定点击行为npmView.ts。过滤脚本npm.scriptExplorerExclude视图还支持用正则表达式数组过滤掉不想看到的脚本设置键为npm.scriptExplorerExclude默认[]。只要脚本名匹配其中任意正则即从视图中隐藏注意它不影响任务自动检测npmView.ts。从编辑器直接运行脚本扩展支持在编辑package.json时直接运行脚本有两条路径悬停操作npm.scriptHover把鼠标悬停在package.json中某个脚本名的位置会弹出包含Run Script与Debug Script两个命令链接的悬停提示点击即可将脚本作为任务运行或放入调试器执行scriptHover.ts。该功能由npm.scriptHover设置控制默认truepackage.json。悬停通过命令链接npm.runScriptFromHover/npm.debugScriptFromHover携带脚本名与文档 URI 参数完成调用。Run Selected Npm Script 命令在package.json的scripts区域内放置光标然后执行命令Run Selected Npm Script命令 idnpm.runSelectedScript扩展会定位光标所在的脚本名并作为任务执行若光标位置无法对应到任何脚本则提示 Could not find a valid npm script at the selection.commands.ts。该命令同时出现在编辑package.json时的编辑器右键菜单resourceFilename package.json见 package.json。调试 CodeLensnpmScriptLens此外npmScriptLens.ts 提供了面向 npm 脚本的调试 CodeLensDebug 字样受debug.javascript.codelens.npmScripts配置控制支持三档never不显示top只在scripts字段起始位置显示一个Debugall在每个脚本名上方显示Debug点击后通过extension.js-debug.createDebuggerTerminal在调试终端中运行node --run/runner run命令。从资源管理器文件夹运行脚本扩展支持从资源管理器Explorer中某个文件夹的右键菜单运行该文件夹内package.json里的所有脚本。启用后右键文件夹会看到命令Run NPM Script in Folder...命令 idnpm.runScriptFromFolder执行后弹出 QuickPick 列表列出该文件夹下含子目录所有package.json的脚本选中即作为任务运行若没有脚本则提示信息commands.ts。注意README 原文中写 You enable this support with thenpm.runScriptFromFolderwhich isfalseby default这里存在笔误——npm.runScriptFromFolder实际是命令 id对应配置项应为npm.enableRunFromFolder默认false见 package.json。同时该右键菜单项的显示还受config.npm.enableRunFromFolder explorerViewletVisible explorerResourceIsFolder resourceScheme file条件约束package.json。依赖补全与悬停信息在线服务扩展会从 https://registry.npmjs.org 与 https://registry.bower.io 拉取数据为package.json中的依赖提供自动补全和悬停信息README Others 一节。该能力由 packageJSONContribution.ts 实现通过 jsonContributions.ts 注册为 JSON 语言的补全提供者与悬停提供者选择器限定**/package.json属性补全在dependencies、devDependencies、optionalDependencies、peerDependencies下输入包名时通过 npm registry 搜索接口/-/v1/search返回候选包未输入任何字符时先给出内置的被依赖最多热门包列表packageJSONContribution.ts并支持scope作用域包的二级补全版本补全输入依赖值时给出当前最新版本以及^、~三种版本写法的建议packageJSONContribution.ts悬停信息悬停在依赖名上显示包描述、最新版本、发布时间相对时间由 date.ts 生成x days ago之类文案与主页默认模板在空package.json中提供 Default package.json 片段packageJSONContribution.ts。离线/在线双通道如果本机检测到npm可执行文件优先用npm view --json拉取信息否则回退到在线 registry 请求packageJSONContribution.ts。是否允许联网由npm.fetchOnlinePackageInfo控制默认true并带有usesOnlineServices标签package.json。同时扩展还为package.json与bower.json注册了 JSON Schema 校验jsonValidation指向 schemastore见 package.json并对.npmrc、.npmignore提供语言支持package.json。设置项全表下表汇总了扩展的全部配置来源README.md 的 Settings 一节、package.json 与 package.nls.json设置项类型/取值默认值作用域说明npm.autoDetectoff|ononresource是否自动检测 scripts 为任务off时 NPM Scripts 视图会显示 The setting npm.autoDetect is off.npmView.tsnpm.runSilentbooleanfalseresource运行脚本时追加--silent参数tasks.tsnpm.packageManagerauto|npm|yarn|pnpm|bunautoresource安装依赖所用的包管理器auto时根据工作区锁文件自动检测npm.scriptRunnerauto|npm|yarn|pnpm|bun|nodeautoresource运行脚本所用的执行器node时以node --run script方式执行tasks.tsnpm.excludestring | string[]—resource从自动检测中排除的文件夹 glob 模式匹配 package.json 的绝对路径例如排除所有测试目录用**/test/**README 原文以**/test/**示例需注意转义npm.enableScriptExplorerbooleanfalseresource已弃用启用脚本资源管理器视图现可直接在资源管理器 Views 菜单勾选 NPM Scriptsnpm.scriptExplorerActionopen|runopenwindow视图内点击脚本的默认行为npm.scriptExplorerExcludestring[]正则[]resource从 NPM Scripts 视图中排除的脚本正则列表npm.enableRunFromFolderbooleanfalseresource是否在资源管理器文件夹右键菜单显示Run NPM Script in Folder...npm.fetchOnlinePackageInfobooleantruewindow是否联网获取 npm 依赖补全与悬停信息带usesOnlineServices标签npm.scriptHoverbooleantruewindow是否在脚本名上显示 Run Script / Debug Script 悬停操作包管理器与脚本运行器的自动检测机制npm.packageManager与npm.scriptRunner默认值都是auto其检测逻辑集中在 preferred-pm.ts 的findPreferredPM()中依据是工作区内的锁文件/特征文件包管理器检测依据npm存在package-lock.jsonpnpm存在pnpm-lock.yaml或shrinkwrap.yaml或向父目录向上查找pnpm-lock.yamlyarn存在yarn.lock或检测到 Yarn workspace 根bun存在bun.lockb或bun.lock检测顺序为 npm → pnpm → yarn → bun命中即取第一个作为结果若上述均未命中则借助which-pm库读取项目实际用于安装的包管理器兜底默认npm。脚本运行器的检测复用同一逻辑getScriptRunner/getPackageManager在值为auto时调用detectPackageManager见 tasks.ts。值得注意的一个细节当同一目录同时存在多个包管理器的锁文件时findPreferredPM会返回multipleLockFilesDetected: true此时运行脚本npm.runScript会弹出提示信息建议删除不匹配的锁文件或将npm.packageManager从auto改为明确值该提示可通过 Do not show again 全局关闭tasks.ts。实际生成的命令确定了 scriptRunner 后脚本任务的真实命令按如下规则构建tasks.tsnode执行器node --run script其余执行器runner run [--silent] script--silent仅在npm.runSilent为 true 时追加安装依赖任务packageManager install [--silent]tasks.ts每个任务都会把工作目录cwd设置为对应package.json所在目录并对含空格的参数做 Shell 引号转义tasks.ts、tasks.ts。在 tasks.json 中手写 npm 任务自动检测之外你也可以在tasks.json中手写 npm 类型任务。任务定义声明于 package.json必填属性script要运行的 npm 脚本名可选属性path提供该脚本的package.json所在文件夹的相对路径可省略省略时使用工作区根目录的package.json。典型示例{ version: 2.0.0, tasks: [ { type: npm, script: build, group: build }, { type: npm, script: lint, path: packages/cli/, problemMatcher: [] } ] }解析时resolveTask()会根据path拼接出workspaceFolder path package.json再生成执行任务install脚本会被特殊处理为安装依赖任务tasks.ts。任务名在多package.json场景下会自动带上相对路径后缀以便区分如build - packages/cli/见getTaskNametasks.ts。终端错误快速修复与浏览器端差异扩展还注册了一个终端 QuickFix 提供者ms-vscode.npm-command见 package.json 与 npmMain.ts当终端中npm命令报错并输出 Did you mean ...? 这类建议时会在终端中显示可直接执行的修复命令一键重跑正确的脚本。需要留意的是浏览器端差异在 openvscode-server 这类远程/浏览器环境下扩展的浏览器入口 npmBrowserMain.ts 只注册 JSON 补全/悬停提供者离线信息通道不可用npmCommandPath传undefined不注册任务提供者、脚本视图与命令——因为浏览器端没有真实的npm可执行文件来运行脚本。同时npm.packageManager的auto检测依赖对本地文件系统的访问在虚拟工作区如远程文件系统中执行类功能受限见 package.json 的 capabilities 声明。此外主入口 npmMain.ts 会读取http.proxy/http.proxyStrictSSL配置来初始化在线请求configureHttpRequest网络受限环境下请通过这两项代理设置保证 registry 请求可用。小结openvscode-server 内置的 npm 扩展把识别脚本、运行脚本、调试脚本三个高频操作完整地编织进编辑器任务自动检测与分组让npm run融入 Tasks 体系NPM Scripts 视图、脚本悬停、CodeLens 与文件夹右键命令提供了从不同入口触发的运行/调试路径npm.autoDetect、npm.exclude、npm.scriptRunner与npm.packageManager等设置则精确控制检测范围与执行器选择。其背后依赖 tasks.ts、preferred-pm.ts、readScripts.ts、npmView.ts、scriptHover.ts 与 packageJSONContribution.ts 等源码模块的协同理解这些实现细节能帮助你在多包管理器的 monorepo 项目中更准确地预测扩展行为。赞分享开发工具IDE代码编辑器后端【免费下载链接】openvscode-serverRun upstream VS Code on a remote machine with access through a modern web browser from any device, anywhere.项目地址https://gitcode.com/gh_mirrors/op/openvscode-server点击查看免费下载相关推荐openvscode-server 内置 Gulp 扩展解析任务自动检测、配置项与源码实现全解openvscode server 内置 Gulp 扩展解析任务自动检测、配置项与源码实现全解 导读 在 openvscode server基于 VS Co开发工具IDE代码编辑器后端Positron 内置 Node npm 扩展深度解析npm 脚本任务、Script Explorer 与自动检测机制Positron 内置 Node npm 扩展深度解析npm 脚本任务、Script Explorer 与自动检测机制 本文以 Positron基于 VS开发工具代码编辑器数据科学Vortex 非关键错误处理机制解析从 showError 入口到 OTel 静默上报的完整链路Vortex 非关键错误处理机制解析从 showError 入口到 OTel 静默上报的完整链路 本篇技术指南聚焦 Vortex 的 非关键错误Non Cr桌面应用上一篇Purpur服务器深度调优指南10个关键性能突破技术下一篇终极指南Windows上安装安卓APK的完整解决方案创作声明：本文部分内容由AI辅助生成（AIGC），仅供参考
