eslint-plugin-react-native

eslint-plugin-react-native copied to clipboard

Undefined StyleSheet not showing as error

[{"_id":"6307c1dfd193cd27d435c400","body":"Thanks for reporting this request. Currently, this is not covered by any existing lint rules by the plugin. A new one would be an option. If it is something you encounter often, can you make a PR that covers this case?","issue_id":1659804518618,"origin_id":321685299,"user_origin_id":6794,"create_time":1502402450,"update_time":1502402450,"id":1661452767880,"updated_at":"2022-08-25T18:39:27.880000Z","created_at":"2022-08-25T18:39:27.880000Z"},{"_id":"6307c1dfd193cd27d435c401","body":"No, i just randomly found that. If i will have enough time i'll try","issue_id":1659804518618,"origin_id":321782211,"user_origin_id":18731681,"create_time":1502448488,"update_time":1502448488,"id":1661452767883,"updated_at":"2022-08-25T18:39:27.883000Z","created_at":"2022-08-25T18:39:27.883000Z"},{"_id":"6307c1dfd193cd27d435c403","body":"@xahon, could it be that you have \"browser\": true in your eslint env property? Cause I believe browsers have a global \"StyleSheet\" variable","issue_id":1659804518618,"origin_id":327371953,"user_origin_id":9091916,"create_time":1504672495,"update_time":1504672495,"id":1661452767886,"updated_at":"2022-08-25T18:39:27.886000Z","created_at":"2022-08-25T18:39:27.886000Z"},{"_id":"6307c1dfd193cd27d435c404","body":"@agarcia17 yes, browser is set to true","issue_id":1659804518618,"origin_id":327372189,"user_origin_id":18731681,"create_time":1504672597,"update_time":1504672605,"id":1661452767888,"updated_at":"2022-08-25T18:39:27.888000Z","created_at":"2022-08-25T18:39:27.888000Z"},{"_id":"6307c1dfd193cd27d435c405","body":"@xahon, try setting it to false and restart VS Code and see if the issue still persist","issue_id":1659804518618,"origin_id":327373115,"user_origin_id":9091916,"create_time":1504673082,"update_time":1504673082,"id":1661452767890,"updated_at":"2022-08-25T18:39:27.889000Z","created_at":"2022-08-25T18:39:27.889000Z"},{"_id":"6307c1dfd193cd27d435c406","body":"@agarcia17 I'm not using vs code, but vim. I'll check it later","issue_id":1659804518618,"origin_id":327373248,"user_origin_id":18731681,"create_time":1504673153,"update_time":1504673153,"id":1661452767891,"updated_at":"2022-08-25T18:39:27.891000Z","created_at":"2022-08-25T18:39:27.891000Z"}]

If you use `StyleSheet.create({})` without `StyleSheet` import it causes no error

xahon

Does not work with react native web

[{"_id":"6307c1e0d193cd27d435c407","body":"Thanks for reporting this, at the moment I do not personally develop React Native Web based applications, but I'm happy to accept PR's.","issue_id":1659804518622,"origin_id":321684809,"user_origin_id":6794,"create_time":1502402316,"update_time":1502402316,"id":1661452768186,"updated_at":"2022-08-25T18:39:28.185000Z","created_at":"2022-08-25T18:39:28.185000Z"}]

This does not detect unused styles in react native web. https://github.com/necolas/react-native-web

austinamorusotraceme

no-unused-styles shows error when style object property names are quoted

[]

no-unused-styles reports unused style detected when the style object property names are quoted ``` const styles = StyleSheet.create({ 'container': { alignItems: 'center', backgroundColor: Color.white, flex: 1, justifyContent: 'center' } });...

cameronsuen

Detect not imported element

[{"_id":"6307c1e0d193cd27d435c408","body":"Hi, could you post an example of this? I personally have not had any issues related to this.","issue_id":1659804518628,"origin_id":306320614,"user_origin_id":6794,"create_time":1496699391,"update_time":1496699391,"id":1661452768492,"updated_at":"2022-08-25T18:39:28.491000Z","created_at":"2022-08-25T18:39:28.491000Z"},{"_id":"6307c1e0d193cd27d435c409","body":"Hi,\r\n\r\nI am sorry, it took me ages... Bad news I had to change computer, good news I fully reinstalled my set up and so I can provide you with genuine information.\r\n\r\nEslint doesn't detect not imported native element (such as Text). I tested with atom linter and in command line, on Mac and on Debian.\r\n\r\nI deleted Text from the imports and add an unused test variable in my code.\r\n\r\n\r\n\r\nEslint detects the unused variable but not the missing Text element.\r\n\r\n\r\n\r\nHere is my eslintrc... pretty sure, it can help\r\n\r\n`{\r\n \"env\": {\r\n \"browser\": true,\r\n \"es6\": true,\r\n \"node\": true\r\n },\r\n \"extends\": \"eslint:recommended\",\r\n \"parser\": \"babel-eslint\",\r\n \"parserOptions\": {\r\n \"ecmaFeatures\": {\r\n \"experimentalObjectRestSpread\": true,\r\n \"jsx\": true\r\n },\r\n \"sourceType\": \"module\"\r\n },\r\n \"plugins\": [\r\n \"react\",\r\n \"react-native\"\r\n ],\r\n \"rules\": {\r\n \"no-unused-vars\": [\"error\", { \"varsIgnorePattern\": \"React\" }],\r\n \"react\/jsx-uses-vars\" : \"error\",\r\n \"indent\": [\r\n \"error\",\r\n 2\r\n ],\r\n \"linebreak-style\": [\r\n \"error\",\r\n \"unix\"\r\n ],\r\n \"quotes\": [\r\n \"error\",\r\n \"single\"\r\n ],\r\n \"semi\": [\r\n \"error\",\r\n \"always\"\r\n ]\r\n }\r\n}\r\n`\r\n\r\nThanks","issue_id":1659804518628,"origin_id":309137750,"user_origin_id":12398583,"create_time":1497648300,"update_time":1497648342,"id":1661452768494,"updated_at":"2022-08-25T18:39:28.494000Z","created_at":"2022-08-25T18:39:28.494000Z"}]

I often loose my mind looking for vicious a bug whereas I only forgot to import one of the native elements I am using... The no-undef classic rule is not...

Baptiste-Garcin

Update eslint-plugin-react to version 7.0.1 🚀

[{"_id":"6307c219955786231403a0f2","body":"\n[](https:\/\/coveralls.io\/builds\/11508823)\n\nCoverage remained the same at 71.783% when pulling **6a5f2d653ee9b964b4aac6d3aa11f366d4b72d08 on greenkeeper-eslint-plugin-react-7.0.1** into **b6fd6be3c8633ca822e0ea2dd5bfaa0535bdc84d on master**.\n","issue_id":1659804518632,"origin_id":301266927,"user_origin_id":2354108,"create_time":1494700965,"update_time":1494700965,"id":1661452825295,"updated_at":"2022-08-25T18:40:25.295000Z","created_at":"2022-08-25T18:40:25.295000Z"}]

| 🚨🔥⚠️ _Action required_: Switch to the new [Greenkeeper](https://git.io/uptodate) now! 🚨🔥⚠️ | | --- | | This version of Greenkeper will be __shutdown on May 31st.__ | | With [Integrations](https://developer.github.com/early-access/integrations/)...

greenkeeperio-bot

no-unused-styles doesn't support conditional styles

[{"_id":"6307c219955786231403a0f3","body":"Thanks for reporting, feel free to open a PR or wait until I have time to look into it :)","issue_id":1659804518635,"origin_id":280128298,"user_origin_id":6794,"create_time":1487190320,"update_time":1487190320,"id":1661452825600,"updated_at":"2022-08-25T18:40:25.600000Z","created_at":"2022-08-25T18:40:25.600000Z"}]

I often add conditional styles to my components and `no-unused-styles` doesn't see that the style is actually used in the code. ```javascript const styles = StyleSheet.create({ container: { padding: 1,...

robcalcroft

Add globals

[{"_id":"6307c219955786231403a0f4","body":"These vars are actually working, but this .eslintrc file is only used to lint the eslint-react-native plugin, it is not shipped or used to provide support for these browser out of the box for users of the eslint-react-native-plugin. But thanks for the pull request like always :)","issue_id":1659804518639,"origin_id":266196455,"user_origin_id":6794,"create_time":1481364385,"update_time":1481364385,"id":1661452825925,"updated_at":"2022-08-25T18:40:25.925000Z","created_at":"2022-08-25T18:40:25.925000Z"},{"_id":"6307c219955786231403a0f5","body":"Oh well, I assumed this configuration was extended. How should this configuration be defined so that projects that include this plugin use that configuration?","issue_id":1659804518639,"origin_id":266200659,"user_origin_id":351038,"create_time":1481368264,"update_time":1481368276,"id":1661452825928,"updated_at":"2022-08-25T18:40:25.927000Z","created_at":"2022-08-25T18:40:25.927000Z"},{"_id":"6307c219955786231403a0f6","body":"I probably can Google it, but it's saturday..","issue_id":1659804518639,"origin_id":266200684,"user_origin_id":351038,"create_time":1481368308,"update_time":1481368308,"id":1661452825930,"updated_at":"2022-08-25T18:40:25.929000Z","created_at":"2022-08-25T18:40:25.929000Z"},{"_id":"6307c219955786231403a0f7","body":"I still have to research that as well, but like you said, its Saturday :)","issue_id":1659804518639,"origin_id":266213172,"user_origin_id":6794,"create_time":1481380732,"update_time":1481380732,"id":1661452825931,"updated_at":"2022-08-25T18:40:25.931000Z","created_at":"2022-08-25T18:40:25.931000Z"}]

Copy/Paste from https://github.com/facebook/react-native/blob/master/.eslintrc#L19-L52

koenpunt

magic numbers inside stylesheet

[{"_id":"6307c21a955786231403a0f8","body":"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. \n\nIf 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.\n","issue_id":1659804518643,"origin_id":229169621,"user_origin_id":6794,"create_time":1467145054,"update_time":1467145054,"id":1661452826279,"updated_at":"2022-08-25T18:40:26.279000Z","created_at":"2022-08-25T18:40:26.279000Z"},{"_id":"6307c21a955786231403a0f9","body":"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..\n","issue_id":1659804518643,"origin_id":229172858,"user_origin_id":291082,"create_time":1467145753,"update_time":1467232622,"id":1661452826282,"updated_at":"2022-08-25T18:40:26.281000Z","created_at":"2022-08-25T18:40:26.281000Z"},{"_id":"6307c21a955786231403a0fa","body":"The issue is, using no-magic-numbers is painful with react-native stylesheets.\nDo you think this plugin could address this issue?\n","issue_id":1659804518643,"origin_id":229480453,"user_origin_id":291082,"create_time":1467232596,"update_time":1467232596,"id":1661452826284,"updated_at":"2022-08-25T18:40:26.284000Z","created_at":"2022-08-25T18:40:26.284000Z"},{"_id":"6307c21a955786231403a0fb","body":"It might be fruitful to create a `no-magic-numbers` in this repo, like intellicode said.\n","issue_id":1659804518643,"origin_id":229493359,"user_origin_id":1112872,"create_time":1467235429,"update_time":1467235429,"id":1661452826286,"updated_at":"2022-08-25T18:40:26.285000Z","created_at":"2022-08-25T18:40:26.285000Z"},{"_id":"6307c21a955786231403a0fc","body":"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!\n","issue_id":1659804518643,"origin_id":229498926,"user_origin_id":291082,"create_time":1467236761,"update_time":1467236761,"id":1661452826288,"updated_at":"2022-08-25T18:40:26.288000Z","created_at":"2022-08-25T18:40:26.288000Z"},{"_id":"6307c21a955786231403a0fd","body":"@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. \n\nEssentially 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.\n","issue_id":1659804518643,"origin_id":229635672,"user_origin_id":6300588,"create_time":1467287193,"update_time":1467287193,"id":1661452826290,"updated_at":"2022-08-25T18:40:26.289000Z","created_at":"2022-08-25T18:40:26.289000Z"},{"_id":"6307c21a955786231403a0fe","body":"@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 !\n","issue_id":1659804518643,"origin_id":229666718,"user_origin_id":291082,"create_time":1467295201,"update_time":1467295201,"id":1661452826292,"updated_at":"2022-08-25T18:40:26.291000Z","created_at":"2022-08-25T18:40:26.291000Z"},{"_id":"6307c21a955786231403a0ff","body":"@enapupe Actually, if you don't mind sharing it I'm up for including it in the plugin.\n","issue_id":1659804518643,"origin_id":229775446,"user_origin_id":6794,"create_time":1467317777,"update_time":1467317777,"id":1661452826294,"updated_at":"2022-08-25T18:40:26.293000Z","created_at":"2022-08-25T18:40:26.293000Z"},{"_id":"6307c21a955786231403a100","body":"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..\n","issue_id":1659804518643,"origin_id":229785497,"user_origin_id":291082,"create_time":1467319986,"update_time":1467319986,"id":1661452826296,"updated_at":"2022-08-25T18:40:26.295000Z","created_at":"2022-08-25T18:40:26.295000Z"}]

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: ```...

enapupe

Show warning when using an undefined style

[]

``` const styles = StyleSheet.create({}); const Hello = React.createClass({ render: function() { return Hello {this.props.name}; } }); ``` Should throw a warning regarding `styles.name`

Intellicode

no-unused-styles: false positive with variable based style object selection

[{"_id":"6633d3be6c5179bc2e0fd929","body":"I guess you have bad styles architecture. \r\n\r\nWhat is the purpose of creating two different styles?\r\n```\r\nconst variants = {\r\n white: StyleSheet.create({\r\n container: {\r\n backgroundColor: 'white',\r\n },\r\n }),\r\n primary: StyleSheet.create({\r\n container: {\r\n backgroundColor: colors.primary,\r\n },\r\n }),\r\n};\r\n```\r\nIt would be better when it would be inside main styles declaration.\r\nOr if you really want dynamic creation it can be like this:\r\n```\r\n const viewStyle = [\r\n styles.container,\r\n {\r\n backgroundColor: variant === 'white' ? 'white' : colors.primary\r\n },\r\n ...logonScreen ? [styles.center] : [],\r\n ];\r\n```","issue_id":1663562666124,"origin_id":1252298283,"user_origin_id":17779660,"create_time":1663677696,"update_time":1663677696,"id":1714672574903,"updated_at":"2024-05-02T17:56:14.903000Z","created_at":"2024-05-02T17:56:14.903000Z"},{"_id":"6633d3be6c5179bc2e0fd92a","body":"I'm having the same issue. Variant styles are accessed using bracket notation, but the linter doesn't understand it.\r\n\r\n> I guess you have bad styles architecture.\r\n\r\nThat's not a very helpful comment. What's bad about it?","issue_id":1663562666124,"origin_id":1883037182,"user_origin_id":1490370,"create_time":1704805924,"update_time":1704805924,"id":1714672574910,"updated_at":"2024-05-02T17:56:14.910000Z","created_at":"2024-05-02T17:56:14.910000Z"},{"_id":"6633d3be6c5179bc2e0fd92b","body":"> I'm having the same issue. Variant styles are accessed using bracket notation, but the linter doesn't understand it.\n> \n> \n> \n> > I guess you have bad styles architecture.\n> \n> \n> \n> That's not a very helpful comment. What's bad about it?\n\nBut I described in my comment that having multiple Styles.createStylesheet is not very convenient.\n\nWhat is the point having multiple styles objects not within main style object?","issue_id":1663562666124,"origin_id":1883080218,"user_origin_id":17779660,"create_time":1704808119,"update_time":1704808222,"id":1714672574919,"updated_at":"2024-05-02T17:56:14.918000Z","created_at":"2024-05-02T17:56:14.918000Z"},{"_id":"6633d3be6c5179bc2e0fd92c","body":"> > I'm having the same issue. Variant styles are accessed using bracket notation, but the linter doesn't understand it.\r\n> > > I guess you have bad styles architecture.\r\n> > \r\n> > \r\n> > That's not a very helpful comment. What's bad about it?\r\n> \r\n> But I described in my comment that having multiple Styles.createStylesheet is not very convenient.\r\n\r\nNot really. You said:\r\n\r\n> It would be better when it would be inside main styles declaration.\r\n\r\nBut what's \"better\" about it? Having an object with multiple properties, where each key is the name and each value is a style makes sense IMO when you have a lot of style changes from variant to variant. It makes it very easy to see the differences between each variant.\r\n\r\nLet's say we have 5 variants and each variant has 3 style properties (i.e. backgroundColor, borderWidth etc). Using your suggestion that would quickly become unmanageable. Ternary operators will be super messy, and it would require at least 5 lines in the array of styles rather than just 1 line when using bracket notation. ","issue_id":1663562666124,"origin_id":1883088379,"user_origin_id":1490370,"create_time":1704808473,"update_time":1704808473,"id":1714672574921,"updated_at":"2024-05-02T17:56:14.921000Z","created_at":"2024-05-02T17:56:14.921000Z"},{"_id":"6633d3be6c5179bc2e0fd92d","body":"Yeah that is your option. Could you please provide short example and I will edit it how I see it. Just to see smth","issue_id":1663562666124,"origin_id":1883127614,"user_origin_id":17779660,"create_time":1704809764,"update_time":1704809764,"id":1714672574924,"updated_at":"2024-05-02T17:56:14.923000Z","created_at":"2024-05-02T17:56:14.923000Z"},{"_id":"6633d3be6c5179bc2e0fd92e","body":"> Yeah that is your option. Could you please provide short example and I will edit it how I see it. Just to see smth\r\n\r\nHere you go: https:\/\/snack.expo.dev\/jjL9yJ3ze","issue_id":1663562666124,"origin_id":1883151195,"user_origin_id":1490370,"create_time":1704810530,"update_time":1704810607,"id":1714672574926,"updated_at":"2024-05-02T17:56:14.925000Z","created_at":"2024-05-02T17:56:14.925000Z"},{"_id":"6633d3be6c5179bc2e0fd92f","body":"> > Yeah that is your option. Could you please provide short example and I will edit it how I see it. Just to see smth\n> \n> \n> \n> Here you go: https:\/\/snack.expo.dev\/jjL9yJ3ze\n\nI would go with theme for your case, but it could also be done like this: https:\/\/snack.expo.dev\/@romick\/variants\n\nPros: render code is cleaner, no array merge styles logic, all possible styles are cached and is not recreated on every render. Easy to change any style without no changes to break other variant style. All styles within createStylesheet is processed by the linter.\nCons: duplicated styles in some style object that can cause difficulties in adding some style for each variant style.","issue_id":1663562666124,"origin_id":1883489112,"user_origin_id":17779660,"create_time":1704821410,"update_time":1704821410,"id":1714672574928,"updated_at":"2024-05-02T17:56:14.928000Z","created_at":"2024-05-02T17:56:14.928000Z"}]

Considered this component having a `variant` prop with values `white` and `primary`, affecting the selection of the styles object: ```typescript import React, { FC } from 'react'; import { StyleSheet,...

soullivaneuh