typescript-eslint：如何将 React 道具 lint 到换行符

Question

我正在尝试添加一个 linting 规则，将长React属性值分解为新行。 下面的示例显示属性paragraph超长，我不知道如何对其进行 lint 以使其换行。

<Card
  header="General Contractors, Engineering Procurement Providers, Prime Contractors"
  id="gen-contractor"
  paragraph={`Construction companies that build pipelines. While these companies may provide many services "in-house", they often sub-contract work that requires special equipment or
know-how`}
  onCardToggle={(isChecked) => console.log('isChecked', isChecked)}
/>

这是我的.eslintrc.json ：

{
  "extends": ["airbnb-typescript"],
  "env": {
    "jest": true
  },
  "parser": "@typescript-eslint/parser",
  "parserOptions": {
    "project": "tsconfig.json",
    "sourceType": "module"
  },
  "plugins": ["@typescript-eslint/eslint-plugin"],
  "rules": {
    "@typescript-eslint/indent": "off",
    "react/jsx-one-expression-per-line": 0,
    "react/prop-types": 0,
    "react/require-default-props": "off",
    "react/destructuring-assignment": 0,
    "react/static-property-placement": 0,
    "jsx-a11y/alt-text": 0,
    "react/jsx-props-no-spreading": 0,
    "import/prefer-default-export": 0,
    "@typescript-eslint/explicit-function-return-type": "off",
    "@typescript-eslint/explicit-module-boundary-types": "off",
    "import/no-extraneous-dependencies": ["error", { "devDependencies": true }],
    "object-curly-newline": "off",
    "operator-linebreak": [
      "error",
      "before",
      { "overrides": { "=": "after" } }
    ],
    "implicit-arrow-linebreak": 0,
    "no-confusing-arrow": 0
  },
  "ignorePatterns": ["node_modules/", ".next/", ".eslintrc.json"]
}

这是我的.prettierrc ：

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

以下是我的devDependencies中所有与 linting 相关的依赖项：

"devDependencies": {
    "@babel/core": "^7.13.14",
    "@typescript-eslint/eslint-plugin": "^4.21.0",
    "@typescript-eslint/parser": "^4.21.0",
    "@wojtekmaj/enzyme-adapter-react-17": "^0.6.1",
    "autoprefixer": "^10.2.5",
    "babel-loader": "^8.2.2",
    "babel-plugin-module-resolver": "^4.1.0",
    "eslint": "^7.23.0",
    "eslint-config-airbnb-typescript": "^12.3.1",
    "eslint-import-resolver-alias": "^1.1.2",
    "eslint-plugin-import": "^2.22.1",
    "eslint-plugin-jsx-a11y": "^6.4.1",
    "eslint-plugin-react": "^7.23.1",
    "eslint-plugin-react-hooks": "^4.2.0",
    "prettier": "^2.2.1",
  }

Answer 1

诸如“如何使 Prettier 以这样的方式格式化我的代码......？”之类的问题的通用答案。 是“你不能”。

Prettier 的目的是通过照顾代码风格来促进项目和团队中的协作，而不是成为一个可定制的代码格式化程序，可以做任何用户想要的事情。 换句话说，它产生的格式并不是真正可定制的，这是故意的。 在此处阅读更多信息： https://prettier.io/docs/en/option-philosophy.html