更漂亮地将 if / else 重新格式化为单行

Question

我正在一个使用 React 和 Typescript 的项目中尝试 Prettier。但是，我在配置多行 if / 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 仍在格式化我的语句。

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

我的 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 有很少的配置选项，因为它是一个有争议的格式化程序，如其选项哲学中所述。

Answer 3

有时使用

prettier

是

switch (true)

：

switch (true) {
  case CONDITION_1:
    ...
    break

  case CONDITION_2:
    ...
    break
}