如何把 Parcel 构建诊断接入 VS Code：安装 LSP Reporter 与扩展

如何把 Parcel 构建诊断接入 VS Code安装 LSP Reporter 与扩展【免费下载链接】parcelThe zero configuration build tool for the web. 项目地址: https://gitcode.com/gh_mirrors/pa/parcel默认情况下Parcel 的错误、警告和构建信息只输出到终端。parcel/reporter-lspreporter 配合 Parcel for VS Code 扩展可以改变这一点reporter 在构建时把诊断推送给一个 LSP server扩展再把这些诊断以内联标记的形式显示在编辑器里。完成接入后你在 VS Code 中编辑的代码一旦出现编译错误、警告或未使用的导出会直接标在对应行上而不需要盯着终端日志。前提条件VS Code 版本满足扩展要求的^1.67.0见 扩展 package.json 的engines字段。项目中已安装 Parcel版本满足 reporter 的engines约束parcel: ^2.16.3、node: 16.0.0见 reporter package.json。扩展和 Parcel 进程指向同一个项目根目录原因见下文诊断如何送达 VS Code。第一步安装 Parcel for VS Code 扩展按 扩展 README 的用法第一步就是安装扩展。在 VS Code 扩展市场搜索Parcel for VS Code发布者标识为parcel见 package.json 的publisher与displayName字段并安装。扩展在onStartupFinished时激活无需手动触发。如果你手边就是 Parcel 仓库本身也可以按 CONTRIBUTING.md 的 Packaging 一节本地打包安装可选路径在packages/utils/parcelforvscode目录下执行yarn package生成一个.vsix文件后用下面的命令安装其中文件名里的版本以实际产物为准code --install-extension parcel-for-vscode-version.vsix第二步安装 LSP Reporter 并启动构建在项目中安装parcel/reporter-lsp包用你的包管理器例如yarn add -D parcel/reporter-lsp然后给 Parcel 命令加--reporter参数。reporter 的 README 给出的示例parcel serve --reporter parcel/reporter-lsp扩展 README 给出的等价形式parcel src/index.html --reporter parcel/reporter-lsp根据 reporter 的 READMEparcel/reporter-lsp配合 Parcel 的build、watch、serve命令使用。诊断如何送达 VS Code理解这条链路有助于判断接入是否生效扩展启动时会拉起自己的 LSP server入口见 extension.ts 中client.start()server 模块为parcel/lsp。LSP server 启动时会在临时目录下创建parcel-lsp目录并写入一个名为lsp-server的哨兵文件之后扫描该目录寻找正在运行的 Parcel 进程LspServer.ts。reporter 一侧会检测这个哨兵文件只有当 LSP server 已激活时watchStart事件到达后 reporter 才会创建 IPC socket并写入一个parcel-pid.json元文件内容包含projectRoot、pid、argv见 LspReporter.js 中doWatchStart。LSP server 按projectRoot与当前打开的工作区做匹配只有匹配上才建立 IPC 连接LspServer.ts中的if (WORKSPACE_ROOT projectRoot)。因此如果 VS Code 中打开的项目根目录与执行 Parcel 命令的项目不一致连接不会建立诊断也就不会送达。验证接入是否生效保持 Parcel 进程带--reporter parcel/reporter-lsp运行例如parcel serve --reporter parcel/reporter-lsp。在代码中制造一个错误或警告触发重新构建。在编辑器中查看错误是否内联标出同时打开 Problems 面板核对文档示例中的快捷键为 Shift CMD M见 CONTRIBUTING.md。reporter 会处理buildSuccess、buildFailure与logerror/warn/info/verbose级别事件把带代码框codeframe的诊断转成 LSP Diagnostic 推送过去一条诊断的第一个 codeframe 高亮作为主 Diagnostic其余高亮进入relatedInformationLspReporter.js 的updateDiagnostics。构建开始、进度、结束也会通过构建状态通知同步给编辑器。可选Importers 视图扩展还贡献了一个 Explorer 侧的Importers视图执行命令面板中的Focus in importers view会显示当前活动编辑器文件在构建图中的引用来源见 扩展 package.json 的contributes.views与viewsWelcome实现见 importersView.ts。视图内容依赖 reporter 侧对 bundleGraph 的查询构建结束后会清空。边界与限制诊断推送依赖 IPC 连接前提仍是上面的两条扩展的 LSP server 已启动且projectRoot匹配。两者缺一Problems 面板里就不会出现 Parcel 的诊断。reporter 的 IPC 目录位于系统临时目录下的parcel-lsp其中残留的parcel-pid.json会在 reporter 下次启动时按 pid 是否存活清理见doWatchStart开头的清理循环Parcel 进程结束时元文件会被删除。本文只覆盖诊断接入这一条链路扩展的.parcelrc与package.jsontargets 的 JSON schema 校验是独立的贡献项不涉及 reporter。如果后续需要自己调试这条链路CONTRIBUTING.md 给出了 Extension Development Host 的launch.json配置示例例如在packages/examples/kitchen-sink上运行parcel server --reporter parcel/reporter-lsp可按其步骤在 VS Code 中启动扩展宿主窗口复现整套流程。【免费下载链接】parcelThe zero configuration build tool for the web. 项目地址: https://gitcode.com/gh_mirrors/pa/parcel创作声明：本文部分内容由AI辅助生成（AIGC），仅供参考