javascript - 如何使用单个 Prop 修复括号中的 prettier 和 tslint 错误？

Question

我使用 prettier 和 tslint，以及 https://github.com/alexjoverm/tslint-config-prettier和 https://github.com/ikatyang/tslint-plugin-prettier .

我的 tslint.json 就像

{
  "defaultSeverity": "error",
  "extends": [
    "tslint-config-airbnb",
    "tslint-react",
    "tslint-config-prettier"
  ],
  "jsRules": {},
  "rules": {
    "max-line-length": [true, 80],
    "import-name": false,
    "variable-name": false,
    "jsx-boolean-value": false,
    "jsx-no-multiline-js": false,
    "no-else-after-return": false,
    "object-shorthand-properties-first": false,
    "ter-arrow-parens": false,
    "ter-indent": false,
    "prettier": true
  },
  "rulesDirectory": ["tslint-plugin-prettier"]
}

我的 .prettierrc 就像

{
  "trailingComma": "all",
  "singleQuote": true
}

tslint --fix "src/**/*.ts"后出现如下代码:

import { getChildrenProceduresSelector } from '@src/entities/procedures/selectors';

并且错误显示 [tslint] Exceeds maximum line length of 80 (max-line-length) 。

但是当我手动修复它时

import {
  getChildrenProceduresSelector,
} from '@src/entities/procedures/selectors';

它说

[tslint] Replace `⏎··getChildrenProceduresSelector,⏎` with `·getChildrenProceduresSelector·` (prettier)

我将 VSCode 与 tslint 和 prettier 扩展一起使用。 我的 tslint 命令说同样的错误。 如何解决此冲突？

Answer 1

您的配置错误来自 "max-line-length": [true, 80]。它与更漂亮的规则相冲突。如果你想设置 max-line，你应该在 .prettierc 文件中设置 -> "printWidth": 80。

tslint-config-prettier - 此配置禁用 tslint 中与 prettier 冲突的所有规则(因此在您的情况下，此插件禁用了 中的 max-line tslint，但随后您在 rules 部分手动设置它)

tslint-plugin-prettier - 这个插件运行更漂亮的规则作为 tslint 规则。此外，您需要在 tslint.json 的 rule 部分启用此功能。

考虑到所有这些因素，您的配置应该大致如下所示:

// With tslint@5.0.0+
{
  "extends": [
    "tslint-config-airbnb",
    "tslint-config-prettier",
    "tslint-plugin-prettier"
  ],
  "rules": {
    "prettier": true
  }
}

// With tslint@5.2.0+
{
  "extends": [
    "tslint-config-airbnb",
    "tslint-config-prettier",
    "tslint-plugin-prettier"
  ],
  "rules": {
    "prettier": true
  },
  "rulesDirectory": [
    "tslint-plugin-prettier"
  ]
}