Arnold Rimmer
Arnold Rimmer

Reputation: 3111

How to get prettier to add braces when missing on if/else

I've googled for a while and not found how to do this. I have eslint and prettier setup in my project.

// What I have:
if (a == b) doSomething();

// What I want from either eslint or prettier
if (a == b) {
  doSomething();
}

Can any one show me how to get this done? Or show me their config that does this?

Upvotes: 24

Views: 8359

Answers (2)

jbmilgrom
jbmilgrom

Reputation: 23291

To make this change programmatically and comprehensively throughout your code base, assuming your package.json looks something like this

{
  ...
  "scripts": { 
    ...
    "format": "prettier --write .",
    "lint": "eslint .",
  }
}

do this:

  1. update your .eslintrc.js just like the accepted answer suggests
{
    "rules": {
        "curly": "error",
    }
}
  1. npm run lint -- --fix
  2. npm run format

Upvotes: 1

Yedhin
Yedhin

Reputation: 3189

tl;dr : create a .eslintrc.json for your project and a rule for curly.

{
    "rules": {
        "curly": "error",
    }
}

Prettier only prints code. It does not transform it. This is to limit the scope of Prettier. Let's focus on the printing and do it really well!

Here are a few examples of things that are out of scope for Prettier:

  • Adding/removing {} and return where they are optional.
  • Turning ?: into if-else statements.
  • Sorting/moving imports, object keys, class members, JSX keys, CSS properties or anything else. Apart from being a transform rather than just printing (as mentioned above), sorting is potentially unsafe because of side effects (for imports, as an example) and makes it difficult to verify the most important correctness goal.
  • Turning single- or double-quoted strings into template literals or vice versa.

so to get what you want, you should use eslint. eslint has a --fix option and a rule for all, which would provide exactly what you want.

eslint for vscode.

configuration of eslint.

Hope this helps.

Upvotes: 18

Related Questions