typescript eslint:如何将React道具放入换行符中

Question

我正在尝试添加一个linting规则，该规则将长React属性值分解为新行。下面的例子显示了属性paragraph是超长的，我不知道如何将其整理成新的行。

<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