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

IT技术 reactjs typescript visual-studio-code tslint prettier
2021-05-04 10:53:49

我正在使用 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
}
1个回答

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

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

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

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

Prettier 有很少的配置选项,因为它是一个 oppinionated 格式化程序,如他们的Option Philosophy 中所述