magic numbers inside stylesheet

[enapupe]

Hello, I was wondering how to properly setup this plugin in order I stop getting warnings like 9:15 warning No magic number: 20 no-magic-numbers within styles block such as:

const styles = StyleSheet.create({
  container: {
    flex: 1
    , justifyContent: 'center'
    , alignItems: 'center'
    , backgroundColor: '#F5FCFF'
  }
  , welcome: {
    fontSize: 20
    , textAlign: 'center'
    , margin: 10
  }
  , instructions: {
    textAlign: 'center'
    , color: '#333333'
    , marginBottom: 5
  }
})

This plugin offers any solution to this matter?

[Intellicode]

The warnings are caused by a rule that is not part of this plugin, you can disable that particular rule for each stylesheet block with inline eslint-disable comments or you can disable this rule in your .eslintrc.

If a rule like this would be defined in this plugin it could perform similar checks except in white listed scenario's such as certain style rules.

[enapupe]

So you are saying the only options are adding comments OR disabling the magic number verification completely? I don't have much knowledge of eslint env..

[enapupe]

The issue is, using no-magic-numbers is painful with react-native stylesheets. Do you think this plugin could address this issue?

[tomauty]

It might be fruitful to create a no-magic-numbers in this repo, like intellicode said.

[enapupe]

I don't know very much about eslint stuff and hierarchy.. @tomauty do you see any way to accomplish this kind of validation? Could you point me some directions? Ty!

[aarongreenwald]

@enapupe it takes a bit of practice to get the hang of writing lint rules, but you can piggy-back on someone else's work by trying to modify an existing rule. The first thing is to see where the no-magic-numbers rule comes from and see if you can see a place in the code you can modify it to ignore StyleSheet rules. You can also look in this repo to see how @Intellicode determines a node is part of a StyleSheet.

Essentially you'll need a special version of the no-magic-numbers rule that makes the exceptions you want, and use that instead of the original.

[enapupe]

@aarongreenwald thank you very much for such explanation. So I'd probably develop a small plugin which extends no-magic-numbers.. I like the approach, thanks for sharing !

[Intellicode]

@enapupe Actually, if you don't mind sharing it I'm up for including it in the plugin.

[enapupe]

I wouldn't mind sharing, but right now I already have too much new software to study, so, I'm not gonna do this anytime soon..