@agathongroup/prettier-config

Agathon's Prettier Config

Usage no npm install needed!

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

README

Agathon's prettier configuration

Installation

1. Install dependencies:

yarn add --dev @agathongroup/prettier-config prettier

2. Create a prettier.config.js file at the root of your project and add the following:

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

Editor Integration

VS Code

  1. Install Prettier extension: View → Extensions then search and install Prettier - Code formatter
  2. You may need to reload the editor
  3. In your user settings Code -> Preferences -> Settings add editor.formatOnSave: true

Sublime Text

https://packagecontrol.io/packages/JsPrettier

Enforced Rules

Check out all of Prettier's configuration options.

  • Print Width - Wrap lines at 100 characters.

  • Tab Width - 2 spaces per indentation-level.

  • Tabs - Indent lines with spaces, not tabs.

  • Semicolons - Always print semicolons at the ends of statements.

  • Quote - Use single quotes instead of double quotes. JSX ignores this rule.

  • Trailing Commas - Use trailing commas wherever possible. Example:

    const obj = {
      a: 'hi',
      b: 'hey',
    };
    
  • Bracket Spacing - Print spaces between brackets in object literals.

  • JSX Brackets - Put the closing > 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). Example:

    <button
    className="prettier-class"
    id="prettier-id"
    onClick={this.handleClick}>
      Click Here
    </button>
    
  • Arrow Function Parentheses - No parentheses around a sole arrow function parameter. Example:

    x => x;