[ESLint] ReactJS(+TypeScript)에 맞게 설정하기

ReactJs(+TypeScript)에 맞는 ESLint 설정하기 !

 

우선, 아래 npm 모듈들을 install  한 후,

"eslint": "^8.25.0",
"eslint-config-prettier": "^8.5.0",
"eslint-import-resolver-alias": "^1.1.2",
"eslint-import-resolver-typescript": "^3.5.1",
"eslint-plugin-import": "^2.26.0",
"eslint-plugin-prettier": "^4.2.1",
"eslint-plugin-react": "^7.31.10",
"eslint-plugin-react-hooks": "^4.6.0",

 

아래와 같이 설정해서 사용했다. 자세한 내용은 주석 참고.

{
  "env": {
    "browser": true,
    "es2021": true
  },
  "plugins": ["react", "react-hooks", "@typescript-eslint", "eslint-plugin-import", "prettier"],
  "extends": [
    "eslint:recommended",
    "plugin:react/recommended",
    "plugin:@typescript-eslint/recommended",
    "plugin:import/typescript",
    "plugin:import/recommended",
    "prettier"
  ],
  "overrides": [],
  "parser": "@typescript-eslint/parser",
  "parserOptions": {
    "ecmaVersion": "latest",
    "sourceType": "module"
  },
  "rules": {
    "react/react-in-jsx-scope": "off",
    "camelcase": "error",
    "spaced-comment": ["error", "always"], // 주석에서 // 또는 /* 뒤에 일정한 간격을 적용
    "quotes": ["error", "double"],
    "eqeqeq": "error",
    "no-var": "error",
    "no-duplicate-imports": "error", // import 경로 중복 불가
    "no-dupe-keys": "error", // object 키 중복 불가
    "no-multi-str": "error",
    "require-await": "error", // await은 async 내부에 있어야 함
    "import/no-named-as-default": "off",
    "key-spacing": ["error", { "beforeColon": false }], // object 모양 { key: "value" } key뒤에 콜론 바로 있어야 함
    "import/order": [ // import 정렬 순서
      "error",
      {
        "groups": ["builtin", "external", ["internal", "unknown"], "parent", "sibling", "index"],
        "pathGroups": [
          {
            "pattern": "react",
            "group": "external",
            "position": "before"
          }
        ],
        "alphabetize": {
          "order": "asc",
          "caseInsensitive": true
        },
        "newlines-between": "always"
      }
    ]
  },
  "settings": {
    // import 할때 ts,tsx 파일을 이해할 수 있도록 함
    "import/parsers": { "@typescript-eslint/parser": [".ts", ".tsx"] },
    "import/resolver": {
      "typescript": {},
      "node": {
        "extensions": [".js", ".jsx", ".ts", ".tsx"] // import시 뒤에 확장자명을 붙히지 않아도 이해할 수 있음
      }
    }
  }
}

이전 프로젝트들의 경험과 조언에 따라  ESLint 설정을 빡빡하게 제대로해야 의미가 있다는 것을 배우게 되었다.

그래서 이번에 ESLint과 플러그인을 설치하면서 직접 하나하나 설정해보았다.

 

재미있는 기능들이 많았는데,

그 중에서도 알게 되어 가장 좋았던 건 import관련 기능들!

 

프로젝트를 진행하면서 한 파일을 여러개발자들이 만지게 되니 import가 섞이고, 중복선언하게 되는 경우도 꽤 있었다.

또 어떤 파일들이 사용되었는지 한눈에 파악하기위해

외부라이브러리 import와 내부 로직파일 import하는 부분을 구분해주고 싶어서 이 부분을 약속하고 수동으로 해왔었는데.

 

이번에 Eslint를 설정을 하면서 import 중복선언과 사용하지 않는 모듈도 찾을 수 있을 뿐더러

import하는 순서도 원하는대로 정렬할 수 있다는 것이 신기했다.

 

그리고 그걸 직접 수동으로 수정하지 않고, 아래 명령어를 통해 자동으로 수정할 수도 있다는 것을 알게되었다.

eslint --fix src/**/*.{js,jsx,ts,tsx,json}