使用 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 格式的主要内容,如果未能解决你的问题,请参考以下文章