React - eslint 세팅하기

 

eslint 를 세팅을 하였다. 하면서 정확한 개념을 이해하게 되었다.

prettier 가 한 사람이 짠 것 같은 코드 규칙을 적용하는 거라면,

eslint 는 여러 명이 협업할 때 잘못된 코드(중복, typo) 등을 고칠수 있도록 도와준다.

이친구가 없다면 배포할때에서야 잘못된 점들을 알아챌 수 있기 때문에 모든 프로젝트의 동반자같은 녀석이다.

 

먼저, 최신버전을 다운받았다.

하지만 리액트 플러그인과 호환성이 안맞는 부분이 있어 9버전에서 8버전으로 다운그레이드 하였다.

(무조건 최신보다는 안정성이 확인되고 업그레이드 하는 것을 추천)

 

eslint.config.js 

import eslint from "@eslint/js";
import tseslint from "@typescript-eslint/eslint-plugin";
import tsParser from "@typescript-eslint/parser";
import reactHooks from "eslint-plugin-react-hooks";
import globals from "globals";
import react from "react";

export default [
    eslint.configs.recommended,
    {
        files: ["**/*.{ts,tsx}"], // 프론트 파일만 적용이 되도록 제한
        languageOptions: {
            ecmaVersion: 2020,
            globals: {
                ...globals.browser,
                NodeListOf: "readonly", // undefined 오류 발생하여 설정
            },
            parser: tsParser,
        },
        linterOptions: {
            reportUnusedDisableDirectives: "error",
        },
        plugins: {
            react: react,
            "react-hooks": reactHooks,
            "@typescript-eslint": tseslint,
        },
        rules: {
            ...eslint.configs.recommended.rules,
            ...reactHooks.configs.recommended.rules,
            "max-params": ["error", 5], // 함수의 파람 개수 5개 이하로 제한
            "max-nested-callbacks": ["error", 4], // 충접 콜백 깊이를 4로 제한
            "max-depth": ["error", 8], // 코드 블록 최대 깊이를 8로 제한
            complexity: ["error", 100], // 코드 복잡도를 100으로 제한
            "@typescript-eslint/no-use-before-define": ["off"], // 변수 정의전 사용 허용
            "@typescript-eslint/no-unused-vars": "off", // 사용하지 않는 변수 허용
            "@typescript-eslint/explicit-member-accessibility": "off", // 클래스 멤버 접근 지정 x
            "@typescript-eslint/ban-ts-comment": "off", // @ts-ignore 사용 허용
            "@typescript-eslint/no-explicit-any": "off", // any 사용 허용
            "@typescript-eslint/no-unused-expressions": "off", // 사용하지 않는 표현식 허용
        },
    },
    {
        ignores: [
            "public",
            ".prettierrc",
            "eslint.config.js",
            "ppnpm-lock.yaml",
            "README.md",
        ],
    },
];

 

 

package.json

 

린트 명령어들을 추가해주었다. script 안에 원하는 명령어를 넣어주자

{
	...
	"scripts": {
            ...
            "lint": "eslint . -c eslint.config.js --max-warnings 0", // 린트명령어
            "lint:fix": "eslint . -c eslint.config.js --max-warnings 0 --fix", // 린트픽스명령어
        },
  
}

 

 

실행하기

터미널에서 실행해보니 매우 잘된다 :)

$ pnpm run lint