Javascript 更漂亮的react/jsx每行最大道具数格式，带VSCode

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

我希望：

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

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规则，但也没有结果。没有变化

---

有人能帮我吗？

首先，您应该只将ESLint规则添加到您的ESLint配置中，而不是您的

.prettierrc

文件中。。它们将被忽略，因为它们不是有效的漂亮配置。此外，ESLint不会影响更漂亮的行为。如果启用了

Prettier.eslintpintegration

，则可以通过ESLint运行Prettier（作为自动修复规则，通过），或者在VSCode使用后运行Prettier并运行ESLint

现在您可能需要更改ESLint规则以使用

{“when”：“always”}

选项。根据，使用

“multiline”

只会在组件已经是多行的情况下进行投诉，但您每行有1个以上的道具：

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

使用“始终”将永远不允许每行超过1个道具，即使标记最初不是多行的

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
            }
        ]
    },
};

纱线添加--dev prettier eslint cli

VS代码用户配置

---

“prettier.eslintIntegration”：没错，

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

// .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
}

以及我的开发依赖项，这些依赖项基本上来自

如果行超过

打印宽度：80个

字符，则仅格式化代码

//如果行超过“printWidth”，则转换为此

问题是，

“react/jsx max props per line”

不是一个有效的更漂亮的规则，而是一个ESLint规则。我建议将此规则保留在ESLint配置文件中，但还要将编辑器设置为在保存时进行所有可能的ESLint修复

通过以下操作，可以在保存时启用“linting”。或者干脆说：

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

用户或本地工作区settings.json对象中的行。这会解决你的问题

---

根据我的经验，Prettier和ESLint自动格式化可以很好地协同工作。

嗨，Lucas，我尝试了

总是
（在.prettierrc文件上），但结果是一样的：没有变化Hi@s-leg3ndz我编辑了我的答案，以澄清ESLint规则在ESLint配置上而不是在。prettierrcI认为我理解。我已经编辑了我的第一篇文章，在add
eslint plugin prettier
之后使用config。但是，我的组件是一个新的时间格式，在更新后的帖子中，
react/jsx max props per line
仍然在
.prettierrc
上，而不是在ESLint配置上。它也不起作用。有件事我一定做错了。。我会研究这两个文件，看看有什么问题，谢谢你的帮助！prettier.eslintIntegration显示为灰色，因为它是一个未知的配置设置。您需要首先为VSCode安装prettier扩展。VSCode不包括现成的漂亮代码。
"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"
},

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