Notwithstanding Previous Misdemeanors
    Have ideas to improve npm?Join in the discussion! »

    @upstatement/prettier-config

    1.0.0 • Public • Published

    Upstatement Prettier Config

    npm version

    Pairs well with our ESLint config.

    Table of Contents

    Installation

    1. Make sure your project is using a Node version >= 10

    2. Install dependencies

      npm install --save-dev @upstatement/prettier-config prettier@2.x.x
      
      # or
      
      yarn add --dev @upstatement/prettier-config prettier@2.x.x
    3. Create a prettier.config.js file at the root of your project with the following:

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

    Configurations

    We export two ESLint configurations for your usage:

    1. Default (2 space)
    2. Four Spaces

    Default Config

    In your prettier.config.js:

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

    Four Spaces Config

    Includes everything in the default config, but replaces the tabWidth rule with 4 spaces instead of 2 spaces.

    In your prettier.config.js:

    module.exports = require('@upstatement/prettier-config/four-spaces');

    Editor Integration & Autoformatting

    VS Code

    1. Install the Prettier extension: View → Extensions then find and install Prettier - Code formatter

    2. Reload the editor

    3. Open your settings JSON file and add the following

      // Format on save with Prettier rules
      "editor.formatOnSave": true,
      // Tell the ESLint plugin to run on save
      "editor.codeActionsOnSave": {
        "source.fixAll.eslint": true
      },
      // Turn off Prettier format on save, use ESLint to format instead
      "[javascript]": {
        "editor.formatOnSave": false
      },
      "[vue]": {
        "editor.formatOnSave": false
      },
      "eslint.alwaysShowStatus": true,
      // An array of language identifiers specify the files to be validated
      "eslint.options": {
        "extensions": [".html", ".js", ".vue", ".jsx"]
      },

    Sublime Text 3

    https://packagecontrol.io/packages/JsPrettier

    Atom

    https://atom.io/packages/prettier-atom

    Pre-commit Hooks

    As another line of defense, if you want Prettier to automatically fix your errors on commit, you can use lint-staged with husky.

    1. Make sure your npm version is >= 7.0.0

      npm install -g npm@latest
    2. Make sure your repo has been initialized with git

      git init --initial-branch=main
    3. Install the npm packages

      npm install --save-dev lint-staged husky
    4. Set up the package.json stuff

      npm set-script prepare "husky install" && npm run prepare \
        && npm set-script lint-staged "lint-staged" \
        && npx husky add .husky/pre-commit "npm run lint-staged"
    5. Then in your package.json add

       "lint-staged": {
         "*.{js,css,json,md}": [
           "prettier --write",
           "git add"
         ]
       }

      If you already have lint-staged running ESLint, just add the prettier step on top of it:

      "lint-staged": {
        "*.{js,css,json,md}": [
          "prettier --write",
          "git add"
        ],
        "*.js": [
          "eslint --fix",
          "git add"
        ]
      }

    Publishing to npm

    Read npm's docs on How to Update a Package.

    1. Checkout and pull the main branch

    2. Run the release script to bump the version numbers (the script will create a commit and push up the release branch to GitHub for you)

      ./scripts/release

      Use semantic versioning to choose the appropriate version number.

    3. Submit and merge a PR from the release branch into main

    4. Make sure you're logged into npm from the command line using npm whoami. If you're not logged in, npm login with the credentials in 1pass

    5. npm publish

    Enforced Rules

    Check out all of Prettier's configuration options.

    Print Width

    Line wrap at 100 characters.

    Tab Width

    2 spaces per indentation-level (or 4 spaces if you choose).

    Tabs

    Indent lines with spaces, not tabs.

    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
    </button>
    Arrow Function Parentheses

    Omit parens when possible.

    x => x;

    Install

    npm i @upstatement/prettier-config

    DownloadsWeekly Downloads

    758

    Version

    1.0.0

    License

    ISC

    Unpacked Size

    8.88 kB

    Total Files

    7

    Last publish

    Collaborators

    • avatar
    • avatar
    • avatar