ESLint & Prettier

ESLint와 Prettier는 JavaScript 개발자들이 코드 스타일과 오류를 자동으로 관리하는 도구입니다.

그 차이와 같이 쓰는 이유를 알아봅시다.

ESLint

• ESLint는 JavaScript 코드에서 일관된 스타일을 유지하고 잠재적인 오류를 식별하는 린트 도구입니다. ESLint는 다양한 규칙 세트를 제공하며, 이를 통해 코드의 가독성, 유지 관리 및 품질을 향상시킬 수 있습니다. 예를 들어, 들여쓰기 스타일, 변수 선언 규칙, 디버깅 문장 사용 등을 체크하여 코드의 일관성을 유지합니다.

Prttier

• Prettier는 코드 포맷터로서, 코드의 스타일을 일관되게 유지하고 가독성을 향상시킵니다. 들여쓰기, 따옴표, 줄 바꿈 등과 같은 포매팅 규칙을 적용하여 코드를 자동으로 정리합니다. Prettier는 코드베이스의 모든 파일을 일관된 형식으로 포맷하는데 사용될 수 있으며, 일관성을 유지하고 개발자 간의 협업을 간편하게 만듭니다.

두 도구를 함께 사용 하는 이유

• 두 도구를 함께 사용하여 개발 과정에서 일관된 스타일을 유지하고 코드 품질을 향상시킬 수 있습니다. 일반적으로, ESLint는 린트 규칙을 정의하고 코드에서 잠재적인 오류를 식별하는 역할을 담당하며, Prettier는 코드 포맷팅을 수행합니다.

• 예를 들어, ESLint는 변수를 정의하지 않거나 정의한 후에 사용하지 않는 등의 잠재적인 오류를 감지할 수 있습니다. Prettier는 들여쓰기, 쉼표 사용, 따옴표 종류 등과 같은 포매팅 규칙을 적용하여 코드를 자동으로 정리합니다.

쉽게 말하자면 ESLint는 문법적인 오류나 코드 스타일의 에러를 코드 상에서 노출해주고 Prettier는 실행 할 수 있는 도구이며 실행하면 정형적인 코드로 포맷을 도와준다.