각 옵션 별 간단 설명
자세한 설명은 reference에
ESLint는 현재 린트(lint) 대상의 파일이 위치한 폴더 안에 설정 파일이 있는지 우선적으로 확인해보고 없으면 그 상위 폴더를 한 단계 씩 거슬러 올라가면서 설정 파일을 찾음
root 옵션이 true로 설정되어 있는 설정 파일을 만나면 더 이상 상위 폴더로 올라가지 않음
플러그인 옵션 설정해주고
사용할 플러그인들은 dev dependency에 설치해둬야함
단순히 플러그인만 추가해주면 관련 규칙이 바로 활성화되지 않음
사실 플러그인은 새로운 규칙을 단순히 설정이 가능한 상태로 만들어주기만 함
Google, Facebook, Airbnb 등 수많은 세계적인 기업들이 ESLint로 자바스크립트 코드를 린트(lint)
설정 파일의 extends 옵션을 통해서 이러한 기업들이 공개해놓은 설정을 그대로 가져와 기반(base) 설정으로 활용
{
"plugins": ["import", "react"],
"extends": ["plugin:import/recommended", "plugin:react/recommended"]
}
일반적으로는 extends 옵션을 통해서 설정된 규칙을 덮어쓰고 싶을 때 사용
ESLint는 기본적으로 미리 선언하지 않고 접근하는 변수에 대해서는 오류를 내기 때문에 이렇게 각 실행 환경(runtime)에서 기본적으로 제공되는 전역 객체에 대해서 설정을 통해 알려줘야 함
이러한 역할을 실행 파일의 env 옵션이 담당
개발자가 작성하는 자바스크립트 코드는 실제로 브라우저와 같은 실행 환경에서 실제로 돌아가는 코드와 다른 경우가 많음
대표적인 예로 타입스크립트나 JSX와 같은 자바스크립트의 확장 문법으로 개발하거나 Babel과 같은 트랜스파일러(transpiler)를 통해 최신 문법으로 개발
ESLint는 기본적으로 순수한 자바스크립트 코드만 이해할 수 있기 때문에 자바스크립트의 확장 문법이나 최신 문법으로 작성한 코드를 린트(lint)하기 위해서는 그에 상응하는 파서(parser)를 사용하도록 설정
- settings
- .eslintignore
- overrides
는 reference 에서 확인