Awesome

@bokub/prettier-config

<h2> <p align="center"> My personal <a href="https://prettier.io">Prettier</a> config & workflow </p> <p align="center"> <a href="https://github.com/prettier/prettier"><img src="https://flat.badgen.net/badge/code%20style/prettier/ff69b4" alt="Code style"></a> <a href="https://www.npmjs.com/package/@bokub/prettier-config"><img src="https://flat.badgen.net/npm/dt/@bokub/prettier-config" alt="Downloads"></a> <a href="https://www.npmjs.com/package/@bokub/prettier-config"><img src="https://runkit.io/bokub/npm-version/branches/master/@bokub/prettier-config?style=flat" alt="Version"></a> </p> </h2>

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"