Fix eslint no-shadow issue with TypeScript enums #32644
Closed
Conversation
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
The [typescript-eslint docs](https://github.com/typescript-eslint/typescript-eslint/blob/main/packages/eslint-plugin/docs/rules/no-shadow.md) mention that the base `no-shadow` rule should be disabled in favour of `@typescript-eslint/no-shadow`.
|
Hi @fiznool! Thank you for your pull request and welcome to our community. Action RequiredIn order to merge any pull request (code, docs, etc.), we require contributors to sign our Contributor License Agreement, and we don't seem to have one on file for you. ProcessIn order for us to review and merge your suggested changes, please sign at https://code.facebook.com/cla. If you are contributing on behalf of someone else (eg your employer), the individual CLA may not be sufficient and your employer may need to sign the corporate CLA. Once the CLA is signed, our tooling will perform checks and validations. Afterwards, the pull request will be tagged with If you have received this in error or have any questions, please contact us at cla@fb.com. Thanks! |
To match the rest of the code style.
Base commit: 5273553 |
Base commit: 5273553 |
facebook-github-bot
added
the
CLA Signed
|
Thank you for signing our Contributor License Agreement. We can now accept your code for this (and any) Facebook open source project. Thanks! |
facebook-github-bot
added
the
Shared with Meta
|
I was going to suggest replacing the current configuration for TypeScript files with extending Do you know why |
|
Good question - I don't know why, other than they likely followed the main eslint |
|
Ahh… good point, I didn't realize that |
|
@yungsters has imported this pull request. If you are a Facebook employee, you can view this diff on Phabricator. |
|
This pull request was successfully merged by @fiznool in 722a0ff. When will my fix make it into a release? | Upcoming Releases |
nawbc
pushed a commit
to NawbExplorer/react-native
that referenced
this pull request
Dec 7, 2021
Summary: The current ESLint config includes a rule for `no-shadow`. When authoring using TypeScript, the [typescript-eslint docs](https://github.com/typescript-eslint/typescript-eslint/blob/main/packages/eslint-plugin/docs/rules/no-shadow.md) mention that the base `no-shadow` rule should be disabled in favour of `typescript-eslint/no-shadow`, otherwise false positives can be reported. In my case, I was experiencing the same symptoms as described in [this issue](typescript-eslint/typescript-eslint#2552). ## Changelog <!-- Help reviewers and the release process by writing your own changelog entry. For an example, see: https://github.com/facebook/react-native/wiki/Changelog --> [General] [Fixed] - ESLint `no-shadow` rule returning false positive for TypeScript enums Pull Request resolved: facebook#32644 Test Plan: Before config changes: <img width="631" alt="Screenshot 2021-11-22 at 21 02 31" src="https://user-images.githubusercontent.com/820863/142934803-ef1343d6-46ab-4495-9ea5-957f7ec404fc.png"> After changes: <img width="486" alt="Screenshot 2021-11-22 at 21 03 28" src="https://user-images.githubusercontent.com/820863/142934914-a151656a-a37e-4ffb-9db5-ed9fb93543c7.png"> Reviewed By: GijsWeterings Differential Revision: D32618393 Pulled By: yungsters fbshipit-source-id: c69d5cff7210c22c84a0791bde62674efc6aa027
NickGerleman
added a commit
to NickGerleman/react-native
that referenced
this pull request
Nov 2, 2022
Summary: This change moves the default new application template in OSS from Flow to TypeScript. This better aligns with the communities usage, and aligns to the great work that has been happening for TS codegen and built-in types. This is largely derived from [`react-native-community/react-native-template-typescript`](https://github.com/react-native-community/react-native-template-typescript), maintained by radko93, with a couple of changes. 1. Updated `types/*` devDependencies to match bumped libraries (e.g. Jest 26 to 20). 2. Removes `types/react-native` 3. Removed explicit `moduleFileExtensions` to Jest config in package.json (TS and TSX and added by default in current versions) 4. Removes overrides to eslint config to disable `no-shadow` and `no-undef`, since this was fixed in the underlying eslint config with facebook#32644 and facebook#32655 5. Re-translated `App.js` to be a direct translation (e.g. still a raw function instead of React.FC which is sometimes discouraged) 6. Aligns completely to `tsconfig/react-native` maintained configuration (We no longer have the opinionated override of `skipLibCheck`). The important settings are that `strict` is enabled for, but `allowJS` is also enabled to let users import JS modules without anything unexpected. `esModuleInterop` is enabled, which is needed for consistency with Babel import transformations used by Metro. Consistent with our [current documentation](https://reactnative.dev/docs/typescript) built against the community template, `tsc` will typecheck your code without emitting(building) anything. I discovered through this change that the way 'Utilities' is imported in typings doesn't seem to work in the template app use-case (but works in the RN repo?). Fixed up those imports. We also partially revert facebook@f49b251 which deleted typings. Checking to make sure we keep these in the appropriate place in the future. [Documentation](https://reactnative.dev/docs/typescript) will need to be updated as a followup. Changelog: [General][Changed] - Use Vanilla JS in the App Template Pull Request resolved: facebook#35165 Test Plan: Added usage of `tsc` and `jest` when validating a newly built app. Passes in CircleCI `test_js` job. This also meant removing some cases of copying packages into the users app to pull in the root Metro config (we seem to be able to use the template Metro config consistent with what real apps would get). Differential Revision: D40911951 Pulled By: NickGerleman fbshipit-source-id: a989523e99ad0045ab4d345aeb2481ef3ca958ca
NickGerleman
added a commit
to NickGerleman/react-native
that referenced
this pull request
Nov 2, 2022
Summary: This change moves the default new application template in OSS from Flow to TypeScript. This better aligns with the communities usage, and aligns to the great work that has been happening for TS codegen and built-in types. This is largely derived from [`react-native-community/react-native-template-typescript`](https://github.com/react-native-community/react-native-template-typescript), maintained by radko93, with a couple of changes. 1. Updated `types/*` devDependencies to match bumped libraries (e.g. Jest 26 to 20). 2. Removes `types/react-native` 3. Removed explicit `moduleFileExtensions` to Jest config in package.json (TS and TSX and added by default in current versions) 4. Removes overrides to eslint config to disable `no-shadow` and `no-undef`, since this was fixed in the underlying eslint config with facebook#32644 and facebook#32655 5. Re-translated `App.js` to be a direct translation (e.g. still a raw function instead of React.FC which is sometimes discouraged) 6. Aligns completely to `tsconfig/react-native` maintained configuration (We no longer have the opinionated override of `skipLibCheck`). The important settings are that `strict` is enabled for, but `allowJS` is also enabled to let users import JS modules without anything unexpected. `esModuleInterop` is enabled, which is needed for consistency with Babel import transformations used by Metro. Consistent with our [current documentation](https://reactnative.dev/docs/typescript) built against the community template, `tsc` will typecheck your code without emitting(building) anything. I discovered through this change that the way 'Utilities' is imported in typings doesn't seem to work in the template app use-case (but works in the RN repo?). Fixed up those imports. We also partially revert facebook@f49b251 which deleted typings. Checking to make sure we keep these in the appropriate place in the future. [Documentation](https://reactnative.dev/docs/typescript) will need to be updated as a followup. Changelog: [General][Changed] - Use Vanilla JS in the App Template Pull Request resolved: facebook#35165 Test Plan: Added usage of `tsc` and `jest` when validating a newly built app. Passes in CircleCI `test_js` job. This also meant removing some cases of copying packages into the users app to pull in the root Metro config (we seem to be able to use the template Metro config consistent with what real apps would get). Differential Revision: D40911951 Pulled By: NickGerleman fbshipit-source-id: 81136e2aa2602d074107e1fbe8110498406e6ac9
NickGerleman
added a commit
to NickGerleman/react-native
that referenced
this pull request
Nov 2, 2022
Summary: This change moves the default new application template in OSS from Flow to TypeScript. This better aligns with the communities usage, and aligns to the great work that has been happening for TS codegen and built-in types. This is largely derived from [`react-native-community/react-native-template-typescript`](https://github.com/react-native-community/react-native-template-typescript), maintained by radko93, with a couple of changes. 1. Updated `types/*` devDependencies to match bumped libraries (e.g. Jest 26 to 20). 2. Removes `types/react-native` 3. Removed explicit `moduleFileExtensions` to Jest config in package.json (TS and TSX and added by default in current versions) 4. Removes overrides to eslint config to disable `no-shadow` and `no-undef`, since this was fixed in the underlying eslint config with facebook#32644 and facebook#32655 5. Re-translated `App.js` to be a direct translation (e.g. still a raw function instead of React.FC which is sometimes discouraged) 6. Aligns completely to `tsconfig/react-native` maintained configuration (We no longer have the opinionated override of `skipLibCheck`). The important settings are that `strict` is enabled for, but `allowJS` is also enabled to let users import JS modules without anything unexpected. `esModuleInterop` is enabled, which is needed for consistency with Babel import transformations used by Metro. Consistent with our [current documentation](https://reactnative.dev/docs/typescript) built against the community template, `tsc` will typecheck your code without emitting(building) anything. I discovered through this change that the way 'Utilities' is imported in typings doesn't seem to work in the template app use-case (but works in the RN repo?). Fixed up those imports. We also partially revert facebook@f49b251 which deleted typings. Checking to make sure we keep these in the appropriate place in the future. [Documentation](https://reactnative.dev/docs/typescript) will need to be updated as a followup. Changelog: [General][Changed] - Use Vanilla JS in the App Template Pull Request resolved: facebook#35165 Test Plan: Added usage of `tsc` and `jest` when validating a newly built app. Passes in CircleCI `test_js` job. This also meant removing some cases of copying packages into the users app to pull in the root Metro config (we seem to be able to use the template Metro config consistent with what real apps would get). Differential Revision: D40911951 Pulled By: NickGerleman fbshipit-source-id: 05bed911249583b02d2c180a27f955e2e36c0cc4
NickGerleman
added a commit
to NickGerleman/react-native
that referenced
this pull request
Nov 2, 2022
Summary: This change moves the default new application template in OSS from Flow to TypeScript. This better aligns with the communities usage, and aligns to the great work that has been happening for TS codegen and built-in types. This used [`react-native-community/react-native-template-typescript`](https://github.com/react-native-community/react-native-template-typescript) as a main reference, maintained by radko93. A few things are different: 1. Updated `types/*` devDependencies to match bumped libraries (e.g. Jest 26 to 20). 2. Removed `types/react-native` 3. Removed explicit `moduleFileExtensions` to Jest config in package.json (TS and TSX and added by default in current versions) 4. Removed overrides to eslint config to disable `no-shadow` and `no-undef`, since this was fixed in the underlying eslint config with facebook#32644 and facebook#32655 5. Re-translated `App.js` to be a direct translation (e.g. still a raw function instead of React.FC which is sometimes discouraged) 6. Aligns completely to `tsconfig/react-native` maintained configuration (We no longer have the opinionated override of `skipLibCheck`). The important settings are that `strict` is enabled for, but `allowJS` is also enabled to let users import JS modules without anything unexpected. `esModuleInterop` is enabled, which is needed for consistency with Babel import transformations used by Metro. Consistent with our [current documentation](https://reactnative.dev/docs/typescript) built against the community template, `tsc` will typecheck your code without emitting(building) anything. [Documentation](https://reactnative.dev/docs/typescript) will need to be updated as a followup. Changelog: [General][Changed] - Use TypeScript by default for new applications Pull Request resolved: facebook#35165 Test Plan: Added usage of `tsc` and `jest` when validating a newly built app. Passes in CircleCI `test_js` job. This also meant removing some cases of copying packages into the users app to pull in the root Metro config (we seem to be able to use the template Metro config consistent with what real apps would get). Reviewed By: cortinico Differential Revision: D40911951 Pulled By: NickGerleman fbshipit-source-id: 08d4624bc08163c7dc1272f605bc3a8e9a89173b
facebook-github-bot
pushed a commit
that referenced
this pull request
Nov 3, 2022
Summary: This change moves the default new application template in OSS from Flow to TypeScript. This better aligns with the communities usage, and aligns to the great work that has been happening for TS codegen and built-in types. This used [`react-native-community/react-native-template-typescript`](https://github.com/react-native-community/react-native-template-typescript) as a main reference, maintained by radko93. A few things are different: 1. Updated `types/*` devDependencies to match bumped libraries (e.g. Jest 26 to 20). 2. Removed `types/react-native` 3. Removed explicit `moduleFileExtensions` to Jest config in package.json (TS and TSX and added by default in current versions) 4. Removed overrides to eslint config to disable `no-shadow` and `no-undef`, since this was fixed in the underlying eslint config with #32644 and #32655 5. Re-translated `App.js` to be a direct translation (e.g. still a raw function instead of React.FC which is sometimes discouraged) 6. Aligns completely to `tsconfig/react-native` maintained configuration (We no longer have the opinionated override of `skipLibCheck`). The important settings are that `strict` is enabled for, but `allowJS` is also enabled to let users import JS modules without anything unexpected. `esModuleInterop` is enabled, which is needed for consistency with Babel import transformations used by Metro. Consistent with our [current documentation](https://reactnative.dev/docs/typescript) built against the community template, `tsc` will typecheck your code without emitting(building) anything. [Documentation](https://reactnative.dev/docs/typescript) will need to be updated as a followup. Changelog: [General][Changed] - Use TypeScript by default for new applications Pull Request resolved: #35165 Test Plan: Added usage of `tsc` and `jest` when validating a newly built app. Passes in CircleCI `test_js` job. This also meant removing some cases of copying packages into the users app to pull in the root Metro config (we seem to be able to use the template Metro config consistent with what real apps would get). Reviewed By: cortinico Differential Revision: D40911951 Pulled By: NickGerleman fbshipit-source-id: 15994534235695e91cf994ad06ba2183dfc89a50
NickGerleman
added a commit
to NickGerleman/react-native
that referenced
this pull request
Dec 1, 2022
Summary: ESLint configuration is derived from `react-native/eslint-config`, which has supported Flow, vanilla JS, and TypeScript. react-native-community/react-native-template-typescript#238 and a related PR ended up adding new rules to the TypeScript config, to fix bugs with TS linting. It required a followup change, to specify the parser/plugin, and explicity reference them as devDependencies. react-native-community/react-native-template-typescript#240 `react-native/eslint-config` already includes setting the plugin/parser. But overriding rules requires declaring that again, and directly referencing a plugin means a need for the app to declare dependencies, since ESLint resolves modules from the current config. The rules overridedn were later fixed in `react-native/eslint-config`, which is really the right place for the fix (e.g. facebook#32644). I noticed this when deriving from the TS template in facebook#32644 and removed the rule overrides, but didn't have the historical context to realize this means we can then: 1. Remove the explicit parser/plugins since `react-native/eslint-config` already sets them, and we are no longer overriding any rules. 2. Remove the devDependencies, to let the versions be managed entirely by `react-native/eslint-config`. Changelog: [General][Changed] - Simplify Template ESLint Configuration Differential Revision: D41652699 fbshipit-source-id: 67620f12f8fa0ec94fc4db2cbbd2a60a62b70874
facebook-github-bot
pushed a commit
that referenced
this pull request
Dec 1, 2022
Summary: Pull Request resolved: #35529 ESLint configuration is derived from `react-native/eslint-config`, which has supported Flow, vanilla JS, and TypeScript. react-native-community/react-native-template-typescript#238 and a related PR ended up adding new rules to the TypeScript config, to fix bugs with TS linting. It required a followup change, to specify the parser/plugin, and explicity reference them as devDependencies. react-native-community/react-native-template-typescript#240 `react-native/eslint-config` already includes setting the plugin/parser. But overriding rules requires declaring that again, and directly referencing a plugin means a need for the app to declare dependencies, since ESLint resolves modules from the current config. The rules overridedn were later fixed in `react-native/eslint-config`, which is really the right place for the fix (e.g. #32644). I noticed this when deriving from the TS template in #32644 and removed the rule overrides, but didn't have the historical context to realize this means we can then: 1. Remove the explicit parser/plugins since `react-native/eslint-config` already sets them, and we are no longer overriding any rules. 2. Remove the devDependencies, to let the versions be managed entirely by `react-native/eslint-config`. Changelog: [General][Changed] - Simplify Template ESLint Configuration Reviewed By: cortinico Differential Revision: D41652699 fbshipit-source-id: 8e3313dbf27407c5866f3c2432cffc2ecec1b01d
kelset
pushed a commit
that referenced
this pull request
Dec 13, 2022
Summary: Pull Request resolved: #35529 ESLint configuration is derived from `react-native/eslint-config`, which has supported Flow, vanilla JS, and TypeScript. react-native-community/react-native-template-typescript#238 and a related PR ended up adding new rules to the TypeScript config, to fix bugs with TS linting. It required a followup change, to specify the parser/plugin, and explicity reference them as devDependencies. react-native-community/react-native-template-typescript#240 `react-native/eslint-config` already includes setting the plugin/parser. But overriding rules requires declaring that again, and directly referencing a plugin means a need for the app to declare dependencies, since ESLint resolves modules from the current config. The rules overridedn were later fixed in `react-native/eslint-config`, which is really the right place for the fix (e.g. #32644). I noticed this when deriving from the TS template in #32644 and removed the rule overrides, but didn't have the historical context to realize this means we can then: 1. Remove the explicit parser/plugins since `react-native/eslint-config` already sets them, and we are no longer overriding any rules. 2. Remove the devDependencies, to let the versions be managed entirely by `react-native/eslint-config`. Changelog: [General][Changed] - Simplify Template ESLint Configuration Reviewed By: cortinico Differential Revision: D41652699 fbshipit-source-id: 8e3313dbf27407c5866f3c2432cffc2ecec1b01d # Conflicts: # template/_eslintrc.js
OlimpiaZurek
pushed a commit
to OlimpiaZurek/react-native
that referenced
this pull request
May 22, 2023
Summary: This change moves the default new application template in OSS from Flow to TypeScript. This better aligns with the communities usage, and aligns to the great work that has been happening for TS codegen and built-in types. This used [`react-native-community/react-native-template-typescript`](https://github.com/react-native-community/react-native-template-typescript) as a main reference, maintained by radko93. A few things are different: 1. Updated `types/*` devDependencies to match bumped libraries (e.g. Jest 26 to 20). 2. Removed `types/react-native` 3. Removed explicit `moduleFileExtensions` to Jest config in package.json (TS and TSX and added by default in current versions) 4. Removed overrides to eslint config to disable `no-shadow` and `no-undef`, since this was fixed in the underlying eslint config with facebook#32644 and facebook#32655 5. Re-translated `App.js` to be a direct translation (e.g. still a raw function instead of React.FC which is sometimes discouraged) 6. Aligns completely to `tsconfig/react-native` maintained configuration (We no longer have the opinionated override of `skipLibCheck`). The important settings are that `strict` is enabled for, but `allowJS` is also enabled to let users import JS modules without anything unexpected. `esModuleInterop` is enabled, which is needed for consistency with Babel import transformations used by Metro. Consistent with our [current documentation](https://reactnative.dev/docs/typescript) built against the community template, `tsc` will typecheck your code without emitting(building) anything. [Documentation](https://reactnative.dev/docs/typescript) will need to be updated as a followup. Changelog: [General][Changed] - Use TypeScript by default for new applications Pull Request resolved: facebook#35165 Test Plan: Added usage of `tsc` and `jest` when validating a newly built app. Passes in CircleCI `test_js` job. This also meant removing some cases of copying packages into the users app to pull in the root Metro config (we seem to be able to use the template Metro config consistent with what real apps would get). Reviewed By: cortinico Differential Revision: D40911951 Pulled By: NickGerleman fbshipit-source-id: 15994534235695e91cf994ad06ba2183dfc89a50
OlimpiaZurek
pushed a commit
to OlimpiaZurek/react-native
that referenced
this pull request
May 22, 2023
Summary: Pull Request resolved: facebook#35529 ESLint configuration is derived from `react-native/eslint-config`, which has supported Flow, vanilla JS, and TypeScript. react-native-community/react-native-template-typescript#238 and a related PR ended up adding new rules to the TypeScript config, to fix bugs with TS linting. It required a followup change, to specify the parser/plugin, and explicity reference them as devDependencies. react-native-community/react-native-template-typescript#240 `react-native/eslint-config` already includes setting the plugin/parser. But overriding rules requires declaring that again, and directly referencing a plugin means a need for the app to declare dependencies, since ESLint resolves modules from the current config. The rules overridedn were later fixed in `react-native/eslint-config`, which is really the right place for the fix (e.g. facebook#32644). I noticed this when deriving from the TS template in facebook#32644 and removed the rule overrides, but didn't have the historical context to realize this means we can then: 1. Remove the explicit parser/plugins since `react-native/eslint-config` already sets them, and we are no longer overriding any rules. 2. Remove the devDependencies, to let the versions be managed entirely by `react-native/eslint-config`. Changelog: [General][Changed] - Simplify Template ESLint Configuration Reviewed By: cortinico Differential Revision: D41652699 fbshipit-source-id: 8e3313dbf27407c5866f3c2432cffc2ecec1b01d
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
Add this suggestion to a batch that can be applied as a single commit.
This suggestion is invalid because no changes were made to the code.
Suggestions cannot be applied while the pull request is closed.
Suggestions cannot be applied while viewing a subset of changes.
Only one suggestion per line can be applied in a batch.
Add this suggestion to a batch that can be applied as a single commit.
Applying suggestions on deleted lines is not supported.
You must change the existing code in this line in order to create a valid suggestion.
Outdated suggestions cannot be applied.
This suggestion has been applied or marked resolved.
Suggestions cannot be applied from pending reviews.
Suggestions cannot be applied on multi-line comments.
Suggestions cannot be applied while the pull request is queued to merge.
Suggestion cannot be applied right now. Please check back later.
Summary
The current ESLint config includes a rule for
no-shadow. When authoring using TypeScript, the typescript-eslint docs mention that the baseno-shadowrule should be disabled in favour of@typescript-eslint/no-shadow, otherwise false positives can be reported. In my case, I was experiencing the same symptoms as described in this issue.Changelog
[General] [Fixed] - ESLint
no-shadowrule returning false positive for TypeScript enumsTest Plan
Before config changes:
After changes: