Prettier, ESLint 제대로 알고 사용하자

목적

최근 프로젝트를 진행할 때마다 초기 세팅이 매우 번거롭게 느껴져서, 나만의 프로젝트 템플릿을 만들어봤다. 결과물에는 만족했지만, 그 과정에서 가장 힘들었던 부분이 바로 오늘 소개할 Prettier와 ESLint였다.

지금까지 프로젝트 세팅을 직접 해본 경험이 많지는 않지만, 할 때마다 최소한의 설정만 하거나 다른 사람의 설정을 그대로 복사하거나, AI에게 부탁해 처리하곤 했다. 그래서 기초적인 부분 외에는 제대로 알고 있는 게 거의 없었다.

그래서 이번에 나만의 프로젝트 템플릿을 만든 것을 계기로 Prettier와 ESLint에 대해 정확히 이해하고, 이를 블로그에 정리해보려고 한다.

Prettier란?

Prettier는 이름 그대로 코드를 더 보기 좋게 포맷팅해주는 도구이다. 기능 구현과 직접적인 관련은 없지만, 일관된 스타일로 코드를 작성하도록 도와주는 코드 포매터이다.

탭 간격, 세미콜론, 따옴표 등 코드 작성과 관련된 부분들을 일관성 있게 같은 스타일로 맞춰준다.

사용법

1. 익스텐션 설치

VS Code에서 Prettier 익스텐션만 설치하면, 별도의 플러그인 없이도 VS Code 에디터 환경 자체에 Prettier 규칙이 적용된다. 이 경우 익스텐션에 설정된 Prettier 규칙이 프로젝트에 적용된다.

설치 후, VS Code 설정에서 Default Formatter를 Prettier - Code formatter로 지정하고, Format On Save 옵션을 활성화하면 저장할 때 자동으로 코드가 포맷팅된다.

2. Prettier 설치

Prettier를 프로젝트에 직접 설치해두면, 어떤 개발 환경에서도 동일한 Prettier 규칙을 적용할 수 있어 협업 시 일관된 코드 스타일을 유지할 수 있다.

NPM

npm install -D prettier

Yarn

yarn add -D prettier

PNPM

pnpm add -D prettier

3. .prettierrc 설정 파일 작성

프로젝트 루트에 .prettierrc 파일을 생성해 자신의 코드 스타일에 맞게 설정하면 된다.

예시 설정:

{
  "printWidth": 100,       // 한 줄에 최대 100자까지 허용
  "trailingComma": "all",  // 가능한 모든 위치에 후행 쉼표 삽입 (객체, 배열, 함수 인자 등)
  "tabWidth": 2,           // 들여쓰기 시 2칸 공백 사용
  "semi": true,            // 문장 끝에 항상 세미콜론 추가
  "singleQuote": true,     // 문자열에 작은따옴표(') 사용
  "bracketSpacing": true,  // 객체 리터럴 중괄호 안에 공백 추가: { foo: bar }
  "arrowParens": "always", // 화살표 함수 인자에 괄호 항상 사용: (x) => x
  "useTabs": false,        // 탭 대신 공백 사용
  "endOfLine": "lf"        // 줄바꿈 문자로 LF(\n) 사용 (유닉스 스타일)
}

위 설정은 단순히 코드 스타일에 관한 부분이니, 본인의 취향에 맞게 자유롭게 변경해도 무방하다.
각 옵션에 대한 더 자세한 설명은 Prettier 공식 문서를 읽어보는 걸 추천한다.

4. 포맷팅

아래 코드를 위에서 보여준 Prettier 설정을 기준으로 포맷팅해보겠다.

포맷팅 전:

const sayHello= (name)=>{console.log("Hello, "+ name)}
const users=[{id:1,name:"Alice"},{id:2,name:"Bob"}]
function sum ( a , b ){return a+b}

포맷팅 후 (Prettier 적용):

const sayHello = (name) => {
  console.log('Hello, ' + name);
};

const users = [
  { id: 1, name: 'Alice' },
  { id: 2, name: 'Bob' },
];

function sum(a, b) {
  return a + b;
}

위와 같이 Prettier 설정에 따라 코드 스타일이 일관되게 정리된다. 작은 따옴표, 세미콜론, 들여쓰기, 괄호 사용 등 여러 스타일 규칙들이 적용되어 가독성 높은 코드로 바뀌는 것을 확인할 수 있다.

ESLint란?

ESLint는 EcmaScript와 Lint를 합친 단어다. 여기서 Lint란, 에러가 있는 코드에 경고나 표시를 달아주는 도구를 의미한다.

린트(lint) 또는 린터(linter)는 소스 코드를 분석하여 프로그램 오류, 버그, 스타일 오류, 의심스러운 구조체에 표시(flag)를 달아놓기 위한 도구들을 가리킨다. 이 용어는 C 언어 소스 코드를 검사하는 유닉스 유틸리티에서 기원한다. - 위키백과

즉, ESLint는 자바스크립트 문법 오류나 잠재적인 버그가 있는 코드에 경고를 표시해주는 분석 도구이다.

사용법

1. 익스텐션 설치

VS Code 등 에디터에서 실시간으로 ESLint 기능을 사용하려면, ESLint 익스텐션을 설치해야 한다. 이를 통해 코드 작성 중에도 문법 오류나 스타일 문제를 즉시 확인할 수 있다.

2. ESLint 설치

ESLint를 프로젝트에 직접 설치하면, 프로젝트마다 규칙과 버전을 고정할 수 있어 팀원 모두 동일한 룰과 환경에서 일관된 코드 작성이 가능해진다.

NPM

npm install -D eslint

Yarn

yarn add -D eslint

PNPM

pnpm add -D eslint

3. .eslintrc 설정 파일 작성

프로젝트 루트에 .eslintrc 파일을 생성하고, 자신의 코드 스타일이나 규칙에 맞게 설정할 수 있다.

예시 설정:

{
  "env": {
    "browser": true,         // 브라우저 전역 객체(window, document 등)를 사용할 수 있게 설정
    "es2021": true           // 최신 ECMAScript 2021 문법을 사용 가능하게 설정
  },
  "extends": [
    "eslint:recommended"     // ESLint에서 권장하는 기본 규칙 세트 적용
  ],
  "parserOptions": {
    "ecmaVersion": "latest", // 최신 ECMAScript 문법을 분석할 수 있게 설정
    "sourceType": "module"   // ES 모듈(import/export)을 사용할 수 있게 설정
  },
  "rules": {}                // 필요한 경우 커스텀 규칙을 여기에 추가
}

이 설정대로 사용하면, 기본적인 문법 오류나 사용되지 않는 변수, 선언되지 않은 변수 등 잠재적인 버그 위주의 검사가 진행된다.

4. 린팅

린팅 전 코드:

const name = 'Junyeon'

function greet() {
  console.log('Hello ' + name)
}

greet()

ESLint 경고 예시:

• name이 정의되었지만 사용되지 않았다면 → no-unused-vars 경고 발생
• 세미콜론(;)이 없을 경우 → semi 관련 경고 발생 (※ 기본 설정에는 없음)
• console.log 사용 시 → no-console 경고 발생 가능 (※ eslint:recommended에는 미포함)

마무리

오늘은 이제는 없으면 불편한 도구가 되어버린 Prettier와 ESLint에 대해 간단하게나마 정리해보았다. 프로젝트를 진행할 때마다 늘 사용해오던 도구들이었지만, 이렇게 직접 설정하고 구조를 이해하려고 하니 그동안 무심코 넘겼던 부분들이 많았다는 걸 느꼈다.

특히 ESLint는 더 깊이 있는 내용도 함께 소개하고 싶었지만, 아직 공부가 부족해서 기본적인 내용만 다루게 되었다. 앞으로 더 공부하면서 다양한 플러그인, 설정 팁, 실무 적용 사례 등을 익힌 뒤에 이 글도 차차 업데이트해나가야겠다.