Feb 04, 2024

ESLint 적용

eslint를 나의 프로젝트에 적용해보자!
ESLint 적용
Contents
ESLint 설치 및 적용
typescript-eslint
Prettier 설치 및 적용 ( 업데이트 예정 )

ESLint 설치 및 적용

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

npm init @eslint/config
yarn create @eslint/config

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

  • 문법적 오류만

  • 문법이랑 에러도

  • 문법이랑 에러랑 코드 스타일도 고정

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

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

  1. 타입스크립트 사용하니?

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

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

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

이렇게 진행하면 아래와 같이 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가 빠진것을 확인할 수 있다.

위의 내용은 eslintrc의구성요소 글을 확인하자

typescript-eslint

우리의 파일에 typescript-eslint 가 추가되었으니 google 을 통해 들어가보자
https://typescript-eslint.io/

공식문서에는 설치법과 사용법이 나와있다.

초기 설정은 "@typescript-eslint/recommended" 인데 어떤 rule이 설정되어있는지 알아보고 싶어 찾아봤지만 안나온다.. 왜지,,?

Prettier 설치 및 적용 ( 업데이트 예정 )

  1. prettier 설치

yarn add --dev --exact prettier
  1. .prettierrc.js 파일 생성

touch .prettierrc.js

Share article
RSSPowered by inblog