ESLint 의 개요

ESLint 시작

1) 해당 프로젝트의 터미널 진입 후 아래 코드 입력

npm init @eslint/config

2) 입력을 통해 나오는 질문들에 대답을 해주면 eslintrc.js 파일이 생성된다. ( 질문의 답변에 따라 json일수도, 다른 형식일 수도 있다.)
파일 형식에 따른 작성법은 아래 링크에 나와있다.

ESLint 의 구성

ESLint 는 크게 네가지로 나눠서 볼 수 있다.

• Environments - 스크립트가 실행되는 환경에 대한 정보. 각 환경은 미리 정의된 특정한 전역 변수 집합을 가져온다.

• Globals - 스크립트 실행 중에 액세스하는 추가적인 전역 변수들. 코드의 다양한 부분에서 공유되는 변수를 나타낸다.

• Rules - 어떤 규칙이 활성화되어 있는지 및 어떤 오류 수준에서 실행되는지에 대한 정보. 코드 스타일 및 일반적인 프로그래밍 오류를 감지하는데 사용되는 규칙을 정의

• Plugins - ESLint에게 추가적인 규칙, 환경, 설정 등을 제공하는 서드파티 플러그인에 대한 정보

configuration file의 확장

한 번 확장된 구성 파일은 다른 구성 파일(룰, 플러그인 및 언어 옵션 포함)의 모든 특성을 상속
하고 모든 옵션을 수정한다.

extends 작성법

• 특정 configuration을 나타내는 string 형식 ( config file의 경로, 공유 가능한 config의 이름 등 )

• 앞선 구성을 확장하는 추가적인 구성의 string[] 형식

rules 작성법

• 추가 규칙 설정하기

• 기존의 심각성을 변경하기 ( 옵션은 변경하지 않음 )

  • Base config: "eqeqeq": ["error", "allow-null"]

  • Derived config: "eqeqeq": "warn"

  • Resulting actual config: "eqeqeq": ["warn", "allow-null"]

• 기존의 옵션을 변경

  • Base config: "quotes": ["error", "single", "avoid-escape"]

  • Derived config: "quotes": ["error", "single"]

  • Resulting actual config: "quotes": ["error", "single"]

• 기존의 구성에서 객체 형식의 옵션을 변경

  • Base config: "max-lines": ["error", { "max": 200, "skipBlankLines": true, "skipComments": true }]

  • Derived config: "max-lines": ["error", { "max": 100 }]

  • Resulting actual config: "max-lines": ["error", { "max": 100 }] where skipBlankLines and skipComments default to false

eslint :recommended

• 자동으로 규칙들이 설정되게 되며 rules를 통해 변경이 가능하다.

• 아래의 코드는 추가 규칙 네개를 활성화 하였으며 나머지 규칙들을 변경하는 코드이다.

  module.exports = {
      "extends": "eslint:recommended",
      "rules": {
          // 추가 규칙 활성화
          "indent": ["error", 4],
          "linebreak-style": ["error", "unix"],
          "quotes": ["error", "double"],
          "semi": ["error", "always"],
  
          // "eslint:recommended"를 확장하여 설정된 것을 변경
          "no-empty": "warn",
          "no-cond-assign": ["error", "always"],
  
          // 기본 구성에서의 규칙 비활성화
          "for-direction": "off",
      }
  }

eslint :all

eslint의 모든 규칙을 다 사용하게 된다. but! 사용하지 말자. eslint 공식 페이지에서도 권장하지 않고 있으니,,,
eslint가 업데이트 될때마다 eslint의 rule이 바뀌게 되는 셈이므로 매우 귀찮은 일이 생기게 될 것이다.
만약 꼭 사용해야 한다면 rule 부분을 건드릴 경우 eslint가 업데이트 될때마다 체크해보고 사용하도록 하자.

plugin 사용법

plugin은 eslint 에 여러 확장 기능을 추가할수 있는 npm 패키지.
plugin의 속성값에서는 패키지 이름의 eslint-plugin- 을 생략할 수 있다.

• plugins 에 패키지 이름을 명시해준다.

• extends에 확장하겠다고 선언해 준다.

• rules 를 수정하여 변경, 조절하고싶은 기존 규칙을 수정한다.

{
    "plugins": [
        "react"
    ],
    "extends": [
        "eslint:recommended",
        "plugin:react/recommended"
    ],
    "rules": {
       "react/no-set-state": "off"
    }
}

overrides 사용법

무시하고싶은 파일의 룰을 정해주면 된다.

{
  "rules": {
    "quotes": ["error", "double"]
  },

  "overrides": [
    {
      "files": ["bin/*.js", "lib/*.js"],
      "excludedFiles": "*.test.js",
      "rules": {
        "quotes": ["error", "single"]
      }
    }
  ]
}