Setup Prettier to reformat code (javascript) Cypress in IntelliJ/Visual Studio Code

Updated: Sep 9, 2021

What is Prettier?

Prettier is an opinionated code formatter with support for JavaScript, CSS, Less, and SCSS,HTML,JSON...

Why Prettier?

It is generally accepted that having a common style guide is valuable for a project and team

How to use Prettier

Step 1. Configuration file

Create .prettierrc file with options

Refer https://dev.to/akinghill/start-using-prettier-the-right-way-59kg to understand the meaning of options

IntelliJ

Step 2: Setting to reformat code automatically when file is changes or Ctrl_Alt+L in IntelliJ

===================================

Visual Studio Code

Step 2. Setting to reformat code automatically when file is changes

To go to Settings.json

add format in settings.json

{
  "editor.defaultFormatter": "esbenp.prettier-vscode",
  "[javascript]": {
    "editor.defaultFormatter": "esbenp.prettier-vscode"
},
"cucumberautocomplete.steps": [
  "cypress/integration/features/**/*steps.js",
  "node_modules/qa-lib/src/step_definitions/*.js"
],
"cucumberautocomplete.strictGherkinCompletion": true,
"cucumberautocomplete.onTypeFormat": true,
"[feature]": {
  "editor.defaultFormatter": "alexkrechik.cucumberautocomplete"
},
"editor.formatOnSave": true
}

For more detail: Please refer to https://marketplace.visualstudio.com/items?itemName=esbenp.prettier-vscode

Now, when you change some things and save, format will be correct or Shift+Alt+F