Joona Viertola

Learning journal

My prettier configuration

Writing down the way how I configure projects with Prettier. This is starting to be so much repeating that it needs a own post.

Install packages

You need next packages in this cofiguration:

npm i --save-dev prettier eslint eslint-plugin-prettier husky pretty-quick

or

yarn add -D prettier eslint eslint-plugin-prettier husky pretty-quick

Configure prettier

Add configuration file named .prettierrc to root of project. Add content:

{
  "singleQuote": true
}

Add script to package.json:

{
  "scripts": {
    "format": "prettier --write  \"src/**/*.{js,jsx,json,scss}\""
  }
}

Set ESLint to give warnings

Add configuration file named .eslintrc.json to root of project with next content:

{
  "plugins": ["prettier"],
  "rules": {
    "prettier/prettier": "error"
  },
  "env": {
    "es6": true
  },
  "parserOptions": {
    "ecmaVersion": 2018,
    "sourceType": "module",
    "ecmaFeatures": {
      "jsx": true
    }
  }
}

After this editor needs to be configured to use ESLint. This works differently in every editor, so I'm not documenting this here.

Trigger Prettier at pre-commit

Add next section into package.json.

"husky": {
    "hooks": {
      "pre-commit": "pretty-quick --staged"
    }
}