19h47's base prettier configuration

Usage no npm install needed!

<script type="module">
  import 19h47PrettierConfig from 'https://cdn.skypack.dev/@19h47/prettier-config';



19h47's prettier configuration based on Upstatement's config.



yarn add --dev @19h47/prettier-config prettier


Create a prettier.config.js file at the root of your project that contains:

module.exports = require('@19h47/prettier-config');

Editor Integration

Visual Studio Code

  1. Install Prettier extension: View → Extensions then find and install Prettier - Code formatter
  2. Reload the editor
  3. In your user settings Code -> Preferences -> Settings add editor.formatOnSave: true

Enforced Rules

Check out all of Prettier's configuration options.

  • Print Width

    Line wrap at 100 characters.

  • Tab Width

    4 tabs per indentation-level.

  • Tabs

    Indent lines with tabs, not spaces.

  • Semicolons

    Always print semicolons at the ends of statements.

    const greeting = 'hi';
  • Quote

    Use single quotes instead of double quotes.

    const quote = 'single quotes are better';
  • Trailing Commas

    Use trailing commas wherever possible.

    const obj = {
        a: 'hi',
        b: 'hey',
  • Bracket Spacing

    Print spaces between brackets in object literals.

        foo: bar;
  • JSX Brackets

    Put the > of a multi-line JSX element at the end of the last line instead of being alone on the next line (does not apply to self closing elements).

    <button className="prettier-class" id="prettier-id" onClick={this.handleClick}>
        Click Here
  • Arrow Function Parentheses

    Omit parens when possible.

    x => x;