[JavaScript] ESLint와 Prettier가 무엇인지는 알고 사용하자!

1. ESLint

ESLint란 JavaScript 코드의 문제를 발견하고 수정하는 데 사용되는 정적 분석 도구이다.

정적 분석 도구란 소스 코드를 실행하지 않고, 의미를 분석하여 잠재적인 결함을 찾아내는 도구를 말한다.

 

 

1.1 정적 분석 도구를 왜 사용해야 할까?

개발자는 코드를 작성하는 과정에서 잠재적인 버그, 안티패턴, 오타, 사용되지 않는 코드 등의 문제를 발생시킬 수 있다.
이러한 문제가 발생할 수 있는 코드를 코드 스멜(Code Smell)이라고 하며,

이는 코드가 동작하더라도 유지보수성과 가독성을 저하시킬 수 있는 비효율적인 코드 패턴을 의미한다.

 

이러한 코드 스멜은 런타임 환경에서 쉽게 발견되지 않기 때문에 코드 리뷰 등의 과정이 필요하지만,

수동으로 모든 문제를 찾아 수정하는 것은 많은 리소스가 소모된다.

 

따라서, ESLint와 같은 정적 분석 도구를 활용하면 이러한 코드 스멜을 자동으로 감지하고 해결할 수 있다.
이를 통해 코드의 일관성을 유지하고 협업 시 품질 높은 코드를 작성할 수 있다. 

 

ESLint 외에도 JSLint, JSHint와 같은 여러 JavaScript 정적 분석 도구들이 존재하지만,
ESLint는 직접 커스터마이징이 가능하며, React, TypeScript와 같은 라이브러리 및 컴파일러와의 호환성이 뛰어나 유연성과 확장성이 매우 높다는 장점이 있다.

 

 

1.2 동작 원리

1. JavaScript 코드를 문자열로 읽어들인다.
2. 코드를 분석할 수 있는 파서(Parser)로 변환하여 코드를 구조화한다.
   변환된 구조를 추상 구문 트리(AST, Abstract Syntax Tree)라고 하며, ESLint는 ESTree라는 파서를 사용하여 AST로 변환한다.
3. AST를 기준으로 코드를 코드 규칙과 대조하여 검사한다.
4. 대조하면서 규칙을 위반한 코드를 감지하여 경고를 표시하거나 수정한다.

 

 

1.3 설치 및 설정

1. 프로젝트에 ESLint 설치

npm install --save-dev eslint

 

2. ESLint 설정 파일 생성 (.eslintrc.json)

• 아래의 명령어를 실행하면, 설정 마법사가 실행되어 코드 스타일을 자동 설정할 수 있다.

npx eslint --init

• 직접 .eslintrc.json 파일을 생성하여 아래와 같이 설정할 수도 있다.

{
  "env": {
    "browser": true,
    "es2021": true
  },
  "extends": "eslint:recommended",
  "rules": {
    "indent": ["error", 2],         // 들여쓰기 2칸 강제
    "quotes": ["error", "single"],  // 작은따옴표 사용 강제
    "semi": ["error", "always"],    // 세미콜론 필수
    "no-unused-vars": "warn"        // 사용되지 않는 변수 경고
  }
}

 

 

 

1.4 실행 및 자동 수정

• 실행 (문제 확인): ESLint가 myfile.js에서 코드 스타일 및 문법 오류를 감지한다.

npx eslint myfile.js

• 자동 수정: ESLint가 자동으로 수정 가능한 코드 스타일 오류를 고쳐주지만,  논리적인 오류나 복잡한 문제는 자동으로 수정되지 않기 때문에 직접 수정해야 한다. 

npx eslint myfile.js --fix

 

 

 

---

 

2. Preitter

Prettier란 구현과 관련없이 코드 스타일을 자동으로 정리해주는 코드 포맷터이다.
즉, 코드의 가독성을 높이고 일관된 스타일을 유지하기 위해 설정된 규칙에 따라 자동으로 코드 형식을 맞춰주는 도구이다.

 

ESLint와 함께 많이 사용되며, 코드 스타일(형식)을 강제 적용하여 개발자 간의 스타일 차이를 줄이는 역할을 한다.

 

 

2.1 주요 특징

• 자동 코드 정리 (Formatting)
  • 불필요한 공백, 들여쓰기 오류, 줄바꿈 등을 자동으로 수정
  • 설정된 규칙에 맞춰 일관된 코드 스타일 유지
• 구체적인 스타일 규칙 필요 없음
  • ESLint처럼 직접 코드 스타일 규칙을 정의하지 않아도, Prettier의 기본 설정을 사용 가능
• 다양한 언어 지원
  • JavaScript, TypeScript, HTML, CSS, JSON, Markdown 등 다양한 언어 포맷팅 가능
• 개발자 스타일 통일
  • 팀 내 개발자들이 서로 다른 코드 스타일을 사용하는 문제를 해결
  • .prettierrc 설정 파일을 통해 프로젝트 내 모든 코드 스타일을 일관되게 유지 가능
• ESLint와 함께 사용 가능
  • ESLint가 코드 품질 검사를 수행한다면, Prettier는 코드 스타일을 강제 적용
  • ESLint와 Prettier의 규칙 충돌을 방지하기 위해 eslint-config-prettier 플러그인을 함께 사용

 

 

2.2 설치 및 사용 방법

1. 프로젝트에 Prettier 설치

npm install --save-dev prettier

 

2. Prettier 설정 파일 생성 (.prettierrc)

{
  "semi": true,           // 세미콜론 자동 추가 여부
  "singleQuote": true,    // 작은따옴표 사용 여부
  "tabWidth": 2,          // 들여쓰기 너비 설정
  "trailingComma": "es5"  // 마지막 쉼표 사용 여부
}

 

3. npx prettier --write .

npx prettier --write .

 

이렇게 설정하면 프로젝트 내 모든 파일이 Prettier 규칙에 맞게 자동 정리된다. 

 

 

 

 

 

---

참고 

https://www.youtube.com/watch?v=Be9q0k5BJ_s

https://velog.io/@imkkuk/Prettier-ESLint-%EC%9D%B4%ED%95%B4%ED%95%98%EA%B3%A0-%EC%82%AC%EC%9A%A9%ED%95%98%EA%B8%B0