Should I use .prettierrc or prettier.config.js?

.prettierrc (JSON or YAML) is simpler and sufficient for most projects. Use prettier.config.js when you need dynamic configuration, such as conditionally applying options based on environment variables.

How do I ignore files from Prettier formatting?

Create a .prettierignore file at the project root using the same syntax as .gitignore. Add generated files, build outputs, and large vendor files that should not be reformatted.

Does Prettier conflict with ESLint?

Only if ESLint has formatting rules enabled. Install eslint-config-prettier to disable all ESLint rules that conflict with Prettier, then let Prettier handle formatting and ESLint handle code quality.

Prettier Configuration File

Prettier is an opinionated code formatter that removes all debates about style by enforcing a consistent output. The .prettierrc file controls the handful of configurable options including print width, semicolons, quote style, and trailing commas. This example sets up a typical configuration with overrides for specific file types and a Prettier ignore file for generated files. The JSON formatter validates the config syntax before you commit it to ensure Prettier can read it without errors.

Example

{
  "printWidth": 100,
  "tabWidth": 2,
  "useTabs": false,
  "semi": true,
  "singleQuote": true,
  "quoteProps": "as-needed",
  "jsxSingleQuote": false,
  "trailingComma": "all",
  "bracketSpacing": true,
  "bracketSameLine": false,
  "arrowParens": "always",
  "endOfLine": "lf",
  "overrides": [
    {
      "files": "*.md",
      "options": { "proseWrap": "always", "printWidth": 80 }
    },
    {
      "files": "*.json",
      "options": { "trailingComma": "none" }
    }
  ]
}

[ open in JSON Formatter → ]

FAQ

Should I use .prettierrc or prettier.config.js?: .prettierrc (JSON or YAML) is simpler and sufficient for most projects. Use prettier.config.js when you need dynamic configuration, such as conditionally applying options based on environment variables.
How do I ignore files from Prettier formatting?: Create a .prettierignore file at the project root using the same syntax as .gitignore. Add generated files, build outputs, and large vendor files that should not be reformatted.
Does Prettier conflict with ESLint?: Only if ESLint has formatting rules enabled. Install eslint-config-prettier to disable all ESLint rules that conflict with Prettier, then let Prettier handle formatting and ESLint handle code quality.

Related Examples

EditorConfig for a Multi-Language Project

EditorConfig enforces consistent code style rules across different editors and I...

Strict TypeScript tsconfig for a React App

Enabling strict mode in TypeScript activates a collection of checks that catch t...

Format an ESLint Config File

ESLint config files can grow complex with extended configs, custom rules, and pe...