[VSCode,Cursor] 자동 포맷팅 안될 때 해결 방법 - Prettier, ESLint 설정

새 맥북을 세팅하거나 VSCode/Cursor를 새로 설치한 후 자동 포맷팅이 안 되는 문제를 겪고 계신가요? 한 번 설정해두면 몇 년간 잊고 지내다가, 막상 필요할 때 기억이 안 나는 것이 바로 이런 설정들입니다. 

 

바로 본론으로 들어가면

자동 포맷팅이 안 되는 이유

대부분 다음 3가지 입니다:

1. Extension을 설치하지 않음 (Prettier, ESLint)
2. Format on Save 설정이 꺼져있음
3. Default Formatter가 설정되지 않음

해결 방법

1. 필수 Extension 설치

Cmd + Shift + X로 Extension 패널을 열고 다음을 설치:

• Prettier - Code formatter
• ESLint

2. VSCode 설정 변경

방법 1: UI로 설정

Cmd + ,로 설정을 열고:

1. "format on save" 검색 → 체크박스 활성화
2. "default formatter" 검색 → "Prettier - Code formatter" 선택

방법 2: settings.json 직접 수정

Cmd + Shift + P → "Preferences: Open Settings (JSON)" 선택 후 추가:

 

 

json

{
  "editor.defaultFormatter": "esbenp.prettier-vscode",
  "editor.formatOnSave": true,
  "editor.codeActionsOnSave": {
    "source.fixAll.eslint": "explicit"
  }
}

3. 프로젝트에 설정 파일 추가

프로젝트 루트에 .prettierrc 파일 생성

 

4. 작동확인 및 재실행

물론 바로 적용되긴 하지만 혹시나 위 세팅을 했음에도 안 된다면 editor tool을 껐다 켜보세요

 

여전히 안 된다면?

• Extension이 활성화되어 있는지 확인
• 다른 포맷터 Extension(Beautify 등)이 있다면 비활성화
• .vscode/settings.json이 있다면 확인 (프로젝트 설정이 전역 설정보다 우선)

---

이제 파일을 저장할 때마다 자동으로 코드가 정리됩니다. 몇 년 뒤 다시 세팅할 때 이 글을 찾아보시길 바라며, 저처럼 고생하지 마시길 바랍니다!