집 >웹 프론트엔드 >JS 튜토리얼 >ESLint 대 Prettier: 코드베이스에 대한 큰 논쟁

ESLint 대 Prettier: 코드베이스에 대한 큰 논쟁

현실을 직시하자면: JavaScript와 TypeScript 개발자는 도구에 관해 논쟁하는 것을 좋아합니다.

탭 또는 공백? 세미콜론인지 아닌지? 이제 오래된(JavaScript 시대의) 질문: ESLint, Prettier 또는 둘 다 사용해야 합니까?

여기 유머와 개발자 친화적인 통찰력이 가미되어 광기를 이해하는 데 도움이 되는 친절한 가이드가 있습니다.

경쟁자를 만나보세요

ESLint는 버그를 발견할 뿐만 아니라 코드 스타일에 대해 원치 않는 조언도 제공하는 뛰어난 팀원입니다.

코드가 작동하는지그리고 규칙(물론 사용자가 지정한 규칙)을 따르는지 확인하는 정적 코드 분석 도구입니다.

ESLint vs Prettier: The Great Debate for Your Codebase

프리티어는 어떤지 묻지도 않고 헝클어진 머리를 고쳐주는 그 친구 같아요.

독단적이고 무자비하며 깨끗하고 일관되게 보이도록 코드 형식을 지정하는 것이 중요합니다.

모든 결정에 동의하지 않을 수도 있지만 적어도 일관성은 있습니다!

기능 ESLint 더 예뻐

Feature	ESLint	Prettier
Report code errors	Yes	No
Automatically fix code errors	Yes	No
Add custom rules/options	Yes	No
Formatting	Yes	Yes
Opinionated configurations	Optional	Yes

코드 오류 신고 예 아니요 코드 오류 자동 수정 예 아니요 맞춤 규칙/옵션 추가 예 아니요 포맷 예 예 독창적인 구성 선택사항 예

ESLint vs Prettier: The Great Debate for Your Codebase

Prettier가 탄생한 이유는 형식화 토론에 귀중한 시간과 에너지가 소모되었기 때문입니다.

if 키워드 뒤에 공백이 있어야 하나요? 줄 길이는 80이어야 할까요, 아니면 100이어야 할까요? 프리티어는 “닥치고 제가 처리하도록 할게요.”라고 말합니다.

일관적인 방식으로 전체 코드베이스를 다시 인쇄하므로 공백과 탭을 가리는 일이 더 이상 발생하지 않습니다.

절충점? 구성 가능성이 낮습니다. Prettier가 가장 좋다고 생각하는 것에 갇혀 있습니다. (스포일러: 일반적으로 괜찮습니다.)

예, 하지만 문제는 다음과 같습니다.

ESLint 개발자들은 Linting과 서식 지정을 결합하는 것이 이상적이지 않다는 점을 인정했습니다.

Enter Prettier: ESLint의 서식 부담을 덜어주는 전용 포맷터입니다.

Prettier를 사용하여 서식을 지정하세요. 코드 품질을 위해 ESLint를 사용하세요.

eslint-config-prettier를 설치합니다. 이렇게 하면 Prettier와 충돌할 수 있는 ESLint의 형식 지정 규칙이 비활성화됩니다.
.eslintrc 구성에 추가하세요.

   {
     "extends": [
       "eslint:recommended",
       "plugin:prettier/recommended"
     ]
   }

다음과 같은 경우:

꾸준함이 가장 중요한 대규모 팀에서는 더 예쁘다는 것이 빛납니다. 하지만 혼자 작업 중이거나 이미 ESLint의 형식에 만족한다면 ESLint 없이도 작업이 가능할 수도 있습니다.

Aspect	ESLint	Prettier
Nature	A static code analysis tool and linter for JavaScript, focused on identifying code issues	A code formatter designed to make code more readable and consistent
Primary Purpose	Ensures code quality and detects potential bugs	Focuses purely on consistent code formatting
Configuration	Highly customizable; rules are defined in a .eslintrc config file	Minimal customization; enforces standard formatting rules with optional tweaks in .prettierrc.json
Integration	Works with popular IDEs, offering real-time feedback and auto-fixing of linting issues	Easily integrates with IDEs to format files automatically on save