Loading...
![[GPT] PMP 시험 대비: 난이도 별 문제2](/_next/image?url=https%3A%2F%2Fd2gg9iclns4v4e.cloudfront.net%2Fimages%2Fnews%2F1731479777321_1731479777321.jpg&w=256&q=75)
[VS Code] 저장 시 자동 정렬 안 될 때 해결법
KUKJIN LEE • 1주 전 작성
VS Code에서 ESLint와 Prettier를 설치했는데 저장할 때 코드가 자동으로 정렬되지 않는 문제가 발생하면 아래 내용을 확인해서 해결할 수 있습니다.
1. VS Code 설정 확인
먼저, VS Code의 기본 설정을 확인해야 합니다. 일반적으로 Editor: Format On Save 체크 문제가 많습니다.
-
VS Code에서
Ctrl+,(Windows/Linux) 또는Cmd+,(Mac)을 눌러 설정을 엽니다. -
검색 창에 "Format On Save"를 입력합니다.
-
"Editor: Format On Save" 옵션이 체크되어 있는지 확인합니다.
2. 기본 포매터 설정
VS Code가 Prettier를 기본 포매터로 인식하고 있는지 확인합니다. 선택 안 된 경우 또는 다른 설정이 선택된 경우가 있습니다.
-
설정에서 "Default Formatter"를 검색합니다.
-
드롭다운 메뉴에서 "Prettier - Code formatter"를 선택합니다.
3. ESLint 설정 확인
ESLint가 제대로 설정되어 있는지 확인합니다.
-
프로젝트 루트 디렉토리에
.eslintrc파일이 있는지 확인합니다. -
파일 내용이 프로젝트에 맞게 올바르게 구성되어 있는지 검토합니다.
4. Prettier 설정 확인
(Extension이 아닌 파일 관리 시) Prettier 설정도 확인해야 합니다.
-
프로젝트 루트 디렉토리에
.prettierrc파일이 있는지 확인합니다. -
파일 내용이 원하는 스타일 가이드에 맞게 구성되어 있는지 검토합니다.
5. 확장 프로그램 재설치
때로는 확장 프로그램을 재설치하는 것이 도움이 될 수 있습니다. (일반적으로 위에서 전부 해결 가능합니다.)
-
VS Code에서 ESLint와 Prettier 확장을 제거합니다.
-
VS Code를 재시작합니다.
-
ESLint와 Prettier 확장을 다시 설치합니다.
6. VS Code 재시작
모든 설정을 변경한 후에는 VS Code를 완전히 재시작하는 것이 좋습니다. (여기까지 왔다는 건 어딘가 문제가 있는겁니다.)
7. 파일 유형 확인
작업 중인 파일이 ESLint와 Prettier가 지원하는 유형인지 확인합니다. 일반적으로 해당 문제가 발생할 확률은 초보 개발자가 아닌 이상 적습니다.
-
JavaScript (.js)
-
TypeScript (.ts)
-
JSX (.jsx)
-
TSX (.tsx)
-
Vue (.vue)
-
기타 지원되는 파일 확장자
8. 프로젝트 의존성 확인
마지막으로, 프로젝트의 의존성을 확인합니다.
-
package.json파일에서 ESLint와 Prettier 관련 의존성이 올바르게 나열되어 있는지 확인합니다. -
터미널에서
npm install또는yarn install을 실행하여 모든 의존성을 다시 설치합니다.