no-shadow rule Broken When Using Enum

[ctaylor4874]

Tell us about your environment

• ESLint Version: 6.8.0
• Node Version: v12.16.0
• npm Version: 6.14.2

What parser (default, Babel-ESLint, etc.) are you using?
"@typescript-eslint/parser": "^2.23.0"

Please show your full configuration:

Configuration

{
  "parser": "@typescript-eslint/parser",
  "parserOptions": {
    "jsx": true,
    "useJSXTextNode": true
  },
  "plugins": ["@typescript-eslint", "eslint-comments", "promise", "unicorn"],
  "extends": [
    "airbnb",
    "airbnb/hooks",
    "plugin:@typescript-eslint/recommended",
    "plugin:eslint-comments/recommended",
    "plugin:json/recommended",
    "plugin:promise/recommended",
    "plugin:unicorn/recommended",
    "plugin:import/typescript",
    "plugin:prettier/recommended",
    "prettier/react",
    "prettier/@typescript-eslint"
  ],
  "root": true,
  "rules": {
    "consistent-return": "off",
    "unicorn/consistent-function-scoping": ["off"],
    "unicorn/filename-case": ["off"],
    "unicorn/prevent-abbreviations": ["off"],
    "unicorn/regex-shorthand": ["off"],
    "unicorn/prefer-query-selector": ["off"],
    "import/extensions": 0,
    "max-classes-per-file": [0],
    "no-param-reassign": "off",
    "react/jsx-filename-extension": [1, { "extensions": [".tsx", ".jsx"] }],
    "react/destructuring-assignment": [0],
    "react/static-property-placement": [0],
    "react/jsx-props-no-spreading": [1],
    "import/prefer-default-export": 0,
    "no-underscore-dangle": 0,
    "import/no-cycle": 0,
    "@typescript-eslint/consistent-type-assertions": 0,
    "@typescript-eslint/explicit-member-accessibility": [0, { "accessibility": "no-public" }],
    "@typescript-eslint/no-angle-bracket-type-assertion": [0],
    "@typescript-eslint/ban-ts-ignore": 1,
    "no-restricted-syntax": "off",
    "@typescript-eslint/interface-name-prefix": 0,
    "@typescript-eslint/explicit-function-return-type": 0,
    "no-plusplus": ["error", { "allowForLoopAfterthoughts": true }],
    "react/sort-comp": [
      2,
      {
        "order": [
          "type-annotations",
          "static-methods",
          "lifecycle",
          "/^on.+$/",
          "/^_on.+$/",
          "everything-else",
          "render"
        ]
      }
    ]
  },
  "env": {
    "browser": true,
    "node": true
  },
  "settings": {
    "react": {
      "version": "detect" // Tells eslint-plugin-react to automatically detect the version of React to use
    },
    "import/resolver": {
      "typescript": {}
    }
  }
}

What did you do? Please include the actual source code causing the issue, as well as the command that you used to run ESLint.

import { Layer } from "mapbox-gl";

export enum LayerGroupRole {
  Layer = "l",
  BaseMap = "bm"
}

What did you expect to happen?
I don't think a no-shadow error should be occurring because Layer is a part of the LayerGroupRole enum.

What actually happened? Please include the actual, raw output from ESLint.
LayerGroupRole.Layer is considered a shadowed variable name.

28:3 error 'Layer' is already declared in the upper scope no-shadow

Are you willing to submit a pull request to fix this bug?

[mdjermanovic]

Hi @ctaylor4874, thanks for the issue!

The no-shadow rule itself works as intended, because typescript-eslint's scope analysis creates a scope for the enum and treats members as variables.

In general, both an outer variable and an enum member can be used to initialize another member:

const a = 42;

enum Foo {
    b = a // 42
}

enum Bar {
    a = 1,
    b = a // 1
}

Still, if the no-shadow error in the original example looks like a bug to you, it might be better to open an issue in the typescript-eslint/typescript-eslint repository.

Similar issue: typescript-eslint/typescript-eslint#325

[kaicataldo]

Closing this issue since the question has been answered.