我在带有 React 的 JavaScript 项目中使用 Prettier。我所有的组件 Prop 都在 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 规则,但也没有结果。没有变化。
谁能帮帮我?
最佳答案
我能够让它与以下项目一起工作:
// .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"
/>
关于javascript - 使用 VSCode 的更漂亮的 react/jsx-max-props-per-line 格式,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/49982266/