更漂亮的重新格式化 if / else 到单行

Question

我正在使用 React 和 Typescript 的项目中尝试 Prettier。但是我在配置多行 i​​f / else 语句时遇到问题。

当我写：

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

Prettier 将其重新格式化为：

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

我将此规则添加到我的 tslint 文件中："one-line": false，但Prettier仍在格式化我的语句。

这是不能通过 tslint 配置更改的 Prettier 的核心规则还是我做错了什么？

我的 tslint.json 是：

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

我的 .prettierrc 文件是：

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

Answer 1

有一个很好的方法可以解决这个问题：

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

当 prettier 看到中间的注释行时，它不会将该块剪辑成一行。

Answer 2

在项目中将 Prettier 与 linter 结合使用时：

• Prettier 将处理所有格式规则
• 代码质量规则将由 linter（例如 tslint）处理

更改 tslint 的格式化配置不会影响 prettier 的输出。
请参阅Prettier 与 Linters。

事实上，如果您不小心配置 tslint，您最终可能会遇到冲突的规则。这就是像tslint-config-prettier这样的包存在的原因。

Prettier 的配置选项很少，因为它是一个有争议的格式化程序，如其Option Philosophy中所述。