How to set up Prettier in a new project?

Install Prettier via npm or yarn, create a .prettierrc configuration file to define options like line length, and integrate it into your editor or CI/CD pipeline using the CLI or API documentation.

Can I change Prettier's formatting rules?

Prettier offers limited configuration options such as print width and quote style, but for fine-grained control over rules like brace placement, you may need to use it with ESLint or accept its defaults.

Prettier or ESLint for formatting JavaScript?

Use Prettier for automatic code formatting (e.g., indentation, line breaks) and ESLint for code quality rules (e.g., error detection). They complement each other, with Prettier handling style consistency.

How to format code on save in VS Code?

Install the Prettier VS Code extension, enable 'Format on Save' in settings, and ensure Prettier is the default formatter for supported files to automate formatting seamlessly.

Does Prettier work with TypeScript and React?

Yes, Prettier natively supports TypeScript and JSX (used in React) without additional plugins, formatting syntax correctly as part of its multi-language capabilities.

How to ignore files with Prettier?

Create a .prettierignore file to exclude specific files or directories, or use // prettier-ignore comments above code blocks to prevent formatting, as shown in the README example.

Open-Awesome

prettier

MITJavaScript3.8.3

An opinionated code formatter that enforces consistent style across JavaScript, TypeScript, CSS, HTML, and many other languages.

Visit Website GitHub

51.8k stars4.7k forks0 contributors

What is prettier?

Prettier is an opinionated code formatter that automatically formats code to enforce a consistent style across multiple programming languages. It parses code and reprints it with predefined rules, solving the problem of inconsistent formatting and style debates in development teams.

Target Audience

Developers and teams working with JavaScript, TypeScript, CSS, HTML, and other supported languages who want to automate code formatting and maintain a uniform codebase.

Value Proposition

Developers choose Prettier for its strict, opinionated approach that eliminates configuration fatigue and ensures consistent styling automatically, integrated seamlessly into editors and CI workflows.

Overview

Prettier is an opinionated code formatter.

Use Cases

Best For

Enforcing consistent code style across large teams
Automating formatting in pre-commit hooks or CI pipelines
Formatting multi-language projects (e.g., JavaScript, CSS, HTML)
Eliminating manual code review comments on formatting
Integrating on-save formatting in code editors
Maintaining readability with automatic line wrapping

Not Ideal For

Projects requiring highly customized formatting rules (e.g., specific brace styles or indentation patterns not in Prettier's options)
Codebases where exact whitespace or comment placement is critical for documentation or tooling integration
Teams using niche or experimental languages with unstable or unsupported Prettier plugins

Pros & Cons

Pros

Broad Language Support

Formats JavaScript, TypeScript, CSS, HTML, and many more via plugins, as highlighted in the multi-language banner and features, reducing the need for multiple formatters.

Seamless Editor Integration

Runs on-save in popular editors, streamlining development by automatically formatting code without manual intervention, as mentioned in the intro for workflow efficiency.

Automated Consistency Enforcement

Integrates with pre-commit hooks and CI to enforce formatting, ensuring a uniform codebase and eliminating style debates in code reviews, per the documentation.

Intelligent Line Wrapping

Intelligently wraps code based on configured line lengths, improving readability as demonstrated in the input/output example with long function calls.

Cons

Limited Configuration Flexibility

Prettier's opinionated philosophy means few options to customize formatting rules, which can clash with existing team or project-specific style guides.

Potential Performance Overhead

Formatting large files or codebases can be slower, impacting developer workflow in resource-constrained environments, despite claims of being 'blazing fast'.

Plugin Reliability Risks

Support for some languages relies on community-maintained plugins that may be less stable or receive irregular updates, introducing dependency issues.

Frequently Asked Questions

Related Projects

husky

Git hooks made easy 🐶 woof!

Stars34,979

Forks1,082

Last commit1 month ago

Standard

🌟 JavaScript Style Guide, with linter & automatic code fixer

Stars29,439

Forks2,316

Last commit9 months ago

ESLint

Find and fix problems in your JavaScript code.

Stars27,207

Forks4,971

Last commit2 days ago

JSHint

JSHint is a tool that helps to detect errors and potential problems in your JavaScript code

Stars9,072

Forks1,624

Last commit1 year ago

Community-curated · Updated weekly · 100% open source

Found a gem we're missing?

Open-Awesome is built by the community, for the community. Submit a project, suggest an awesome list, or help improve the catalog on GitHub.

Submit a project Star on GitHub