VSCode更漂亮的react / jsx-max-props-per-line格式

Question

我在带有React的JavaScript项目中使用Prettier。我所有的组件道具都格式化为1行：

<Icon icon="arrow-left" width={15} height={18} />

我想这样：

<Icon
  icon="arrow-left"
  width={15}
  height={18}
/>

我已经添加"react/jsx-max-props-per-line": [1, { "when": "multiline" }]到我的.prettierrc，但是没有结果。

我也有一个ESLint配置，使用以下规则：

{
  "extends": [
    "eslint:recommended",
    "plugin:react/recommended",
    "plugin:prettier/recommended"
  ],
  "plugins": ["react", "prettier", "standard"],
  "rules": {
    "indent": [2, 2, { "SwitchCase": 1 }],
    "quotes": [2, "single"],
    "linebreak-style": [2, "unix"],
    "semi": [2, "always"],
    "no-console": [0],
    "no-loop-func": [0],
    "new-cap": [0],
    "no-trailing-spaces": [0],
    "no-param-reassign": [0],
    "func-names": [0],
    "comma-dangle": [0],
    "no-unused-expressions": [0],
    "block-scoped-var": [0],
    "react/prop-types": [0],
    "prettier/prettier": "error"
  }
}

我的.prettier文件配置：

  "bracketSpacing": true,
  "jsxBracketSameLine": true,
  "printWidth": 80,
  "singleQuote": true,
  "trailingComma": "all",
  "tabWidth": 2,
  "useTabs": false,
  "react/jsx-max-props-per-line": [1, { "when": "always" }]

也许有冲突？我尝试将react/jsx-max-props-per-line规则移至ESLint，但也没有结果。没变。

有人可以帮助我吗？

Answer 1

由于 Prettier，如果将以下内容添加到配置中，2.6.0您可以在 HTML 或 JSX 中强制执行每行单一属性：

"singleAttributePerLine": true

Answer 2

我能够让它与以下一起工作：

// .eslintrc.js
module.exports = {
  extends: [
    'react-app',
    'prettier',
    'plugin:prettier/recommended',
  ],
  plugins: ['prettier'],
  rules: {
    'react/jsx-first-prop-new-line': [2, 'multiline'],
    'react/jsx-max-props-per-line': [
      2,
      { maximum: 1, when: 'multiline' },
    ],
    'react/jsx-indent-props': [2, 2],
    'react/jsx-closing-bracket-location': [
      2,
      'tag-aligned',
    ],
  },
}

// .prettierrc
{
 "semi": false,
 "singleQuote": true,
 "printWidth":80 // default
}

连同我的开发依赖项，它基本上来自eslint-config-react-app

"devDependencies": {
"@types/node": "^14.6.0",
"@types/react": "^16.9.46",
"@types/react-dom": "^16.9.8",
"@typescript-eslint/eslint-plugin": "^4.0.0",
"@typescript-eslint/parser": "^4.0.0",
"babel-eslint": "^10.0.0",
"eslint": "^7.5.0",
"eslint-config-prettier": "^7.2.0",
"eslint-config-react-app": "^6.0.0",
"eslint-plugin-flowtype": "^5.2.0",
"eslint-plugin-import": "^2.22.0",
"eslint-plugin-jest": "^24.0.0",
"eslint-plugin-jsx-a11y": "^6.3.1",
"eslint-plugin-prettier": "^3.3.1",
"eslint-plugin-react": "^7.20.3",
"eslint-plugin-react-hooks": "^4.0.8",
"eslint-plugin-testing-library": "^3.9.0",
"jest": "^26.6.3",
"prettier": "^2.2.1",
"typescript": "4.0.5"
},

仅当行超过printWidth: 80字符时才格式化代码。

// .eslintrc.js
module.exports = {
  extends: [
    'react-app',
    'prettier',
    'plugin:prettier/recommended',
  ],
  plugins: ['prettier'],
  rules: {
    'react/jsx-first-prop-new-line': [2, 'multiline'],
    'react/jsx-max-props-per-line': [
      2,
      { maximum: 1, when: 'multiline' },
    ],
    'react/jsx-indent-props': [2, 2],
    'react/jsx-closing-bracket-location': [
      2,
      'tag-aligned',
    ],
  },
}

// .prettierrc
{
 "semi": false,
 "singleQuote": true,
 "printWidth":80 // default
}

Answer 3

首先，您应该只将 ESLint 规则应用于您的 ESLint 配置，而不是您的.prettierrc文件。它们将被忽略，因为它们不是有效的 Prettier 配置。此外，ESLint 不会影响 Prettier 行为。您可以通过 ESLint 运行 Prettier（作为通过 的自动修复规则eslint-plugin-prettier），或者运行 Prettier 并在之后运行 ESLint，如果您已打开，prettier-eslint则使用 VSCode 使用的 ） 。prettier.eslintIntegration

现在您可能需要更改 ESLint 规则以使用{"when": "always"}选项。根据docs，"multiline"如果您的组件已经是多行的，但每行有超过 1 个 prop，则 using 只会抱怨：

<Icon 
  icon="arrow-left"
  widht={15} height={18}
/>

使用"always"永远不会允许每行超过 1 个 prop，即使标签最初不是多行的。