ESLint 설정하기

ESLint란?

• 코딩 규칙에 위배되는 코드를 자동 검출하는 도구

• 유용하게 사용할 수 있는 스타일가이드를 제공합니다.

• 개발자가 자신의 스타일 가이드를 작성할 수도 있습니다.

  사용방법

• 여러 방법이 있지만 주로 .eslintrc.js 파일에 세팅하고 루트 폴더에 위치시킵니다.

  설정하기 위한 네가지 옵션

1. Environments
   : 코드가 실행되는 환경
   각 환경(environment)은 미리 정의된 전역(글로벌) 변수를 가지고 온다.

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

   설정을 해주지 않을 경우 console, require과 같은
   사전 정의된 전역변수 환경에 있는 메서드를 인식할 수 없어서 에러가 발생합니다.

2. Globals
   : 실행되는 동안, 코드가 접근하는 추가적인 전역(글로벌) 변수

{
  "globals": {
    "$": true
  }
}

선언되지 않은 전역변수를 사용할 경우 ESLint 경고가 발생하지 않도록
사용자 전역 변수를 추가할 수 있습니다.

3. Rules
   : 에러 단계에서 허용하는(enabled) 규칙

   -"off" 또는 0: 규칙을 사용하지 않음
   -"warn" 또는 1: 규칙을 경고로 사용
   -"error" 또는 2: 규칙을 오류로 사용

   ---

4. Plugins
   : third-party 플러그인도 추가적으로
   규칙, environments, 설정 등 ESLint를 사용할 수 있게 정의

   플러그인을 추가할 때, eslint-plugin- 접두사는 생략 가능합니다.

{
  "plugins": [
    "react"
  ]
}

추가. extends
추가한 플러그인에서 사용할 규칙 설정

{
  "plugins": [
    "react"
  ],
  "extends": [
    "eslint:recommended",
    "plugin:react/recommended" 
  ],
}

ESLint 데모

참고

ESLint 설정 살펴보기
Configuring ESLint(공식문서)
ESLint