Prettier Code Formatter

Prettier is an opinionated code formatter that enforces a consistent code style across your entire codebase. It works by parsing your code into an Abstract Syntax Tree (AST) and then reprinting it from scratch based on its own rules and the configured maximum line length. This process removes original styling and ensures code conforms to a consistent format, automatically wrapping lines when they exceed the allowed length.

Supported languages include:

• JavaScript (including experimental features) and JSX
• TypeScript and Flow
• Angular, Vue, and Lightning Web Components (LWC)
• CSS, Less, and SCSS
• HTML
• Ember/Handlebars
• JSON
• GraphQL
• Markdown (including GFM and MDX v1)
• YAML
• MJML

Prettier 2.1 includes several CSS improvements:

• Does not break code when a comment is placed at the end of an at-rule.
• Improved handling of unquoted url() content to prevent unexpected modifications.
• Correctly handles whitespace after escaped colons in CSS grid line names.
• Supports the @supports selector(<custom-selector>) syntax.
• Improved handling of arbitrary arguments (e.g., in functions like rgba()).

Prettier 2.1 fixes issues in Less:

• The :extend pseudo-class is now correctly recognized as a selector rather than a value.
• Fixed a bug where inline comments containing /* would break the formatting of subsequent code.

Prettier is an automatic code formatter designed to eliminate debates over coding styles and reduce the mental overhead of manual formatting. Key benefits include:

• Automated Style Enforcement: Replaces manual style guides with a fully automatic process, ending discussions over 'nits' (minor stylistic details).
• Reduced Cognitive Load: Allows developers to focus on logic rather than syntax and formatting (e.g., line breaks, spacing, or indentation).
• Onboarding Support: Helps newcomers and developers from different language backgrounds quickly adapt to the project's specific coding style.
• Codebase Uniformity: Enables quick cleanup of inconsistent, legacy codebases to make them uniform and readable.
• Low Friction Integration: Designed for easy adoption via pre-commit scripts, editor extensions (format on save), and fast execution speeds.

Prettier 2.1 improves SCSS formatting:

• Prevents extra indentation on lines following comments within SCSS maps.
• Correctly handles inline comments placed between a property and its value.
• Ensures comments at the end of a file are preserved even if the final semicolon is omitted.

Prettier supports inlining do expressions within JSX containers to reduce unnecessary indentation. It also prevents adding softlines after arrow attributes with comments and avoids wrapping JSX elements as attributes in parentheses () to prevent syntax errors.

// Inlined do expressions
{
  do { /* ... */ }
}

// No unnecessary parens around JSX attributes
<Foo
  content=<div />
/>

Prettier 2.1 supports the Stage-2 proposal for Private Fields in in.

#prop in obj;

Prettier 2.0+ supports whitespace control characters (like {~ and ~}) in Handlebars, ensuring that the intended whitespace behavior of the template is preserved during formatting.

{{~#if bar}}
  if1
{{~else~}}
  else
{{~/if~}}

To prevent large git diffs and conflicts when changing the length of type annotations, Prettier has stabilized the function body offset for arrow functions. The indentation of the function body is no longer directly affected by the length of the type declaration in the same way as previous versions.

// Prettier 2.5 output for long type annotations
const MyComponentWithLongName: React.VoidFunctionComponent<
  MyComponentWithLongNameProps
> = ({ x, y }) => {
  const a = useA();
  return <div>{x + y + a}</div>;
};