Prettier: Code formatter [JavaScript]


I would like to introduce how to install Prettier which is code formatter and a configuration to co-exist with ESLint

👽 What is Prettier

Prettier is a code formatter with support for:

  • JavaScript(ES2017), JSX, Flow, TypeScript, JSON
  • CSS, Less, SCSS
  • GraphQL
  • Markdown(GitHub Flavored Markdown)

It ensures that all output code confirms to a consistent style.

Some merits for using Prettier are as follows:

  • Building and enforcing a style guide
  • Easy to adopt
  • Clean up an existing codebase

😼 install

Install with yarn:

yarn add prettier eslint-config-prettier eslint-plugin-prettier pretty-quick husky --dev

🎳 Configuration

.eslintrc

Modify ESLint configuration:

{
  "env": {
    "node": true
  },
  "parserOptions": {
    "ecmaVersion": 7,
    "sourceType": "module"
  },
  "plugins": ["prettier"],
  "extends": ["plugin:prettier/recommended"],
  "parser": "babel-eslint",
  "globals": {
    "describe": false,
    "it": false,
    "before": false,
    "beforeEach": false,
    "after": false,
    "afterEach": false,
    "done": false
  },
  "rules": {
    "strict": "off",
    "padded-blocks": "off",
    "comma-dangle": "off",
    "no-param-reassign": "off",
    "arrow-body-style": ["error", "as-needed"],
    "no-underscore-dangle": "off",
    "no-else-return": "off",
    "no-unused-vars": "error",
    "dot-notation": "off",
    "prettier/prettier": "error"
  }
}

package.json

Add the following commands to the package.json to format all files before commit:

{
  "scripts": {
    "eslint": "eslint src test",
    "eslint-check":
      "eslint --print-config .eslintrc.js | eslint-config-prettier-check",
    "prettier": "prettier --write \"{,!(node_modules)/**/}*.js\"",
    "precommit": "pretty-quick --staged"
  }
}

.prettierrc

Add a .prettierrc for formatting overrides like this

{
  "trailingComma": "all",
  "semi": false,
  "singleQuote": true
}

🍄 Command

Check conflict rule between Prettier & Eslint

yarn run eslint-check

Run Prettier formatter

yarn run prettier

😎 Special Thanks

🖥 Recommended VPS Service

VULTR provides high performance cloud compute environment for you. Vultr has 15 data-centers strategically placed around the globe, you can use a VPS with 512 MB memory for just $ 2.5 / month ($ 0.004 / hour). In addition, Vultr is up to 4 times faster than the competition, so please check it => Check Benchmark Results!!