Gatsby Plugin Prettier ESLint

1.0.6 verified Sat Apr 25 auth: no javascript

Integrates Prettier and ESLint with Gatsby, automatically formatting and linting files on save or during development. Version 1.0.6 is the latest (no release cadence specified). It runs in watch mode, supports initial full scan, and can be configured to process different file patterns for Prettier and ESLint separately. Unlike other plugins, it requires explicit peer dependency installation (prettier, eslint, gatsby ≥2.0.0) and offers granular control via gatsby-config options. It is ideal for keeping code style consistent during Gatsby development without manual formatting steps.

Common errors

error Cannot find module 'prettier' ↓

cause Missing peer dependency 'prettier'

fix

Run: npm install prettier

error Cannot find module 'eslint' ↓

cause Missing peer dependency 'eslint'

fix

Run: npm install eslint

error The module 'gatsby-plugin-prettier-eslint' is not a valid Gatsby plugin ↓

cause Plugin not installed or version incompatible with Gatsby version

fix

Run: npm install gatsby-plugin-prettier-eslint. Ensure Gatsby is version 2.x or 3.x.

Warnings

gotcha Do NOT target the same file patterns with both prettier and eslint options to avoid redundant work or bad behaviour. ↓

fix Configure prettier.patterns and eslint.patterns with non-overlapping globs.

gotcha The default initialScan true will format/lint the entire project on Gatsby startup, which may be slow for large projects. ↓

fix Set initialScan: false in options to skip initial full scan.

gotcha watch is true by default, meaning formatting/linting runs on every save. This may cause performance issues or unexpected changes. ↓

fix Set watch: false in options to disable automatic formatting on save.

deprecated The package has not been updated since 2021 and may not be compatible with Gatsby v4+ or newer versions of ESLint/Prettier. ↓

fix Consider alternative plugins like gatsby-plugin-eslint or manually configure lint-staged/husky.

Install

npm install gatsby-plugin-prettier-eslint

yarn add gatsby-plugin-prettier-eslint

pnpm add gatsby-plugin-prettier-eslint

Imports

default

wrong

import gatsbyPluginPrettierEslint from 'gatsby-plugin-prettier-eslint'

correct

module.exports = { plugins: [{ resolve: 'gatsby-plugin-prettier-eslint', options: { ... } }] }

This is a Gatsby plugin, not a standard ES module. It is configured in gatsby-config.js using CommonJS module.exports.

Quickstart

Shows minimal gatsby-config setup using gatsby-plugin-prettier-eslint with Prettier for CSS/JSON etc. and ESLint for JS/TS files.

// Install dependencies
// npm install prettier eslint gatsby-plugin-prettier-eslint

// gatsby-config.js
module.exports = {
  plugins: [
    {
      resolve: 'gatsby-plugin-prettier-eslint',
      options: {
        prettier: {
          patterns: ['**/*.{css,scss,less}', '**/*.{json,json5}', '**/*.{graphql}', '**/*.{md,mdx}', '**/*.{html}', '**/*.{yaml,yml}'],
        },
        eslint: {
          patterns: '**/*.{js,jsx,ts,tsx}',
          customOptions: { fix: true, cache: true },
        },
      },
    },
  ],
};