ESLint

• 설정값(.eslintrc)

  {
    "parser": "@typescript-eslint/parser",
    "parserOptions": {
      "ecmaVersion": 2022, // 최신 문법 지원
      "sourceType": "module", // 모듈 시스템 사용시
      "ecmaFeatures": {
        "jsx": true // react jsx parsing
      }
    },
    "plugins": ["@typescript-eslint", "prettier"],
    "extends": ["airbnb", "plugin:@typescript-eslint/recommended", "plugin:prettier/recommended"],
    "globals": {
      "window": true,
      "document": true
    },
    "rules": {
      "react/require-default-props": "warn",
      "react/jsx-props-no-spreading": "warn",
      "react/no-array-index-key": "warn",
      "react/jsx-no-useless-fragment": "warn",
      "import/prefer-default-export": "warn",
      "jsx-a11y/anchor-is-valid": "warn",
      "no-bitwise": "off",
      "no-use-before-define": "off",
      "import/no-unresolved": "off",
      "react/function-component-definition": "off",
      "no-shadow": "off",
      "react/jsx-no-constructed-context-values": "off",
      "no-unused-vars": "off",
      "import/no-extraneous-dependencies": "off",
      "@typescript-eslint/no-unused-vars": ["error"],
      "react/jsx-filename-extension": [1, { "extensions": [".tsx", ".ts"] }],
      "import/extensions": [
        "error",
        {
          "js": "never",
          "jsx": "never",
          "ts": "never",
          "tsx": "never",
          "json": "ignorePackages"
        }
      ]
    }
  }
  

기본적으로 에어비엔비 룰을 사용합니다.

최대한 룰을 끄거나 errror 를 내는 방식을 선택했으나 warning을 사용한 부분도 있습니다. warn인 경우에는 반드시 고쳐야 할 설정을 의미합니다.

warn

"react/jsx-props-no-spreading": "warn",

prop을 스프레드 하지 않도록 하는 룰입니다. prop을 명시적으로 받기 위해서 사용합니다. 기존 코드를 파악하고 명시된 prop으로 받도록 하기 위해 warn 설정을 했습니다.

https://github.com/jsx-eslint/eslint-plugin-react/blob/master/docs/rules/jsx-props-no-spreading.md

"react/no-array-index-key": "warn"

react에서 array 키를 index 값으로 설정하지 않도록 하는 룰입니다. 현재 리스트를 뿌려주기만 하기 때문에 돔에 별다른 악영향을 끼치지는 않지만, 권고 사항에 맞추는 것이 좋기 때문에 id가 있다면 그것으로 변경하는 것을 지향합니다.

"react/jsx-no-useless-fragment": "warn",

fragment 컴포넌트가 child 컴포넌트 하나만 감싸고 있을 때 사실 상 fragment 컴포넌트가 필요 없기 때문에 지우라고 하는 룰인데, 현재 테이블 컴포넌트에서 framgent로 감싸주지 않을 때 생기는 오류가 있어 코드 파악 후에 제거할 예정입니다.

"jsx-a11y/anchor-is-valid": "warn",

<a>태그에 필수로 들어가 있는 속성인 href가 없을 때 발생하는 룰입니다. 현재 a태그를 사용하고 있는데 링크 속성이 사용되지 않습니다. 코드 파악 후 다른 태그로 수정해야 합니다.