reactjs - Prettier přeformátuje if/else do jednoho řádku

Zkouším Prettier v projektu používajícím React a Typescript. Mám však problém s konfigurací vícelinkových if/else příkazů.

Když píšu:

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

Prettier to přeformátuje na:

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

Přidal jsem toto pravidlo do mého souboru tslint: "one-line": false, ale Prettier stále formátuje mé příkazy.

Je to základní pravidlo Prettieru, které nelze změnit prostřednictvím konfigurace tslint, nebo dělám něco špatně?

Můj tslint.json je:

{
  "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"
  ]
}

a můj soubor .prettierrc je:

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

Odpověď č. 1

Existuje na to pěkný způsob:

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

když Prettier uvidí mezi řádky komentář, nerozdělí blok do jednoho řádku.

Odpověď č. 2

Při kombinování Prettier s linterem v projektu:

• Prettier se postará o všechna pravidla formátování
• Pravidla kvality kódu budou řešena pomocí linteru (například tslint).

Změna konfigurace tslint pro formátování nebude mít vliv na výstup prettier.
Viz Prettier vs Linters.

Ve skutečnosti, pokud si nedáte pozor na to, jak nakonfigurujete tslint, můžete skončit s protichůdnými pravidly. Právě proto existují balíčky jako tslint-config-prettier.

Prettier má velmi málo možností konfigurace, protože je to formátovač s vlastními pravidly, jak je vysvětleno v jejich filozofii možností.