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

Posted

技术标签:

【中文标题】使用 VSCode 更漂亮的 react/jsx-max-props-per-line 格式【英文标题】:Prettier react/jsx-max-props-per-line format with VSCode 【发布时间】:2018-10-03 13:39:24 【问题描述】:

我在带有 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 规则,但也没有结果。没有变化。

谁能帮帮我?

【问题讨论】:

【参考方案1】:

我能够让它与以下内容一起工作:

// .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 个字符时格式化代码。

<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" 
/>

【讨论】:

【参考方案2】:
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,

【讨论】:

prettier.eslintIntegration 显示为灰色,因为它是未知的配置设置 您需要先为 VSCode 安装 Prettier 扩展。 VSCode 不包括开箱即用的 Prettier。【参考方案3】:

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

现在您可能需要更改 ESLint 规则以使用 "when": "always" 选项。根据docs,使用"multiline" 只会在您的组件已经是多行的情况下抱怨,但每行有多个道具:

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

使用"always" 将永远不会允许每行超过 1 个道具,即使标签最初不是多行也是如此。

【讨论】:

嗨 Lucas,我​​尝试过 always(在 .prettierrc 文件上),但结果相同:没有变化 嗨@s-leg3ndz 我已经编辑了我的答案以澄清 ESLint 规则存在于 ESlint 配置而不是 .prettierrc 上 我想我明白了。我已经编辑了我的第一篇文章,在添加eslint-plugin-prettier 之后使用了配置。但是,我的组件是在 1 行中形成的新时间:/ 在更新后的帖子中,react/jsx-max-props-per-line 仍然在 .prettierrc 上,而不是在 ESLint 配置中。 它也不起作用。有些事情我必须做错了..我会研究这两个文档,看看有什么问题,谢谢你的帮助!【参考方案4】:

问题是"react/jsx-max-props-per-line" 不是一个有效的更漂亮的规则,它是 ESLint 的规则。我建议将此规则保留在 ESLint 配置文件中,但还要设置您的编辑器以在保存时进行所有可能的 ESLint 修复。

您可以通过关注tutorial 来开启 linting on save。或者只是把这些:

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

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

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

【讨论】:

【参考方案5】:

如果您只想在 Vscode 中使用 Prettier 更改保存道具的行,那么可以选择这样做。

在 settings.json 中添加以下行

"prettier.printWidth": 100,

之前:

之后:

【讨论】:

以上是关于使用 VSCode 更漂亮的 react/jsx-max-props-per-line 格式的主要内容,如果未能解决你的问题,请参考以下文章

更漂亮的 vscode 扩展忽略配置文件

vscode 更漂亮的设置

VSCode 更漂亮的 printWidth

不应该的 VSCode 格式(更漂亮,javascript)

如何在 vscode 中禁用更漂亮的错误突出显示

如何在 vscode 上为 css 模块设置更漂亮