Prettier reformats if / else into single line

Question

I am trying Prettier out in a project using React and Typescript. However I am having a problem configuring multi-line if / else statements.

When I write:

if (x >=0) {
  // Do something
}
else {
  // Do something else
}

Prettier reformats it to:

if (x >=0) {
  // Do something
} else {
  // Do something else
}

I added this rule to my tslint file: "one-line": false, but Prettier is still formatting my statements.

Is this a core rule of Prettier that can't be changed through the tslint config or am I doing something wrong?

My tslint.json is:

{
  "extends": [
    "tslint:recommended",
    "tslint-react",
    "tslint-config-prettier"
  ],
  "rules": {
    "prettier": true,
    "interface-name": false,
    "no-console": [
      true,
      "log",
      "debug",
      "info",
      "time",
      "timeEnd",
      "trace"
    ],
    "one-line": false
  },
  "rulesDirectory": [
    "tslint-plugin-prettier"
  ]
}

and my .prettierrc file is:

{
  "trailingComma": "es5",
  "printWidth": 80,
  "semi": true,
  "tslintIntegration": true,
  "eslintIntegration": true,
  "jsxSingleQuote": true,
  "singleQuote": true
}

Answer 1

When combining Prettier with a linter in a project:

• Prettier will handle all formatting rules
• Code-quality rules will be handled by the linter (such as tslint)

Changing the config of tslint for formatting will not affect the output of prettier.
See Prettier vs Linters.

In fact, if you're not careful of how you configure tslint you can end up with conflicting rules. Which is why packages like tslint-config-prettier exist.

Prettier has very few configuration options as it is an oppinionated formatter as explained in their Option Philosophy.

Answer 2

There is a nice way around this:

// your comment 1
if (case1) {
 ...
}
// your comment 2
else if (case2) {
 ...
}
// your comment 3
else {
 ...
}

when prettier sees comment lines in between, it won't clip the block into one line.