VS Code에서 Prettier + ESLint 함께 사용하기 (Airbnb Style 완전 세팅 가이드)

| 서론

지난 포스팅에서는 Airbnb Style에 대해서 다뤄봤다. 하나하나 규칙을 알아보는 것도 중요했지만, 일일히 하나하나씩 다 수정하기란 많은 리소스가 드는 아쉬움이 있었다.

감사하게도, 우아한테크코스를 함께 하고 있는 "김보현"님께서 공유해주신 점을 통해서 "npm run lint" 이 명령어로 한 번에 포맷팅할 수 있게 해주는 점을 유용하게 사용할 수 있게 되었다.

오늘은 어떻게 하면 되는지에 대해서 공유해보려고 한다.

| 1. Prettier와 ESLint 설치하기

터미널에서 프로젝트 루트로 이동 후 다음 명령어를 입력한다.

npm i prettier -D
npm i eslint-config-prettier -D

| 2. ESLint 설정 (.eslintrc.cjs)

프로젝트 루트에 .eslintrc.cjs 파일을 만들고 아래처럼 설정한다.

module.exports = {
  ignorePatterns: ['package*', '.npmrc', '*.md', '.*', '__tests__'],
  extends: [
    'eslint:recommended',
    'airbnb-base',
    'prettier', // ✨ prettier 규칙과 충돌하지 않게 마지막에 추가
  ],
};

: "prettier"를 맨 마지막에 추가해야 Prettier와 충돌하는 ESLint 규칙(indent, quotes, semi 등)을 비활성화한다.

| 3. Prettier 설정 (.prettierrc)

.prettierrc 파일을 생성하고, 다음 내용을 붙여넣는다.

{
  "printWidth": 80,
  "semi": true,
  "singleQuote": true,
  "tabWidth": 2,
  "trailingComma": "all"
}

: 이 설정은 Airbnb Style Guide와 동일한 스타일을 유지하면서 코드 포맷을 자동으로 맞춰줍니다.

| 4. 포맷팅 제외 파일 (.prettierignore)

프로젝트 루트에 .prettierignore 파일을 만들어 붙여넣는다

package*
.npmrc
*.md
.*
__tests__

: Prettier가 적용되지 않아야 할 파일(문서, 설정, 테스트 등)을 명시한다.

| 5. VS Code 설정하기 (자동 포맷 활성화)

이제 VS Code가 Prettier를 기본 포매터로 인식하게 설정해야 한다.

VS Code 설정(Ctrl + ,)에서 검색해도 되고, 직접 settings.json 파일에 다음을 추가해도 된다.

{
  "editor.formatOnSave": true, // 저장 시 자동 포맷팅
  "editor.defaultFormatter": "esbenp.prettier-vscode", // Prettier를 기본 포매터로 지정
  "[javascript]": {
    "editor.defaultFormatter": "esbenp.prettier-vscode"
  },
  "eslint.format.enable": true, // ESLint 자동 포맷 허용
  "editor.codeActionsOnSave": {
    "source.fixAll.eslint": true // 저장 시 ESLint 자동 수정
  }
}

: 이제 Ctrl + S만 눌러도 ESLint와 Prettier가 동시에 작동해서 자동으로 포맷팅된다.

| 6. package.json 스크립트 설정

package.json의 scripts 항목을 다음처럼 수정한다.

{
  "scripts": {
    "start": "node src/index.js",
    "test": "jest --detectOpenHandles",
    "lint": "prettier --write . && eslint --fix ."
  }
}

: npm run lint 명령어로 프로젝트 전체를 한 번에 정리할 수 있다..

| 7. 작동 테스트

이제 터미널을 열고 다음 명령어를 입력한다.

npm run lint

• Prettier가 코드 스타일을 정리하고

• ESLint가 문법 및 불필요한 코드까지 자동으로 수정합니다.

: 만약 ESLint 플러그인이 설치되어 있다면, 저장할 때 자동으로 린팅 및 포맷이 적용된다

| 8. VS Code에서 작동 확인

정상적으로 설정됐다면 파일을 저장(Ctrl + S / Cmd + S)할 때 아래 현상이 나타난다.

• 세미콜론 자동 추가

• 따옴표 자동 통일 ('')

• 들여쓰기 자동 정렬 (2 spaces)

• import 정렬 및 불필요한 코드 자동 제거

| 결론

“Prettier는 코드를 예쁘게, ESLint는 코드를 똑똑하게 만든다고 생각하면 된다.

이 둘을 VS Code에 완벽히 연결하면 코드 리뷰 전에 이미 절반은 끝나 있다고 생각한다.