Prettier & Linters

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

⚠️

Using --check dry-run mode with prettyfied generated files

Because the --check dry-run mode is comparing local files with in-memory generated content, projects that runs Prettier on files generated with codegen will always end-up returning all files as stale.

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

VSCode Extension Apollo Federation