I create a React Native project the version is 0.62.2
I change eslintrc.js
as below
module.exports = {
parser:'babel-eslint',
env: {
browser: true,
es6: true,
},
extends: '@react-native-community',
globals: {
Atomics: 'readonly',
SharedArrayBuffer: 'readonly',
},
parserOptions: {
ecmaFeatures: {
jsx: true,
},
ecmaVersion: 2018,
sourceType: 'module',
},
plugins: [
'react',
],
rules: {
... my other rules
"react-native/no-inline-styles": 1,
"prettier/prettier": ["error", {
"no-inline-styles": false
}],
},
};
I hope my style code like this {{ flex: 1, marginTop: 5 }}
not {{flex:1,marginTop:5}}
But my warrning shows info:
(property) FlexStyle.marginTop?: React.ReactText
Inline style: { flex: 1, marginTop: 5 }eslint(react-native/no-inline-styles)
Replace `·flex:1,·marginTop:5·` with `flex:·1,·marginTop:·5`eslintprettier/prettier
I have no idea how to set inline styles space and how to fix the prettier problem.
It looks like your configuration is missing prettier in the plugins' array. Make sure to correctly use eslint to run prettier by reading prettier's documentation.
Prettier has a rule for object literals spacing called bracket spacing, but note that it is set to true by default.