ESLint 적용

eslint를 나의 프로젝트에 적용해보자!

Feb 04, 2024

Contents

ESLint 설치 및 적용 typescript-eslint Prettier 설치 및 적용 ( 업데이트 예정 )

ESLint 설치 및 적용

terminal 창을 열고 아래의 명령어 입력

npm init @eslint/config

yarn create @eslint/config

eslint 를 어떤 용도로 사용할것인가?

문법적 오류만
문법이랑 에러도
문법이랑 에러랑 코드 스타일도 고정

너의 프로젝트는 어떤 모듈을 사용하나요?

프레임 워크 어떤거 사용해?

타입스크립트 사용하니?

어떤환경에서 너의 코드가 돌아가?

어떤형식의 파일로 만들어줄까?

이런거 저런거 깔아야하는데 지금 깔까? ( 선택한 옵션 기반의 플러그인 , 파서 등 )

이렇게 진행하면 아래와 같이 eslintrc.js 파일이 생성된다.

eslintrc.js ( with typescript )

module.exports = {
    "env": {
        "browser": true,
        "es2021": true
    },
    "extends": [
        "eslint:recommended",
        "plugin:@typescript-eslint/recommended",
        "plugin:react/recommended"
    ],
    "overrides": [
        {
            "env": {
                "node": true
            },
            "files": [
                ".eslintrc.{js,cjs}"
            ],
            "parserOptions": {
                "sourceType": "script"
            }
        }
    ],
    "parser": "@typescript-eslint/parser",
    "parserOptions": {
        "ecmaVersion": "latest",
        "sourceType": "module"
    },
    "plugins": [
        "@typescript-eslint",
        "react"
    ],
    "rules": {
    }
}

위에서 타입스크립트를 사용한다고 했기에
eslint에서 알아서 typescript-eslint 파서를 깔아주었다.
하지만 typescript 를 사용한다는 옵션을 선택하지 않는다면 파일의 내용이 조금 달라진다.

eslintrc.js (without typescript)

module.exports = {
    "env": {
        "browser": true,
        "es2021": true
    },
    "extends": [
        "eslint:recommended",
        "plugin:react/recommended"
    ],
    "overrides": [
        {
            "env": {
                "node": true
            },
            "files": [
                ".eslintrc.{js,cjs}"
            ],
            "parserOptions": {
                "sourceType": "script"
            }
        }
    ],
    "parserOptions": {
        "ecmaVersion": "latest",
        "sourceType": "module"
    },
    "plugins": [
        "react"
    ],
    "rules": {
    }
}

extend, parser, plugin 쪽에 typescript-eslint가 빠진것을 확인할 수 있다.