My personal Prettier config & workflow

Base setup

Install required packages:

# With npm
npm i -D prettier @bokub/prettier-config

# With yarn
yarn add -D prettier @bokub/prettier-config

Add the config to your package.json:

npm pkg set prettier="@bokub/prettier-config"

Optional: Setup pre-commit hook with husky & lint-staged

Install husky & lint-staged:

# With npm
npm i -D husky lint-staged

# With yarn
yarn add -D husky lint-staged

Setup git hook:

npx husky init
echo "npx lint-staged --concurrent false" > .husky/pre-commit
npm pkg set "lint-staged.*"="prettier --write --ignore-unknown"

Optional: Run prettier on existing code

npx prettier --write .

Optional: Setup with ESLint

# With npm
npm i -D eslint-config-prettier eslint-plugin-prettier eslint

# With yarn
yarn add -D eslint-config-prettier eslint-plugin-prettier eslint

Then, edit your ESLint configuration file:

{
  "plugins": ["prettier"],
  "extends": ["<some-config>", "plugin:prettier/recommended"], // Add to the end of the array
  "rules": {
    "prettier/prettier": "warn", // Optionally, you can set the error level to warn
  },
}

If you have a lint-staged configuration, add an ESLint task :

npm pkg set "lint-staged[*.{js,ts,vue}]"="eslint --fix"