Relay 编辑器支持完全指南基于 Rust 编译器与 LSP 协议的 VS Code 开发体验【免费下载链接】relayRelay is a JavaScript framework for building>项目地址: https://gitcode.com/gh_mirrors/relay29/relayRelay 从 v14.0.0 起将全新的 Rust 版编译器与 Language Server Protocol 文档为骨架结合 vscode-extension 与 compiler/crates/relay-lsp 的源码实现完整讲解其能力清单、安装方式、工作原理、配置项与命令帮助你为 Relay 项目搭建一流的编辑器内开发体验。为什么 Relay 需要自己的编辑器支持Relay 编译器对散落在你代码中的 GraphQL 有着丰富且精准的理解——它知道哪些 fragment 被哪些组件使用、字段是否已废弃、类型之间的关联关系、以及 Relay 特有的指令如connection、refetchable、arguments语义。过去这些信息只能通过命令行跑编译器的输出获得开发体验割裂。从 v14.0.0 开始新的 Rust Relay 编译器可以直接在代码编辑器中提供语言特性即in-editor能力把编译期知识实时、可视化地反馈给开发者。这带来的直接效果包括Relay 编译器错误直接以红色波浪线呈现在编辑器中无需切到终端看报错GraphQL 标签模板字面量tagged template literals全流程自动补全写字段、fragment、类型时按需提示悬停即可查看类型信息和 Relay 特有功能的文档deprecated字段以删除线strikethrough渲染废弃信息一目了然fragment、字段和类型支持点击跳转到定义Click-to-definition常见错误提供快速修复建议Quick fix一键修正。语言服务器基于 LSP 协议实现编辑器支持的底层实现采用 Language Server Protocol这意味着同样的服务器可以被 VS Code、Neovim、Emacs、JetBrains 系列等多种编辑器复用——只要它们实现了 LSP 客户端协议即可。协议本身是一次实现处处复用但 Relay 团队选择在此基础上再提供一层官方体验。在仓库中语言服务器的 Rust 实现位于 compiler/crates/relay-lsp从目录结构看它覆盖了 LSP 的完整能力面能力模块源文件对应 LSP 能力补全completion.rstextDocument/completion跳转定义goto_definition.rstextDocument/definition悬停hover.rstextDocument/hover快速修复code_action.rstextDocument/codeAction诊断波浪线diagnostic_reporter.rstextDocument/publishDiagnostics查找引用references.rstextDocument/references重命名rename.rstextDocument/rename内联提示inlay_hints.rstextDocument/inlayHint服务器本身通过relay lsp子命令启动由 VS Code 扩展以子进程方式拉起详见下文工作机制一节。官方 VS Code 扩展虽然 LSP 协议让多种编辑器都能接入但 Relay 团队还是与 Coinbase 的 Terence Bezman 合作在发布该能力的同时贡献了一个官方 VS Code 扩展publisher 为meta标识为meta.relay仓库中名为relay/ 显示名 Relay GraphQL。扩展源码即本仓库的 vscode-extension 目录。扩展的激活activation覆盖了日常写 Relay 代码的全部语言环境见 package.json 的activationEventsjavascript/javascriptreacttypescript/typescriptreactgraphqlplaintext同时它声明了唯一一个扩展依赖extensionDependenciesGraphQL.vscode-graphql-syntax用于提供 GraphQL 语法的代码高亮Relay 扩展本身聚焦于语义层面的语言能力。二进制发现机制扩展运行的关键前提是找到relay-compiler提供的 Rust 二进制。从 findRelayBinary.ts 的源码可以看到完整的查找流程从工作区根目录或relay.rootDirectory指定的子目录出发逐级向上遍历目录寻找node_modules/relay-compiler包最多向上回溯 5000 层根据当前平台与架构定位二进制文件macos-x64/relay、macos-arm64/relay、linux-x64/relay、linux-arm64/relay、win-x64/relay.exe读取该包的package.json用 semver 校验版本是否落在扩展支持范围内SEMVER_RANGE若版本不匹配、包不存在或架构不支持会写入 Relay 输出通道并在必要时弹出错误提示预发布版本prerelease则假定用户知情继续使用用户也可通过relay.pathToRelay手动指定二进制绝对路径此时扩展不做版本校验。这一设计保证了扩展与编译器版本的一致性避免扩展新、编译器旧导致的能力错位。安装与使用确保项目中安装了与扩展兼容的relay-compilernpm 包Rust 编译器随包分发平台二进制。在 VS Code 扩展市场搜索官方扩展publishermeta并安装扩展会自动拉起依赖的GraphQL.vscode-graphql-syntax语法高亮扩展。打开 Relay 项目扩展会自动探测二进制并启动语言服务器extension.ts 中的activate流程。若希望打开项目时自动运行编译器 watch 模式请开启设置项relay.autoStartCompiler。扩展工作机制从激活到语言服务器从 extension.ts 的源码可以还原扩展的完整启动链路构建扩展上下文buildRelayExtensionContext读取配置、创建 Relay 与 Relay LSP Logs 两个输出通道、创建状态栏项并调用findRelayBinaryWithWarnings查找编译器二进制找不到二进制时降级扩展会停止执行并仅注册 noop 的relay://协议 provider避免非 Relay 项目的package.json顶部出现告警标记找到二进制时初始化状态栏、注册命令、创建并启动语言客户端createAndStartLanguageClient、注册文档内容 provider按配置决定是否启动编译器relay.autoStartCompiler为 true 时调用createAndStartCompiler否则在输出通道提示用户手动开启。语言客户端如何启动 LSP 服务器languageClient.ts 是 LSP 客户端与 Rust 服务器之间的桥梁其关键逻辑服务器命令为relay lsp --outputlevel并可选追加--locateCommandpath用于 implementation-first schema 下定位 GraphQL 实体定义服务器进程的cwd被设置为工作区根目录或rootDirectory这决定了 LSP 服务器如何发现relay.config.jsondocumentSelector限定为filescheme 下的javascript、typescript、typescriptreact、javascriptreact、graphql五种语言即只在真实文件非虚拟/输出面板中提供能力由于服务器把调试日志写到 stderr客户端设置RevealOutputChannelOn.Never以避免 VS Code 频繁弹出 Something went wrong 提示额外注册了LSPStatusBarFeature把服务器状态同步到状态栏lspStatusBarFeature.ts。编译器 watch 模式的启动compiler.ts 负责编译器的集成在临时集成终端Relay Compiler中运行relay --watch --outputlevel [pathToConfig]实现文件变更时的持续编译与产物生成isTransient: true表示终端在任务结束后自动回收若已存在运行中的编译器终端则不会重复创建killCompiler通过 dispose 终端停止编译。配置项详解扩展的配置项统一以relay.为前缀声明于 package.json 的contributes.configuration。下表按字段说明其类型、默认值与作用与 config.ts 的读取逻辑一致配置项类型默认值作用relay.compilerOutputLevelstringverbose控制写入 Relay Compiler 输出通道的日志级别可选quiet、quiet-with-errors、verbose、debugrelay.lspOutputLevelstringquiet-with-errors控制写入 Relay LSP Logs 输出通道的语言服务器日志级别取值同上relay.pathToLocateCommandstring | nullnull指向一个可选脚本用于在 implementation-first GraphQL schema 下查找 GraphQL 实体的真实定义位置relay.pathToRelaystring | nullnullrelay 二进制的绝对路径不设置时扩展会从最近的node_modules目录查找relay.rootDirectorystring | nullnull相对 VS Code 工程根目录的子路径。修改它会改变查找relay-compiler模块的起点也会影响 LSP 服务器的启动目录进而影响relay.config.json的发现——适合项目位于嵌套目录的场景relay.pathToConfigstring | nullnull相对rootDirectory的 relay 配置文件路径不设置时编译器会自行搜索配置relay.autoStartCompilerbooleanfalse打开项目时是否自动以 watch 模式启动 Relay 编译器注意config.ts中compilerOutputLevel的兜底默认值写为info而扩展 manifest 中声明为verbose若你在配置文件中显式赋值以实际赋值为准。扩展提供的命令扩展通过contributes.commands注册了四个命令命令面板中以Relay:前缀出现见 package.json命令 ID标题用途relay.restartRelay: Restart重启语言客户端与编译器配置变更后可用relay.startCompilerRelay: Start Compiler手动以 watch 模式启动编译器relay.stopCompilerRelay: Stop Compiler停止正在运行的编译器relay.copyOperationRelay: Copy Operation复制当前光标所在的操作operation文本便于调试或分享为什么需要 Relay 专属扩展而不是通用 GraphQL 扩展GraphQL 基金会维护着一个官方的通用语言服务器及对应 VS Code 扩展能提供通用层面的 GraphQL 编辑器体验。对 Relay 用户而言它可作为基线baseline但直接从 Relay 编译器获取信息能带来两方面的关键收益这也是原文档明确给出的两个理由编译器错误直通编辑器Relay 编译器的报错能直接以 Problems 面板 红色波浪线的形式呈现在编辑器内且常附带建议的快速修复quick fixes。这比在终端里翻看编译输出要高效得多——错误就近出现在出错的那一行代码上。Hover 信息感知 Relay 特性悬停提示是感知 Relay 特有功能与指令的并能链向对应文档。通用 GraphQL 服务器不理解connection、refetchable、arguments等 Relay 指令的业务含义而 Relay 专属服务器可以精确解释它们。换句话说通用扩展回答的是这段 GraphQL 语法是否正确而 Relay 扩展回答的是这段 GraphQL 在 Relay 的语义下是否正确、如何使用、怎么修。这也是 Relay 编译器rich understanding of the GraphQL embedded in your code这一设计理念在工具链层面的落地。底层实现速览relay-lsp 服务器语言服务器本体是 Rust crate compiler/crates/relay-lsp。从源码结构看它的几个核心组成部分server 模块server.rs、server/lsp_request_dispatch.rs、server/lsp_notification_dispatch.rs负责请求/通知的派发与 LSP 状态机管理包括心跳heartbeat.rs与任务队列task_queue.rs以应对大项目中的并发编译任务文本管理text_documents.rs跟踪打开文档的内容使诊断与补全基于编辑器内最新文本而非磁盘快照诊断diagnostic_reporter.rs把编译错误映射为 LSP Diagnostic即编辑器里的红色波浪线与 Problems 条目类型信息type_information.rs、resolved_types_at_location.rs、node_resolution_info解析光标位置处的类型路径支撑 hover 与补全的语义信息跳转定义goto_definition 与 goto_docblock_definition.rs既支持 GraphQL 内fragment/字段/类型的跳转也支持 GraphQL 与 Relay 的 docblockRelayResolver等之间的双向定位schema 探索explore_schema_for_type 与 search_schema_items.rs在 schema 中检索类型与字段为补全提供候选字段用法统计find_field_usages/find_field_locations.rs定位字段被引用的位置支撑引用查找与重命名。对于希望深入研究 LSP 协议交互细节的读者relay-lsp/tests 下的测试用例包含请求响应 JSON 与对应 GraphQL fixture是最直接的参考。常见问题排查提示找不到 relay-compiler 包扩展从工作区向上遍历查找node_modules/relay-compiler。确认你的项目确实安装了relay-compilernpm/yarn 依赖或通过relay.pathToRelay显式指定二进制绝对路径。版本不匹配弹窗安装的relay-compiler版本不在扩展支持的 semver 范围内需升级编译器或扩展使二者对齐。Relay Compiler 没有自动运行relay.autoStartCompiler默认关闭可手动执行命令Relay: Start Compiler或在设置中开启自动启动。项目在嵌套目录中使用relay.rootDirectory指定子目录扩展会基于该目录查找编译器与配置文件relay.pathToConfig可进一步显式指定relay.config.json位置。LSP 日志排查将relay.lspOutputLevel调为verbose或debug查看 Relay LSP Logs 输出通道中的服务器日志。小结Relay 的编辑器支持是Rust 编译器 LSP 协议 VS Code 官方扩展三者的组合拳编译器贡献对 GraphQL 的语义理解LSP 协议保证多编辑器可移植官方扩展则把开箱即用的体验做到极致。对普通开发者而言安装官方扩展即可获得错误内联呈现、智能补全、悬停文档、废弃标记、跳转定义与快速修复对工具链开发者而言vscode-extension 的客户端实现与 relay-lsp 的服务器实现则提供了完整的参考样板。【免费下载链接】relayRelay is a JavaScript framework for building>项目地址: https://gitcode.com/gh_mirrors/relay29/relay创作声明：本文部分内容由AI辅助生成（AIGC），仅供参考