ESLint와 Prettier

개요

프론트엔드 개발에 있어, 코드의 가독성과 일관성을 유지하는 것은 중요하다. ESLint와 Prettier는 이러한 목표를 달성하기 위해 많이 사용되는 도구로, ESLint와 Prettier를 소개하고 어떻게 사용하는지도 알아보겠다. 이 두 도구를 함께 사용하면 코드 스타일링을 자동화하고 팀의 코드 품질을 향상시킬 수 있다.

ESLint

• JavaScript 및 TypeScript 코드에서 문제를 식별하고 코드 스타일 가이드를 적용하는 정적 분석 도구다.
• ESLint를 사용하면 코드의 오류, 잠재적인 버그, 불필요한 코드, 보안상 위험한 코드, 일관성 문제 등을 감지할 수 있다.
• 플러그인 시스템을 지원하며, 팀의 개발 가이드에 따라 정확히 원하는 규칙을 적용할 수 있다.

Prettier

• 코드 포맷팅 도구로, 코드의 일관된 스타일을 유지하고 가독성을 높이는 데 도움을 준다.
• 자동으로 코드를 다시 작성하여 설정된 규칙에 따라 들여쓰기, 따옴표 스타일, 줄바꿈 등을 조정한다.
• 주로 코드 스타일 관련 논쟁을 해결하고 일관성 있는 코드베이스를 유지하기 위해 사용된다.
• 팀원 모두 같은 코드 스타일을 공유하므로,포맷팅 등에 에너지를 낭비하지 않고, 핵심적인 개발에 집중할 수 있다.

설치하기

1. ESLint

   npm install eslint --save-dev

   ※ CRA로 리액트 프로젝트를 생성하는 경우, 이미 내장되어 있다!

2. Prettier

   npm install prettier --save-dev

3. eslint-config-prettier

   npm install eslint-config-prettier --save-dev

   • ESLint는 linting 기능을, Prettier는 formatting을 담당하는 구조가 이상적이지만, ESLint에는 일부 formatting 관련된 rule도 포함되어 있다.
   • 이 rule들이 prettier와 다른 설정을 가지고 있다면 설정 충돌이 발생하기 때문에, ESLint에서 formatting 관련 rule들을 모두 해제해야할 필요가 있다.
   • 수동으로 진행할 수도 있지만, 이를 적용해주는 ESLint plugin이 존재한다.

설정

• 패키지들을 설치하면 이제 eslint와 prettier를 사용할 수 있게 되었지만, 설치만되고, 아직 일관적인 규칙을 적용하지는 않은 상태이다.

• 실제 프로젝트에서는 기본 설정을 그대로 사용하는 것이 아니라 팀에 맞게 커스터마이징해서 사용하며, 팀원들간 항상 똑같은 설정을 사용하는 것이 보장되어 있어야 하기에 ESLint와 Prettier는 프로젝트내에 설정파일을 이용해서 설정을 공유하고 적용하는 방법을 제공해주고 있다.

• Prettier의 경우, 루트 디렉토리에 .prettier.확장자(JSON, YAML, JS, TOML) 파일을 통해서 설정할 수 있다.

• .prettierrc 예시

  //.prettierrc.json
  {
    "tabWidth": 2,
    "singleQuote": true,
    "semi": true
  }

• ESLint의 경우, 커스터마이징 할 수 있는 부분이 많고, 언어별(js, ts 등), 환경별(web, node, react 등) 세팅을 해줘야 하는 부분이 많아서 다소 복잡하다.

• eslintrc 예시

  // .eslintrc
   
  {
    "extends": ["react-app", "eslint:recommended", "prettier"],
    "rules": {
      "no-var": "error", // var 금지
      "no-multiple-empty-lines": "error", // 여러 줄 공백 금지
      "no-console": ["error", { "allow": ["warn", "error", "info"] }], // console.log() 금지
      "eqeqeq": "error", // 일치 연산자 사용 필수
      "dot-notation": "error", // 가능하다면 dot notation 사용
      "no-unused-vars": "error" // 사용하지 않는 변수 금지
    }
  }

결론

ESLint와 Prettier는 프론트엔드 개발자에게 코드 스타일링과 일관성 유지에 큰 도움을 주는 강력한 도구이므로, 이 두 도구를 팀 프로젝트에 통합하면 개발자들은 일관된 스타일 가이드에 따라 작업할 수 있고, 코드의 품질과 가독성을 향상시킬 수 있다. ESLint와 Prettier를 사용하여 개발 효율성을 높이고 팀의 코드 표준을 유지해보세요.

※ 공식 문서

• ESLint
• Prettier