Prettier & Linters

Learn how to use Prettier and other linters with GraphQL Code Generator to apply your custom code style and formatting rules.

The codegen supports lifecycle hooks, and you can use those for integration with Prettier or other linters, to apply your custom code style and formatting rules.

Before adding a hook, consider the alternative of having codegen ignored in your linting. Codegen files should not be edited manually and formatting them slows down your codegen considerably. Differences can be measured in several seconds for every run on big projects.

You can read the complete documentation of lifecycle hooks here

Prettier

You can run it per each file:

import { CodegenConfig } from '@graphql-codegen/cli'

const config: CodegenConfig = {
  // ...
  hooks: { afterOneFileWrite: ['prettier --write'] }
  // ...
}
export default config

Or, for all files together:

import { CodegenConfig } from '@graphql-codegen/cli'

const config: CodegenConfig = {
  // ...
  hooks: { afterAllFileWrite: ['prettier --write'] }
  // ...
}
export default config

Consider this method if you’re using near-operation-file preset as this has better performance when writing many files.

TSLint

You can run it per each file:

import { CodegenConfig } from '@graphql-codegen/cli'

const config: CodegenConfig = {
  // ...
  hooks: { afterOneFileWrite: ['tslint --fix'] }
  // ...
}
export default config

Or, for all files together:

import { CodegenConfig } from '@graphql-codegen/cli'

const config: CodegenConfig = {
  // ...
  hooks: { afterAllFileWrite: ['tslint --fix'] }
  // ...
}
export default config

ESLint

You can run it per each file:

import { CodegenConfig } from '@graphql-codegen/cli'

const config: CodegenConfig = {
  // ...
  hooks: { afterOneFileWrite: ['eslint --fix'] }
  // ...
}
export default config

Or, for all files together:

import { CodegenConfig } from '@graphql-codegen/cli'

const config: CodegenConfig = {
  // ...
  hooks: { afterAllFileWrite: ['eslint --fix'] }
  // ...
}
export default config