[ESlint] ESlint 설정 가이드 (. eslintrc 파일 설정 속성 설명)

eslint 설정을 처음 보면 어질어질하다. 😱

빠르게 기초 정보라도 확인하기 위한 용도로 아래 글을 작성한다.

1. "extends": 다른 설정 파일을 확장하여 현재 설정을 기반으로 합니다. 대표적인 예로 "eslint-config-airbnb"나 "eslint:recommended"를 확장하는 것이 있습니다.
   ERP개발팀의 경우, "eslint-config-hanssem"
2. "env": 코드가 실행되는 환경을 정의합니다. 예를 들어, 브라우저 환경을 지정하려면 "browser": true와 같이 설정할 수 있습니다. node 환경이면 “node”:true 설정하면 된다. front는 browser로 설정
3. "parser": 사용할 JavaScript 파서를 지정합니다. 주로 Babel을 사용하는 경우 "babel-eslint"과 같은 파서를 지정할 수 있습니다. "@typescript-eslint/parser" 와 같은 parser를 설정하면, typescript로 구성된 eslint-parser를 사용하게 된다. typescript를 사용하는 front-end 팀은 대부분 이것으로 설정
4. "parserOptions": 파서 옵션을 설정합니다. 예를 들어, ECMAScript 버전을 선택하거나 모듈 시스템을 지정하는 데 사용됩니다.
5. "rules": 개별 규칙을 설정하고 오버라이드할 수 있습니다. 이 속성은 코드 스타일과 품질 규칙을 조정하는 데 사용됩니다. 예를 들어, "no-console": "off"는 console.log() 사용을 허용하도록 설정할 수 있습니다.
6. "plugins": 사용할 플러그인을 지정합니다. 플러그인은 추가 규칙 집합을 제공하며, 이 설정을 통해 활성화할 수 있습니다.
7. "settings": 플러그인 및 규칙에 대한 설정을 정의할 수 있습니다. 이 설정은 사용 중인 환경에 따라 다릅니다. 기본 설정은 리액트 최신 버전 기준으로 lint하게 되어 있음. 아래 값이 default로 작성하지 않아도 됨.
8. "settings": { "react": { "version": "detect" } }
9. "overrides": 특정 파일 패턴 또는 디렉토리에 대한 규칙 오버라이드를 정의할 수 있습니다. 이것은 특정 파일에 대한 예외 규칙을 정의할 때 유용합니다. 테스트 파일은 테스트 파일대로, tsx, ts 는 다른 plugin을 이용해서 살짝 설정을 바꿔주는 역할을 한다.
10. "root": 현재 설정 파일이 프로젝트 루트에서 시작되는지 여부를 나타냅니다. true로 설정하면 부모 디렉토리에서 .eslintrc를 찾지 않습니다. false일 경우, 부모 디렉토리에서 .eslintrc파일을 찾아서 추가 lint 적용.