🌱 ESLint
- ESLint는 ECMA스크립트/JavaScript 코드에서 발견되는 패턴을 식별하고 보고하기 위한 도구
원문 : ESLint is a tool for identifying and reporting on patterns found in ECMAScript/JavaScript code.
특징
- Find Problems
ESLint는 코드를 정적으로 분석하여 문제를 신속하게 찾으며, 대부분의 텍스트 편집기에 내장되어 있어 지속적으로 통합 파이프라인의 일부분으로 ESLint를 실행할 수 있다.
- Fix Automatically
발견한 많은 문제는 자동으로 해결할 수 있으며, ESLint 수정은 구문을 인식하므로 기존의 찾기 및 바꾸기 알고리즘에서 발생하는 오류를 방지할 수 있다.
- Customize
ESLint의 기본 제공 규칙과 함께 작동하는 사용자 고유의 규칙을 작성하며, 프로젝트에 필요한 대로 정확하게 작동하도록 ESLint를 사용자 정의할 수 있다.
🌱 Prettier
- Prettier는 독선적인 코드 포맷터이다. 코드를 구문 분석하고 최대 줄 길이를 고려한 자체 규칙으로 다시 인쇄하여 필요한 경우 코드를 줄 바꿈으로써 일관된 스타일을 적용한다.
원문 : Prettier is an opinionated code formatter. It enforces a consistent style by parsing your code and re-printing it with its own rules that take the maximum line length into account, wrapping code when necessary.
특징
Building and enforcing a style guide
- 공통적인 스타일 가이드를 갖는 것이 프로젝트와 팀에게 가치가 있다는 것은 일반적으로 인정되지만, 이 가이드에 도달하는 것은 매우 고통스럽고 보람 없는 과정이다. 프리티어는 이를 위한 완전히 자동화된 "스타일 가이드" 이다.
Helping Newcomers
- Prettier는 보통 현재의 자바스크립트에 경험이 있는 사람들에 의해 소개되지만, 불균형적으로 혜택을 받는 사람들은 새로 팀에 참여하게된 사람들이다. 일반적으로 프로그래밍 경험이 매우 제한된 사람들에게만 유용하다고 생각할 수 있지만, 이전에 다른 코딩 스타일을 사용했을 가능성이 높거나 다른 프로그래밍 언어에서 온 개발자들이 이 기술을 통해 회사에 적응할 수 있는 시간을 단축할 수 있다.
🌱 ESLint vs Prettier
- eslint는 코드 퀄리티를 보장하도록 도와주고, prettier는 코드 스타일을 깔끔하게 혹은 통일되도록 도와준다.
ESLint
개발 중 특정 기능을 구현할 때, 그 기능을 구현하기 위한 엄청나게 많은 방식이 있다. 예를 들어 함수를 정의할 때, 일반 function 키워드의 함수로 정의할 수도 있고, arrow function을 쓸 수도 있다. 또 배열의 반복문을 돌릴 때 일반 for문을 돌릴 수도 있지만, forEach, map 등 Array 내장 함수를 사용할 수도 있다. 이처럼 여러 방식의 코드 작성법이 있는데, 이러한 방식을 일관성 있는 방식으로 구현할 수 있도록 잡아주는 것이 eslint가 하는 역할이다.
Prettier
prettier는 eslint처럼 '코드 구현 방식'이 아닌, 줄 바꿈, 공백, 들여 쓰기 등 에디터에서 '텍스트'를 일관되게 작성되도록 도와주는 것이다.
결론
💎 두개의 장점을 모두 얻기 위해 함께 사용하여 더욱 더 일관된 개발 컨벤션을 유지할 수 있다.
참조
