[VS Code] 저장 시 자동 정렬 안 될 때 해결법

VS Code에서 ESLint와 Prettier를 설치했는데 저장할 때 코드가 자동으로 정렬되지 않는 문제가 발생하면 아래 내용을 확인해서 해결할 수 있습니다.

 

1. VS Code 설정 확인

먼저, VS Code의 기본 설정을 확인해야 합니다. 일반적으로 Editor: Format On Save 체크 문제가 많습니다.

1. VS Code에서 Ctrl+, (Windows/Linux) 또는 Cmd+, (Mac)을 눌러 설정을 엽니다.

2. 검색 창에 "Format On Save"를 입력합니다.

3. "Editor: Format On Save" 옵션이 체크되어 있는지 확인합니다.

 

2. 기본 포매터 설정

VS Code가 Prettier를 기본 포매터로 인식하고 있는지 확인합니다. 선택 안 된 경우 또는 다른 설정이 선택된 경우가 있습니다.

1. 설정에서 "Default Formatter"를 검색합니다.

2. 드롭다운 메뉴에서 "Prettier - Code formatter"를 선택합니다.

 

3. ESLint 설정 확인

ESLint가 제대로 설정되어 있는지 확인합니다.

1. 프로젝트 루트 디렉토리에 .eslintrc 파일이 있는지 확인합니다.

2. 파일 내용이 프로젝트에 맞게 올바르게 구성되어 있는지 검토합니다.

 

4. Prettier 설정 확인

(Extension이 아닌 파일 관리 시) Prettier 설정도 확인해야 합니다.

1. 프로젝트 루트 디렉토리에 .prettierrc 파일이 있는지 확인합니다.

2. 파일 내용이 원하는 스타일 가이드에 맞게 구성되어 있는지 검토합니다.

 

5. 확장 프로그램 재설치

때로는 확장 프로그램을 재설치하는 것이 도움이 될 수 있습니다. (일반적으로 위에서 전부 해결 가능합니다.)

1. VS Code에서 ESLint와 Prettier 확장을 제거합니다.

2. VS Code를 재시작합니다.

3. ESLint와 Prettier 확장을 다시 설치합니다.

 

6. VS Code 재시작

모든 설정을 변경한 후에는 VS Code를 완전히 재시작하는 것이 좋습니다. (여기까지 왔다는 건 어딘가 문제가 있는겁니다.)

 

7. 파일 유형 확인

작업 중인 파일이 ESLint와 Prettier가 지원하는 유형인지 확인합니다. 일반적으로 해당 문제가 발생할 확률은 초보 개발자가 아닌 이상 적습니다.

• JavaScript (.js)

• TypeScript (.ts)

• JSX (.jsx)

• TSX (.tsx)

• Vue (.vue)

• 기타 지원되는 파일 확장자

 

8. 프로젝트 의존성 확인

마지막으로, 프로젝트의 의존성을 확인합니다.

1. package.json 파일에서 ESLint와 Prettier 관련 의존성이 올바르게 나열되어 있는지 확인합니다.

2. 터미널에서 npm install 또는 yarn install을 실행하여 모든 의존성을 다시 설치합니다.