使用 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" }]添加到 my.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"
  }
}

My.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字符printWidth: 80格式化代碼。

<InputField name="password" placeholder="password" label="Password" type="password" />
  
// transforms to this if line exceeds 'printWidth'

<InputField
  name="username"
  placeholder="username"
  label="Username"
  type="text" 
/>

Answer 3

module.exports = {
    'extends': [
        'eslint:recommended',

    ],
    'env': {
        'es6': true
    },
    'plugins': ['react'],
    'parser': 'babel-eslint',
    'rules': {

        // you rules....

        'react/jsx-first-prop-new-line': [1, 'multiline'],
        'react/jsx-max-props-per-line': [1,
            {
                'maximum': 1
            }
        ]
    },
};

yarn add --dev prettier-eslint-cli

VS 代碼用戶配置

"prettier.eslintIntegration": true,

Answer 4

首先，您應該只將 ESLint 規則用於您的 ESLint 配置，而不是您的.prettierrc文件。它們將被忽略，因為它們不是有效的 Prettier 配置。 此外，ESLint 不會影響 Prettier 行為。 您可以通過ESLint運行更漂亮（通過自動可以解決的規則eslint-plugin-prettier ）或運行漂亮，之后運行ESLint，用prettier-eslint ）的VSCode用途，如果你有prettier.eslintIntegration打開。

現在您可能需要更改 ESLint 規則以使用{"when": "always"}選項。 根據docs ，如果您的組件已經是多行的，則使用"multiline"只會抱怨，但每行有超過 1 個道具：

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

使用"always"永遠不會允許每行超過 1 個 prop，即使標簽最初不是多行。

Answer 5

問題是"react/jsx-max-props-per-line"不是一個有效的漂亮規則，它是 ESLint 的規則。 我建議將此規則保留在 ESLint 配置文件中，但也要設置您的編輯器以在保存時進行所有可能的 ESLint 修復。

您可以按照本教程打開保存時的 linting。 或者只是把這些：

  "editor.codeActionsOnSave": {
      "source.fixAll.eslint": true
  },
  "eslint.validate": ["javascript"]

您的用戶或本地工作區settings.json對象中的行。 這將解決您的問題。

根據我的經驗，Prettier 和 ESLint 自動格式化可以很好地協同工作。

Answer 6

如果您只想在 Vscode 中使用 Prettier 更改道具的行，那么有一個選項可以做到這一點。

在 settings.json 中添加以下行

"prettier.printWidth": 100,

之前：

之后：