[kitkitkline-co-uk]

Hi there,

How do I configure what warnings I don’t need to see in my react native project. Specifically I would like to turn off the warning for inline styles being used in JSX.

Any help or suggestions much appreciated

Cheers

Kit

[Brian Fernandes]

Kit,

Can you give us an example of the errors being reported so we can be sure where they’re coming from? A screenshot, or the text from a couple of messages (exactly as they appear) would help track them down.

Thanks!

[kitkitkline-co-uk]

Hi Brian – sure – the one I really want to turn off is the yellow validation shown when an Inline style is used. Here is the code that would trigger such a warning in JSX:

<View style={{marginBottom: 20}} />

Screen shot also attached

Cheers

Kit

[kitkitkline-co-uk]

screenshot as JPEG

Attachments:

You must be logged in to view attached files.

[Brian Fernandes]

Kit,

Thank you for the screenshot. I tried the same code here in a JSX file but could not actually see the same warning – it’s also odd that the warning doesn’t really mention what the problem really is.

1) Does the Markers or Problems view have more details on the warning?
2) ESLint has a rule for inline styles. Do you have eslint active for the project with the eslint-react plugin? You could look into the react-native/no-inline-styles rule and see if that’s enabled. Or you could simply disable ESLint as a test.
3) Have you installed any extensions yourself? Can you go to Help > CodeMix Extensions and disable the CSS / React extensions to see if any of them cause the error to disappear – if we find the extension contributing that, we could dig deeper.

[kitkitkline-co-uk]

HI there – thanks for looking into this….I found that by turning off anything that looks like it might be relevant and validating the project the warnings went..so repeating one at a time I found it came from ‘ESLint’ – any way to get finer control over what that extension flags or is it kind of all or nothing? I don’t want to turn it off because lots of the other vals are useful.

Any ideas appreciated

Kit

[kitkitkline-co-uk]

HI there – thanks for looking into this….I found that by turning off anything that looks like it might be relevant and validating the project the warnings went..so repeating one at a time I found it came from ‘ESLint’ – any way to get finer control over what that extension flags or is it kind of all or nothing? I don’t want to turn it off because lots of the other vals are useful.

Any ideas appreciated

Kit

Attachments:

You must be logged in to view attached files.

[Brian Fernandes]

Kit,

Glad you figured out where it was coming from – looks like it was it was the ESLint rule I mentioned earlier. You definitely can get finer control over validations coming from ESLInt. You can create a ESLint configuration file in your project, and specify the setting you want for the rule over there.

You can create a file named .eslintrc.json or look for other files named .eslintrc.* in case your project already has an ESLint configuration. You would need to set the react-native/no-inline-styles rule to false, something like this would be what you would add to a new configuration file to turn the validation off.

{
  "rules" : {
  "react-native/no-inline-styles": 0;
  }
}

For more details, please see https://eslint.org/docs/user-guide/configuring#configuring-rules which includes some examples too.

• This reply was modified 4 years, 9 months ago by Brian Fernandes.

[kitkitkline-co-uk]

Awesome – that works perfectly! Thanks so much for taking the time to help me…much appreciated 🙂

Cheers

Kit

[Author]

Posts