반응 + 유형 스크립트 + ESLint: 내보낸 Enum-s에 대해서만 사용되지 않는 변수

반응 + 유형 스크립트 + ESLint: 내보낸 Enum-s에 대해서만 사용되지 않는 변수

기본 React-Type 스크립트 프로젝트(create-react-app에서 생성)를 구성했습니다.

다음 파일의 경우:

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

export default MeetingLevels;

.. 는 다음과 같은 오류를 발생시킵니다:

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

하지만 그것은 프로젝트의 여러 곳에서 사용됩니다. (IntelliJ IDEA의 Shift+click도 이를 찾습니다) - 예를 들어:

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";

나는 그 문제를 해결하려고 노력해 보았지만, 보아하니 내 것은 괜찮은 것 같다. 지금까지 시도해 본 것은 아무것도 작동하지 않았고, 이 ESLint 오류는 여기에만 있습니다. (이 프로젝트에서 제가 가진 유일한 것입니다.)

:

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
    },
  },
};

---

기본 규칙을 실행 중지하고 대신 다음을 사용할 수 있습니다(실행되지 않은 경우):

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

---

먼저 enum을 내보내고 다음과 같이 원하는 곳으로 가져오겠습니다:

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

가져오기:

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