Set Up Prettier for TypeScript

Prettier is an opinionated code formatter. It reads your TypeScript files and rewrites them with consistent indentation, line width, quotes, trailing commas, and spacing. Unlike ESLint, which catches bugs and enforces code quality rules, Prettier only cares about how the code looks.

Formatting by hand wastes time in code review. Every comment about a missing semicolon or an extra space is a comment that could have been about logic. Prettier removes that entire category of feedback by enforcing one style automatically. For the complementary tool that catches bugs, see Set Up ESLint for TypeScript.

Install Prettier

Install Prettier with the exact-version flag so your entire team uses the same formatter:

bash

npm install --save-dev --save-exact prettier

The --save-exact flag pins the version in package.json. Even a minor Prettier release can change formatting, so locking the version avoids surprises across different machines.

Create a Config File

Prettier works without configuration, but an empty config file tells editors that the project uses Prettier intentionally. Create one with this command:

bash

echo "{}" > .prettierrc

If you want to customize Prettier's defaults beyond the empty config, here are the most useful options for TypeScript projects. Each one controls a specific formatting decision:

json

{
  "semi": true,
  "singleQuote": true,
  "trailingComma": "all",
  "printWidth": 100,
  "tabWidth": 2
}

The trailingComma option set to "all" adds commas after the last item in objects, arrays, and function parameters. This produces cleaner diffs when you add or remove items later. The printWidth option controls the maximum line length before Prettier wraps code.

Create a .prettierignore

Some files should never be formatted: build output, generated code, and coverage reports. Create a .prettierignore to exclude them:

text

dist
build
coverage
node_modules
package-lock.json

Prettier also respects your .gitignore file, so files already ignored by git are automatically skipped. For a complete toolchain setup, see tsx vs ts-node for Running TypeScript to choose the right TypeScript runner for your scripts.

Format Your Project

Run Prettier across the entire project to format everything at once:

bash

npx prettier . --write

For a large project, you can target a specific directory instead. This is faster and limits the scope of changes in a single commit:

bash

npx prettier src/ --write

Make Prettier Work with ESLint

Prettier and ESLint both touch your code, but they have different jobs. Prettier formats. ESLint checks for bugs. Some ESLint rules, however, also enforce formatting, and those rules will conflict with Prettier's decisions.

The solution is eslint-config-prettier. It turns off every ESLint rule that overlaps with Prettier's formatting domain:

bash

npm install --save-dev eslint-config-prettier

Then add it as the last entry in your ESLint config's extends array. It must come last so it overrides any formatting rules from earlier configs:

typescript

import js from "@eslint/js";
import tseslint from "typescript-eslint";
import prettier from "eslint-config-prettier";
 
export default tseslint.config({
  files: ["**/*.{ts,js}"],
  extends: [
    js.configs.recommended,
    tseslint.configs.recommended,
    prettier,
  ],
});

Now ESLint and Prettier will never disagree. ESLint catches the bugs. Prettier handles the formatting. The extends array order matters: prettier must be last so its rule overrides take priority.

Editor Integration

The best Prettier experience is format-on-save in your editor. In VS Code, install the Prettier extension and add this to your settings:

json

{
  "editor.formatOnSave": true,
  "editor.defaultFormatter": "esbenp.prettier-vscode"
}

With format-on-save enabled, you write code however you want, and Prettier cleans it up every time you save. You never think about indentation or line breaks again.

Run Prettier in CI

Like ESLint, Prettier is most effective when it blocks unformatted code from merging. Add a format check to your CI pipeline:

bash

npx prettier . --check

The --check flag reports which files are not formatted without modifying them. If any file is unformatted, the command exits with a non-zero code and the CI build fails.

Add convenience scripts to your package.json so you can format with a single npm command:

json

{
  "scripts": {
    "format": "prettier . --write",
    "format:check": "prettier . --check"
  }
}

Now npm run format formats the entire project, and npm run format:check verifies formatting in CI without modifying files.

How Prettier Handles TypeScript

Prettier has built-in support for TypeScript. It understands type annotations, generics, as expressions, the satisfies keyword, and every TypeScript syntax node. You do not need a plugin.

Here is a typical TypeScript function before Prettier formats it. Notice the cramped spacing, missing type annotation gaps, and the long chained call all on one line:

typescript

function fetchUser(id:number):Promise<User|null>{
return fetch(`/api/users/${id}`).then(res=>res.json()).catch(err=>{console.error(err);return null})
}

After running Prettier, the same function receives consistent spacing around type annotations, proper line breaks for the chain, and clean indentation in the catch block:

typescript

function fetchUser(id: number): Promise<User | null> {
  return fetch(`/api/users/${id}`)
    .then((res) => res.json())
    .catch((err) => {
      console.error(err);
      return null;
    });
}

Prettier added consistent spacing around the type annotation, wrapped the long chain across lines, and formatted the catch block with proper indentation. The logic is identical. Only the presentation changed.