ESLint 설정을 해보자 ( React )

React 앱을 생성할 때 ESLint를 설정하여 각 프로젝트에 맞는 컨벤션을 정할 수 있습니다.

 

하지만 지금까지 복사 붙여놓기 식으로 ESLint를 써왔어서 내가 쓰는걸 좀 알고 쓰면 좋을 것 같아서 학습 겸 정리를 해보도록 하겠습니다.

 

---

ESLint 란?

JavaScript, JSX의 정적 분석 도구 입니다.

코드를 일관성 있게 짤 수 있도록 도움을 줄 수 있는데요. 협업을 할 경우에 효율이 증폭되는 도구입니다.

 

ESLint 설정을 하는법.

 

만약 CRA 를 통해서 앱 생성을 하였을 경우 package.json 폴더 안에 eslintConfig 스크립트가 생성되어있습니다.

해당 파일 내에서 수정은 가능하지만 가능하면 root 폴더에 .eslintignore , .eslintrc.js 파일을 생성해서 따로 관리하는 편이
좋은 것 같습니다. package.json 에 너무 많은 코드가 포함되어 있으면 유지보수가 귀찮아지기 떄문입니다.

"eslintConfig": {
    "extends": [
      "react-app",
      "react-app/jest"
    ]
},

 

---

직접 설정해보자 ! 

.eslintrc.js 파일을 root 폴더에 생성 ( json 으로도 가능 )

module.exports = {
    
}

root 옵션

ESLint는 현재 린트(lint) 대상의 파일이 위치한 폴더 안에 설정 파일이 있는지 우선적으로 확인합니다.

상위 폴더를 한 단계 씩 거슬러 올라가면서 설정 파일을 찾게되는데요. 

root 옵션이 true로 설정되어 있는 설정 파일을 만나면 더 이상 상위 폴더로 올라가지 않습니다.

저는 여러 프로젝트를 root에 관리하고 있지 않으므로 일단 true로 설정해두겠습니다.

module.exports = {
    root: true,
    
}

---

Plugins 옵션

ESLint는 기본 설정 외에도 서드파티 플러그인 사용을 지원합니다.
플러그인 패키지를 설치하고, 해당 플러그인을 plugins에 추가하여 사용할 수 있습니다.

 

우선 의존성 주입을 시켜줘야 하므로 npm을 통해서 다운해보겠습니다.

다운을 할 때 eslint-plugin 이라는 문구가 무조건 들어가므로 유의해주세요.

 

저는 import, react, typescript 의존성을 주입해주었습니다. 

module.exports = {
    root: true,
    plugins: [
        "react", "@typescript-eslint"
    ],
}

plugins는 의존성을 주입했을 뿐 적용되지 않으므로 extends, rules 옵션에 추가해줘야 합니다.

---

extends 옵션

플러그인의 추천 설정을 설정할 수 있습니다. 또한 다른 기업들이 설정한 lint 를 적용해서 사용할 수 있습니다.

 

react, react-hooks, jsx-a11y, import, typescript , testing-library lint를 주입해주었습니다.

extends: ["plugin:@typescript-eslint/recommended", "eslint:recommended", "plugin:react/recommended"],

---

rules 옵션

규칙을 설정 할 수 있는 옵션입니다. extends 옵션들로 덮어진 설정들을 세세하게 컨트롤 할 때 사용하는 옵션입니다.

"rules": {
    "@typescript-eslint/no-explicit-any": "off", // typescript any Type 허용
    "import/prefer-default-export": 0, // export , export default 둘 다 허용하도록
    "import/extensions": 0, // import 시 확장자명 허용
    "import/no-dynamic-require": 0,// require(...) 방식 허용
    "import/no-unresolved": 0, // 절대경로 허용
    "import/no-extraneous-dependencies": 0, // 테스트 또는 개발환경을 구성하는 파일에서는 devDependency 사용을 허용
    "react-hooks/exhaustive-deps": 0, // 종속성이 누락된 경우 에러 -> 종속성 누락 이후 허용
    "no-console": warn, // console 함수 사용시 경고
    "no-unused-vars": "off", // 타입 스크립트에서 임시 변수 설정시 오류 반환 -> 허용
    "indent": ["error", 4, { "SwitchCase": 1 }] // Tab 줄 바꿈 포인트 4칸 한번씩 (SwitchCase) 
},

저는 꽤 느슨하게 관리하고 있습니다.

 

---

env 옵션

 사전 정의된 전역 변수 사용을 정의합니다.

env: {
    "browser": true,
    "commonjs": true,
    "es6": true,
    "node": true
},

---

Setting 옵션

플러그인 추가적인 설정이 가능합니다. 

"settings": {
    "import/resolver": {
      "node": {
        "extensions": [".js", ".jsx", ".ts", ".tsx"],
        "moduleDirectory": ["node_modules", "@types"]
      },
      "typescript": {
        "alwaysTryTypes": true
        // true일 경우, TypeScript 확장자(.ts, .tsx)가 포함된 파일의 경우, 
       	// 타입 선언 파일(.d.ts)이 존재하지 않더라도 항상 타입 체크를 시도하겠다는 의미입니다.
      },
      "react": {
        "version": "detect" // react 버전을 알아서 감지해주세요.
      }
    }
},

---

Parser / ParserOptions

ParserOptions 는 ESLint 사용을 위한 JS 언어 옵션을 지정 가능합니다.

 

- ecmaVersion: 사용할 ECMAScript 버전 설정.

- sourceType: parser의 export 형태를 설정

- ecmaFeatures: ECMAScript의 언어 확장 기능을 설정 (ES6)

 

Parser 의 경우 기본적으로는 babel-eslint 를 사용합니다. 하지만 저는 typescript를 사용중이기 때문에 typescript-eslint/parser를 사용하겠습니다.

 

"parser": "@typescript-eslint/parser",
"parserOptions": {
    "ecmaVersion": 2021,
    "sourceType": "module",
    "ecmaFeatures": {
        "jsx": true
    }
},

 

결과물

{
    "root": true,
    "parser": "@typescript-eslint/parser",
    "parserOptions": {
        "ecmaVersion": 2021,
        "sourceType": "module",
        "ecmaFeatures": {
            "jsx": true
        }
    },
    "plugins": ["@typescript-eslint", "react"],
    "extends": ["plugin:@typescript-eslint/recommended", "eslint:recommended", "plugin:react/recommended"],
    "rules": {
        "@typescript-eslint/no-explicit-any": "off",
        "import/prefer-default-export": "off",
        "import/extensions": 0,
        "import/no-dynamic-require": 0,
        "import/no-unresolved": 0,
        "import/no-extraneous-dependencies": 0,
        "react-hooks/exhaustive-deps": 0,
        "no-console": 0,
        "no-unused-vars": "off",
        "indent": ["error", 4, { "SwitchCase": 1 }]
    },
    "settings": {
        "import/resolver": {
            "node": {
                "extensions": [".js", ".jsx", ".ts", ".tsx"],
                "moduleDirectory": ["node_modules", "@types"]
            },
            "typescript": {
                "alwaysTryTypes": true
            },
            "react": {
                "version": "detect"
            }
        }
    },
    "env": {
        "browser": true,
        "node": true,
        "es6": true
    }
}

 

다들 팀마다의 컨벤션에 맞게 ESLint를 입맛대로 바꿔보시면 좋을 것 같습니다.

 

이게 그냥 코드짜는거보다 어려운거같아요 ㅜㅜ