ESLintでGraphQLもlintする

https://zenn.dev/oubakiou/books/181b750dfb6838/viewer/42765a
の下書き。

.graphqlファイルでSDLやquery/mutation扱っている、かつgraphql-eslintを使う場合の話。

npm install --save-dev @graphql-eslint/eslint-plugin 

でプラグインを入れて

.eslintrc.json

{
  //中略
  "overrides": [
    {
      "files": ["./graphql/operations/**/*.graphql"],
      "parserOptions": {
        "operations": "./graphql/operations/**/*.graphql",
        "schema": "./graphql/generated/schema.graphql"
      },
      "extends": "plugin:@graphql-eslint/operations-recommended"
    }
  ]
}

みたいなeslint設定を書く。

parserOptions.schemaに指定するのは https://api.github.com/graphql みたいなHTTPのエンドポイント(introspectionが有効な)でも、schema.graphqlみたいな手元のファイルでもいい。なんだったらHTTPのエンドポイントから@graphql-codegen/schema-astなんかでファイル生成してそれを使っても良い。

GraphQLクライアント側で使うquery/mutationであればoperations-recommended、GraphQLサーバー側で使うSDL(スキーマ定義)であればschema-recommendedみたいなルールセットが用意されてるのでそれを使うと良い。

これには例えばrequire-id-when-availableみたいなベストプラクティクスを強制させるルールも含まれている。なお命名規約に関するルールも入っているが、既に存在するプロジェクトに対して適用する場合は調整が必要かもしれない。デフォルトではgetUsersみたいな名前は怒られる。

なおVSCodeからeslintを使っている場合は

.vscode/settings.json

{
 //中略
  "eslint.validate": [
    "javascript",
    "javascriptreact",
    "typescript",
    "typescriptreact",
    "graphql"
  ]
}

みたいに.graphqlをeslint対象として追加するよう設定が必要。