VSCode更漂亮的react / jsx-max-props-per-line格式 [英] Prettier react/jsx-max-props-per-line format with VSCode
问题描述
我在带有React的JavaScript项目中使用Prettier。我所有的组件道具都以1行格式设置:
I use Prettier in JavaScript project with React. All my component props is formated in 1 line :
< 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,但没有结果。
I've add "react/jsx-max-props-per-line": [1, { "when": "multiline" }]
to my .prettierrc, but no result.
我已经也是ESLint配置,使用以下规则:
I've an ESLint config too, with this rules :
{
"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文件配置:
My .prettier file config :
"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规则,但也没有结果。没有变化。
Maybe a conflict ? I've try to move the react/jsx-max-props-per-line
to ESLint rules, but no result too. No change.
任何人都可以帮助我吗?
Anyone can help me ?
推荐答案
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代码userConfig
VS code userConfig
prettier.eslintIntegration:true,
这篇关于VSCode更漂亮的react / jsx-max-props-per-line格式的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!