04-prettier.md

Prettier

yarn add --dev prettier

Prettier Config

NB: Prettier recommends the printWidth of 80. tl;dr Use what works for yourself or your team :)

cat << EOF > .prettierrc
{
  "printWidth": 120
}
EOF

Add some scripts in package.json:

{
  // ---
  "scripts": {
    //---
    "prettier:check": "prettier --check '**/*.ts'",
    "prettier:fix": "prettier --write '**/*.ts'",
  },
  // ---
}

Example:

const test = "Hello World";;

ESLint will complain, but Prettier can fix it.

yarn add --dev eslint-config-prettier

eslint-config-prettier - disable the eslint rules that will conflict or are unnecessary with Prettier.

{
// ---
"extends": [
  "eslint:recommended",
  "plugin:@typescript-eslint/recommended",
  "plugin:@typescript-eslint/recommended-requiring-type-checking",
  "prettier" // Add this config at the end of the extends
],
// ---
}

Recommended

Setting up your editor to auto-format, this is just a recommedation and is optional. From experience I've found it to be quite useful!

https://prettier.io/docs/en/editors.html