GraphQLSP

这是一个TypeScript LSP插件，可以识别TypeScript代码中的文档，并为您提供悬停信息、诊断和自动完成功能。

特性

显示字段描述的悬停信息
对添加不存在、已弃用、参数类型不匹配等字段进行诊断
编辑器内字段自动完成
当您从导出了未使用片段的文件中导入时会发出警告

请注意，此插件不提供语法高亮功能。您仍需使用类似VSCode/...插件来实现语法高亮。

安装

npm install -D @0no-co/graphqlsp

使用方法

在您的tsconfig.json中添加以下内容：

{
  "compilerOptions": {
    "plugins": [
      {
        "name": "@0no-co/graphqlsp",
        "schema": "./schema.graphql"
      }
    ]
  }
}

现在重启您的TS服务器，确保您使用的是工作区版本的TypeScript。在VSCode中，您可以通过点击TypeScript文件右下角或添加类似这样的文件来实现。

如果您使用VSCode，请确保您的编辑器使用的是工作区版本的TypeScript。您可以手动选择或在.vscode/config.json中添加以下内容：
{
  "typescript.tsdk": "node_modules/typescript/lib",
  "typescript.enablePromptUseWorkspaceTsdk": true
}

配置

必需

schema：允许您指定一个URL、.json或.graphql文件作为您的模式。如果您需要为内省指定头信息，可以使用对象表示法，例如：{ "schema": { "url": "x", "headers": { "Authorization": "y" } }}

可选

template：在默认的gql和graphql之外添加额外的模板
templateIsCallExpression：告诉我们的客户端您使用的是graphql('doc')（默认值：true）。设置为false时，将查找标记的模板字面量
shouldCheckForColocatedFragments：启用时，将扫描您的导入以查找未使用的片段，并提供通知消息（仅适用于调用表达式，默认值：true）
trackFieldUsage：仅适用于客户端预设，启用时将警告您同一文件中未使用的字段（仅适用于调用表达式，默认值：true）
tadaOutputLocation：使用gql.tada时很方便，它会自动为您生成一个introspection.ts文件，只需提供输出目录即可
tadaDisablePreprocessing：此设置禁用tadaOutput优化为预处理的TypeScript类型，默认关闭

跟踪未使用的字段

目前，跟踪未使用字段的功能在跟踪方面有一些限制。首先，它只会跟踪同一文件中的结果和访问的属性，以鼓励片段共置。

其次，我们不跟踪mutations/subscriptions，因为一些开发者会添加额外的字段以正确支持规范化缓存更新。

片段屏蔽

当我们使用支持TypedDocumentNode的useQuery时，它会自动从您提供的query中获取类型。然而，对于片段来说，这可能会变得更加麻烦。为片段提供类型的最简单方法如下：

import { TypedDocumentNode } from '@graphql-typed-document-node/core';

export const PokemonFields = gql`
  fragment pokemonFields on Pokemon {
    id
    name
  }
` as typeof import('./Pokemon.generated').PokemonFieldsFragmentDoc;

export const Pokemon = props => {
  const pokemon = useFragment(props.pokemon, PokemonFields);
};

export function useFragment<Type>(
  data: any,
  _fragment: TypedDocumentNode<Type>
): Type {
  return data;
}

这主要用于不支持开箱即用的情况，主要作为一种为类型进行转换的方法。

💙 赞助商

<table> <tr> <td align="center"><a href="https://bigcommerce.com/"><img src="https://avatars.githubusercontent.com/u/186342?s=150&v=4" width="150" alt="BigCommerce"/><br />BigCommerce</a></td> <td align="center"><a href="https://wundergraph.com/"><img src="https://avatars.githubusercontent.com/u/64281914?s=200&v=4" width="150" alt="WunderGraph"/><br />WunderGraph</a></td> <td align="center"><a href="https://the-guild.dev/"><img src="https://avatars.githubusercontent.com/u/42573040?s=200&v=4" width="150" alt="The Guild "/><br />The Guild</a></td> </tr> </table> <table> <tr> <td align="center"><a href="https://beatgig.com/"><img src="https://avatars.githubusercontent.com/u/51333382?s=200&v=4" width="100" alt="BeatGig"/><br />BeatGig</a></td> </tr> </table>

本地开发

在根目录运行pnpm i。通过运行code packages/example打开packages/example，或者如果您想利用断点，可以使用TSS_DEBUG_BRK=9559前缀。当您在packages/graphqlsp中进行更改时，只需在另一个编辑器中运行pnpm i并重启TypeScript server即可应用更改。