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

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

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

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

경쟁자를 만나보세요

ESLint: 더 디텍티브

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

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

프리티어: 더 뷰티션

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

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

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

그들이 하는 일

기능 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는 Sherlock Holmes입니다. 사용하지 않는 교활한 변수나 실수로 전역 범위 선언을 잡아냅니다.
• 더 예쁜 것은 Marie Kondo입니다. 코드를 깔끔하게 정리하지만 버그가 있어도 상관하지 않습니다.

더 예쁜 이유

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

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

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

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

하지만 ESLint도 형식을 지정합니다… 그렇죠?

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

• ESLint의 형식 지정 규칙은 Prettier와 충돌할 수 있습니다.
• 하나의 도구에서 코드 품질 규칙과 서식 규칙을 모두 유지하는 것은… 지저분합니다.

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

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

둘 다 사용해야 하나요?

황금률

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

잘 놀게 만드는 방법

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

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

1. Prettier가 코드 형식을 지정하고 ESLint가 실제 버그를 잡아내도록 하세요.

더 예쁜 게 필요하세요?

다음과 같은 경우:

• 형식 지정 규칙에 대한 오랜 논쟁을 싫어합니다 ✓
• 팀 전체에서 일관된 코드를 원함 ✓
• Airbnb와 같이 매우 자기 주장이 강한 ESLint 구성을 사용하고 형식에 만족합니다. 그렇지 않을 수도 있습니다.

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

비교표: ESLint와 Prettier

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

최종 생각

• ESLint는 코드의 안전망입니다. 버그를 포착하고 모범 사례를 시행하며 품질을 보장합니다.
• 당신의 평화유지군이 더 예뻐요. 서식 지정에 대한 논쟁을 중단하고 코드를 깔끔하고 깔끔하게 유지합니다.

TL;DR

Prettier를 사용하여 포맷하세요. ESLint를 사용하여 분석하세요. 의심스러운 점이 있다면 기억하세요. 삶을 더 쉽게 만드는 도구가 아니라 더 쉽게 만들어주는 도구가 있다는 사실을 기억하세요.

팀과 정신 건강에 가장 적합한 것을 선택하세요.

즐거운 코딩을 하시길 바랍니다. Linting과 서식이 항상 조화를 이루기를 바랍니다!

---

저는 LiveAPI라는 매우 편리한 도구를 개발해왔습니다.

개발자가 쉽게 API 문서를 작성할 수 있도록 설계되었습니다.

LiveAPI를 사용하면 사용자가 브라우저에서 직접 API를 실행할 수 있는 대화형 API 문서를 빠르게 생성할 수 있습니다.

API용 문서를 수동으로 작성하는 데 지쳤다면 이 도구를 사용하면 작업이 더 쉬워질 수 있습니다.

Lama2에서 LiveAPI까지: 매우 편리한 API 문서 작성(2부)

Hexmos의 Athreya(일명 Maneshwar) ・ 2024년 12월 14일

#웹개발 #자바스크립트 #프로그램 작성 #초보자

위 내용은 ESLint 대 Prettier: 코드베이스에 대한 큰 논쟁의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!