ESLint?

list는 직물의 보푸라기 실이라는 뜻을 가지고 있다. 코드에서도 보푸라기가 있다. 코드에서의 보푸라기는 들여쓰기, 사용하지 않는 변수 등이 있다. 보푸라기가 있어도 옷을 입지 못하는 것이 아니듯, 코드에서도 보푸라기가 있어도 동작하는 것에는 문제가 없다. 하지만 코드에 많은 보푸라기가 있다면, 코드의 가독성을 헤치거나, 유지보수를 어렵게 만든다.

ESlint는 이러한 코드의 보푸라기를 제거하는 기능을 가지고 있다. ESLint가 검사하는 항목은 크게 포맷팅, 코드 품질 두 가지이다.

• 포맷팅은 일관된 코드 스타일을 유지하도록 하고 개발자로 하여금 쉽게 읽히는 코드를 만들어 준다. 이를 테면 "들여쓰기 규칙", "코드 라인의 최대 너비 규칙"을 따르는 코드가 가독성이 더 좋다.
• 코드 품질은 어플리케이션의 잠재적인 오류나 버그를 예방하기 위함이다. 사용하지 않는 변수 쓰지 않기, 글로벌 스코프 함부로 다루지 않기 등이 오류 발생 확률을 줄여 준다.

ESLint의 구성 요소

Rules

규칙은 ESLint의 핵심 구성 요소이다. 규칙은 코드가 특정 기대치를 충족하는지, 그리고 기대치를 충족하지 못할 경우 어떻게 해야 하는지 검증한다. 규칙에는 해당 규칙과 관련된 추가 구성 옵션도 포함될 수 있다.

예를 들어 semi 규칙을 사용하면 JavaScript 문이 세미콜론(;)으로 끝나야 하는지 여부를 지정할 수 있다. 항상 세미콜론이 필요하거나 문이 세미콜론으로 끝나지 않도록 규칙을 설정할 수 있다.

ESLint에는 사용할 수 있는 수백 개의 기본 제공 규칙이 포함되어 있다. 사용자 지정 규칙을 만들거나 다른 사람이 플러그인으로 만든 규칙을 사용할 수도 있다.

Configuration Files

ESLint 구성 파일은 프로젝트에서 ESLint에 대한 구성을 저장하는 곳입니다. 기본 제공 규칙, 규칙 적용 방법, 사용자 지정 규칙이 있는 플러그인, 공유 가능한 구성, 규칙을 적용할 파일 등을 포함할 수 있다.

Plugins

ESLint 플러그인은 ESLint 규칙, 구성, 프로세서 및 환경 집합을 포함할 수 있는 npm 모듈이다. 종종 플러그인에는 사용자 정의 규칙이 포함된다. 플러그인은 스타일 가이드를 적용하고 JavaScript 확장(예: TypeScript), 라이브러리(예: React), 프레임워크(예: Angular)를 지원하는 데 사용할 수 있다.

플러그인의 일반적인 사용 사례는 프레임워크에 대한 모범 사례를 적용하는 것입니다. 예를 들어, @angular-eslint/eslint-plugin에는 Angular 프레임워크 사용에 대한 모범 사례가 포함되어 있다.

• 대표적인 플러그인 소개