I have configured a basic React-Typescript project (created by create-react-app).

For the following file: MeetingLevels.ts

enum MeetingLevels {
  SiteLeader = 1,
  AreaManager = 2,
  GroupLeader = 3,
  TeamLeader = 4,
}

export default MeetingLevels;

.. the npm run lint yields the following error:

C:\...\models\MeetingLevels.ts
  1:6  warning  'MeetingLevels' is defined but never used  no-unused-vars
  2:3  warning  'SomeLeader' is defined but never used     no-unused-vars
  3:3  warning  'SpaceManager' is defined but never used   no-unused-vars
  4:3  warning  'GroupLeader' is defined but never used    no-unused-vars

But it's used, in multiple places in the project. (Shift click in IntelliJ IDEA finds it as well) - for instance: SomeReactFile.tsx

import MeetingLevels from "../../models/MeetingLevels";
 ...

  const mapMeetingButton = (level: number): string => {
    switch (level) {
      case MeetingLevels.SomeLeader:
        return "A_CUSTOM_STRING";
      case MeetingLevels.SpaceManager:
        return "SOME_OTHER_CUSTOM_STRING";

I have tried to fix the issue, but apparently, my .eslintrc.js seems fine. Nothing I have tried worked so far, and this ESLint error is only present here. (this is the only enum I have in the project.)

.eslintrc.js:

module.exports = {
  env: {
    browser: true, // Browser global variables like `window` etc.
    commonjs: true, // CommonJS global variables and CommonJS scoping.Allows require, exports and module.
    jest: true, // Jest global variables like `it` etc.
    node: true, // Defines things like process.env when generating through node
  },
  extends: [
    "plugin:react/jsx-runtime",
    "plugin:react/recommended", // React recommended rule set
    "eslint:recommended",
    "plugin:@typescript-eslint/eslint-recommended", // Enables few key rules in ESLint rule book
    "plugin:@typescript-eslint/recommended", // TypeScript ESLint compatibility plugin
  ],
  parser: "@typescript-eslint/parser", // Recommended parser for Typescript based React project
  parserOptions: {
    ecmaFeatures: {
      jsx: true,
    },
    ecmaVersion: "latest", // Allows for the parsing of modern ECMAScript features
    sourceType: "module", // Allows for the use of imports
  },
  plugins: [
    "import", // eslint-plugin-import plugin. https://www.npmjs.com/package/eslint-plugin-import
    "@typescript-eslint", // TypeScript official plugin
    "react", // React official plugin
    "react-hooks", // React plugin extension for using React Hooks
  ],
  root: true, // For configuration cascading.
  rules: {
    "react/jsx-uses-react": "error",
    "react/jsx-uses-vars": "error",
    camelcase: "error",
    "import/order": [
      "warn",
      {
        alphabetize: {
          caseInsensitive: true,
          order: "asc",
        },
        groups: [
          "builtin",
          "external",
          "index",
          "sibling",
          "parent",
          "internal",
        ],
      },
    ],
    "max-len": [
      "warn",
      {
        code: 120,
      },
    ],
    quotes: ["warn", "double"],
    "react/jsx-indent-props": ["error", 2],
    "react/prop-types": "warn",
    "react/react-in-jsx-scope": "off",
    "sort-imports": [
      "warn",
      {
        ignoreCase: false,
        ignoreDeclarationSort: true,
        ignoreMemberSort: false,
      },
    ],
    "sort-keys": [
      "warn",
      "asc",
      {
        caseSensitive: true,
        minKeys: 2,
        natural: false,
      },
    ],
    "@typescript-eslint/ban-types": ["warn"],
    "@typescript-eslint/no-empty-function": ["warn"],
    "@typescript-eslint/no-empty-interface": ["warn"],
    "no-console": "warn",
    "no-constant-condition": ["warn"],
    "no-duplicate-imports": "warn",
    "no-unused-vars": "warn",
  },
  settings: {
    react: {
      version: "detect", // Detect react version
    },
  },
};

CodePudding user response：

You can disable the default no-unused-vars rule and instead use @typescript-eslint/no-unused-vars (if it's not enabled):

"@typescript-eslint/no-unused-vars": "warn",
"no-unused-vars": "off"

CodePudding user response：

I would like first to export the enum and import it where ever you want like this :

    export enum MeetingLevels {
      SiteLeader = 1,
      AreaManager = 2,
      GroupLeader = 3,
      TeamLeader = 4,
    }

And import it :

import { MeetingLevels } from "../to-the-target";