Prettier is (as it says on their website) am opiniated code formatter.

To begin with I’m going to extend the code from the last post ESLint with airbnb rules. Carry out the following steps

• yarn add prettier -D
• yarn add eslint-config-prettier -D

  This line will disable rules that conflict with Prettier

• yarn add eslint-plugin-prettier -D>
• Open .eslintc.js and update/add the following value to each key

  plugins: ['prettier']
  
  extends: [
     'prettier',
     'plugin:prettier/recommended'
  ]
  
  rules:  {
     'prettier/prettier': 'error'
  }
  

• Run yarn lint which we added in the ESLint with airbnb rules post.

The first thing you might notice, as I did, that the ESLint rules required a single quote for strings whereas Prettier requires double quotes, obviously this is not too good if you started running this tool against existing projects, so we want a way to disable such rules in Prettier.

Create a file named .prettierrc.js and place the following code in it

module.exports = {
    singleQuote: true
};

See Prettier configuration for more info.