잔소리는 많지만 유익한 친구들 ESLint와 Prettier

프론트엔드 개발을 하다 보면 코드가 엉켜 보이고, 팀원 간 스타일이 달라져서 혼란스러울 때가 많습니다.

이럴 때 필요한 게 바로 ESLint와 Prettier입니다.

이 글에서는 두 도구의 역할과 설정 방법을 간단하고 명확하게 소개합니다.

---

01

ESLint

ESLint는 자바스크립트 코드의 오류를 빠르게 찾아주는 도구입니다. 

코드에서 발생할 수 있는 버그나 잘못된 문법을 자동으로 감지하고 알려줍니다.

1. ESLint의 장점

• 사소한 실수나 버그를 사전에 예방합니다.
• 코드 품질을 일정하게 유지할 수 있습니다.
• 협업 시 코드 리뷰 시간을 줄여줍니다.

2. 설치 및 기본 설정

npx eslint --init을 입력하면 몇 가지 질문에 답하면 됩니다

(단 package.json 파일이 미리 생성되어 있어야 합니다.)

npm install eslint --save-dev
npx eslint --init

1) How would you like to use ESLint?: 오류 찾기 및 자동 수정

2) What type of modules does your project use?: 프로젝트에서 사용하는 모듈 타입 선택

 

• JavaScript modules (import/export) → import와 export를 사용하는 ES6 모듈 방식입니다.
• CommonJS (require/exports) → require와 module.exports를 사용하는 Node.js의 전통적인 방식입니다.
• None of these → 위의 둘 중 해당하지 않는 경우 선택합니다.

 

3) Which framework do you use?: 프로젝트가 사용하고 있는 프레임워크를 선택

4) Does your project use TypeScript?: TypeScript를 사용하는지 여부를 선택

5) Where does your code run?: 코드가 실행되는 환경을 선택

까지 진행하면 ESLint 설치가 완료되었습니다.

이후 최신버전이라면 eslint.config.js  파일이, 이전버전이라면 . eslintrc.json파일이 생성됩니다.

eslint.config.js (최신 방식)

- ESLint v8.21.0 이상부터 권장되는 설정 파일입니다.
-  JavaScript로 작성되기 때문에 더 유연한 설정이 가능합니다.
-  조건부 설정, 변수 사용, 모듈 불러오기 등이 가능해 확장성이 높습니다.

// eslint.config.js 파일 예시
export default [
  {
    files: ["**/*.js", "**/*.jsx"],
    languageOptions: {
      ecmaVersion: 2021,
      sourceType: "module",
    },
    rules: {
      "no-unused-vars": "warn",
      "no-console": "off",
      "eqeqeq": "error",
    },
  },
];

 

.eslintrc.json (이전 방식)

- JSON 형식으로 작성된 설정 파일입니다.
-  단순한 구조이지만, 복잡한 로직을 처리하기 어렵습니다.
-  여전히 많은 프로젝트에서 사용 중이며, 하위 호환성을 위해 지원됩니다.

// .eslintrc.json 파일 예시
{
  "env": {
    "browser": true,
    "es2021": true
  },
  "extends": ["eslint:recommended"],
  "parserOptions": {
    "ecmaVersion": 12
  },
  "rules": {
    "no-unused-vars": "warn",
    "no-console": "off",
    "eqeqeq": "error"
  }
}

 

 

3. eslint.config.js 설정 규칙

import globals from "globals";
import pluginJs from "@eslint/js";
import pluginReact from "eslint-plugin-react";

/** @type {import('eslint').Linter.Config[]} */
export default [
  {
    files: ["**/*.{js,mjs,cjs,jsx}"], // 어떤 파일에 적용할지 설정
    languageOptions: {
      globals: globals.browser, // 브라우저 전역 변수 인식
    },
    rules: {
      "no-unused-vars": "warn",      // 사용하지 않는 변수 경고
      "no-console": "off",           // console.log 허용, warm 경고
      "eqeqeq": "error",             // === 사용 강제
      "curly": "error",              // 모든 제어문에 중괄호 사용 강제
      "quotes": ["error", "single"], // 작은따옴표 사용 강제
      "indent": ["error", 2],         // 들여쓰기 2칸 설정
      "react/prop-types": "off"       // React PropTypes 검사 비활성화
    },
  },
  pluginJs.configs.recommended, // JavaScript 기본 권장 설정
  pluginReact.configs.flat.recommended, // React 권장 설정
];

 

" 🔍 자주 사용하는 ESLint 규칙 "

• no-undef: 정의되지 않은 변수 사용 금지
• no-multiple-empty-lines: 빈 줄 2개 이상 금지
• brace-style: 중괄호 스타일 통일
• comma-dangle: 마지막 쉼표 사용 규칙 설정
• max-len: 한 줄의 최대 길이 제한

더 많은 규칙들은 Prettier Options를 참고하면 됩니다.

---

02

Prettier

Prettier는 코드 스타일을 자동으로 정리해 주는 도구입니다.

들여 쓰기, 따옴표, 줄 바꿈 등 코드 형식을 일관되게 유지할 수 있습니다.

1. Prettier의 장점

• 코드의 가독성을 높이고 유지보수를 용이하게 합니다.
• 팀원 간 스타일 충돌을 방지합니다.
• 저장할 때 자동으로 포맷팅 할 수 있습니다.

2. 설치 및 기본 설정

아래의 명령어로 prettier를 설치할 수 있습니다.

npm install --save-dev prettier

 

그리고. prettierrc 파일을 생성하여 설정합니다.

 

{
  "semi": true,            // 세미콜론 사용 여부
  "singleQuote": true,     // 작은따옴표 사용 여부
  "useTabs": false,       // 탭 대신 공백으로 들여쓰기
  "tabWidth": 2,           // 탭 너비 설정
  "trailingComma": "es5", // 마지막 쉼표 설정
  "printWidth": 80,        // 한 줄의 최대 길이
  "bracketSpacing": true,  // 중괄호 간 공백 사용
  "arrowParens": "avoid"   // 화살표 함수 괄호 사용 규칙
  "endOfLine": "auto"      // OS에 따른 코드라인 끝 처리 방식 사용
}

 

" 🔍 자주 사용하는 Prettier 설정 옵션 "

• jsxSingleQuote: JSX에서도 작은따옴표 사용
• proseWrap: 마크다운 줄 바꿈 규칙 설정
• embeddedLanguageFormatting: HTML, CSS 코드 포맷팅 설정

---

03

ESLint + Prettier 함께 사용하기

둘을 함께 사용하면 코드 품질과 스타일을 동시에 관리할 수 있습니다.

1. 설치 및 기본 설정

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

 

eslint.config.js 파일에 다음 설정을 추가합니다:

import prettierPlugin from "eslint-plugin-prettier";

export default [
  {
    rules: {
      "prettier/prettier": "error" // Prettier 포맷팅 규칙을 ESLint에 적용
    }
  },
  prettierPlugin.configs.recommended
];

 

이렇게 하면 ESLint가 코드 오류를, Prettier가 코드 스타일을 관리합니다.

2. 규칙 충돌 방지하기: extends 설정의 중요성

extends는 ESLint 설정에서 기존에 정의된 규칙 세트를 불러와 적용하는 부분입니다.

여러 규칙 세트를 함께 사용할 수 있으며, 적용 순서가 매우 중요합니다.

 

extends는 위에서 아래로 순서대로 적용되며, 뒤에 있는 설정이 앞의 설정을 덮어씁니다.

extends: ['airbnb-base', 'prettier']

이 설정은 다음과 같은 의미를 가집니다:

 

" airbnb-base "

• Airbnb의 자바스크립트 스타일 가이드를 기반으로 한 규칙을 적용합니다.
• Airbnb는 전 세계적으로 많이 사용되는 엄격한 코드 스타일 가이드입니다.
• 엄격한 코드 품질 유지와 협업 효율성을 높이는 데 효과적입니다.

" prettier "

• Prettier와 충돌할 수 있는 ESLint 규칙을 비활성화합니다.
• ESLint는 코드 품질 검사를, Prettier는 코드 포맷팅을 담당합니다.
• 두 도구가 충돌할 수 있는 부분(예: 들여 쓰기, 따옴표 사용 등)을 Prettier의 규칙으로 덮어쓰게 됩니다.

 

해당코드는 이렇게 작동됩니다.

 

• Airbnb 규칙이 먼저 적용되어 코드를 검사합니다.
• 이후 Prettier가 적용되어 Airbnb와 충돌하는 스타일 규칙(들여 쓰기, 따옴표 등)을 비활성화합니다.

 

---

04

Tailwind CSS와 함께 사용하기

Tailwind CSS를 사용할 경우, 클래스 이름 길이나 포맷 문제로 ESLint와 Prettier 설정이 충돌할 수 있습니다.

이를 방지하기 위해 추가 설정이 필요합니다.

Tailwind CSS 설정 방법

npm install -D eslint-plugin-tailwindcss prettier-plugin-tailwindcss

 

eslint.config.js 파일에 Tailwind 플러그인을 추가합니다

import tailwindcss from "eslint-plugin-tailwindcss";

export default [
  {
    plugins: {
      tailwindcss,
    },
    rules: {
      "tailwindcss/classnames-order": "warn", // Tailwind 클래스 순서 경고
    },
  }
];

 

.prettierrc 파일에 추가 설정을 적용합니다.

 

{
  "plugins": ["prettier-plugin-tailwindcss"]
}

---

05

마무리

ESLint와 Prettier는 코드의 오류를 방지하고, 깔끔한 스타일을 유지하는 데 필수적인 도구입니다.

Tailwind CSS까지 통합하면 더욱 효율적인 개발 환경을 만들 수 있습니다.

 

간단한 설정으로 코드 품질과 가독성을 높여보세요!