[英]Prettier react/jsx-max-props-per-line format with VSCode
我在带有 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 规则,但也没有结果。 没变。
任何人都可以帮助我吗?
从 Prettier 2.6.0
开始,如果将以下内容添加到配置中,则可以在 HTML 或 JSX 中强制每行使用一个属性:
"singleAttributePerLine": true
我能够让它与以下一起工作:
// .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"
/>
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,
首先,您应该只将 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,即使标签最初不是多行。
问题是"react/jsx-max-props-per-line"
不是一个有效的漂亮规则,它是 ESLint 的规则。 我建议将此规则保留在 ESLint 配置文件中,但也要设置您的编辑器以在保存时进行所有可能的 ESLint 修复。
您可以按照本教程打开保存时的 linting。 或者只是把这些:
"editor.codeActionsOnSave": {
"source.fixAll.eslint": true
},
"eslint.validate": ["javascript"]
您的用户或本地工作区settings.json对象中的行。 这将解决您的问题。
根据我的经验,Prettier 和 ESLint 自动格式化可以很好地协同工作。
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.