javascript - 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-lineESLint ルールに移行しようとしましたが、結果もありません。変化なし。

誰でも私を助けることができますか？

Answer 1

まず、ファイルではなく、ESLint 構成にのみ ESLint ルールを適用する必要があり.prettierrcます。それらは有効な Prettier 構成ではないため、無視されます。また、ESLint は Prettier の動作には影響しません。ESLint を介して Prettier を実行するか ( を介して自動修正可能なルールとしてeslint-plugin-prettier)、Prettier を実行してから ESLint を実行することができprettier-eslintますprettier.eslintIntegration。

ここで、オプションを使用するように ESLint ルールを変更する必要がある可能性があり{"when": "always"}ます。docsによると、使用"multiline"すると、コンポーネントがすでに複数行である場合にのみ問題が発生しますが、行ごとに複数の小道具があります。

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

を使用"always"すると、タグが元々複数行ではない場合でも、行ごとに複数の props が許可されることはありません。

Answer 2

Vscode で Prettier を使用して保存時に props の行のみを変更する場合は、それを行うオプションがあります。

settings.json に次の行を追加します

"prettier.printWidth": 100,

前：

後：