VS Code에서 기본 포매터를 더 예쁘게 만드는 방법

Prettier는 요즘 대세 코드 포맷터로, 코드를 일일이 수동으로 수정하지 않고도 보기 좋게 만들어 줍니다. VS Code에서 기본 포맷터로 설정하면 저장할 때마다 자동으로 코드 포맷을 적용해 주니 번거롭지 않습니다.혹시 스타일이 일관적이지 않아서 불편했거나 작업 흐름을 간소화하고 싶으신가요? 그렇다면 이 기능이 딱입니다.제가 직접 사용해 본 경험은 다음과 같습니다.시간 절약에 도움이 되기를 바랍니다.

1단계: Prettier 확장 프로그램 설치

먼저 플러그인이 필요합니다. VS Code를 열고 사이드바에 있는 사각형 아이콘인 확장 프로그램Ctrl 아이콘을 클릭하거나, + Shift+를 눌러 P확장 프로그램 설치를 검색하세요.검색창에 입력하세요. Eben Peterson의 ” Prettier – Code formatterPrettier “를 찾으세요.“설치”를 클릭하세요.어떤 환경에서는 문제없이 설치되지만, 어떤 환경에서는 재시작이나 새로 고침을 해야 작동할 수 있습니다.

2단계: 사용자 설정에 액세스

설치 후 VS Code에서 Prettier를 기본적으로 사용하도록 설정해야 합니다.Ctrl+ Shift+ P( Mac에서는 Cmd+ Shift+ )를 누르고 입력 하고 선택하세요.그러면 settings.json 파일이 열립니다. GUI 파일이 아니라 원시 텍스트 파일입니다. VS Code가 충돌할 수 있는 이전 설정을 기본값으로 사용하는 경우가 있기 때문입니다.PPreferences: Open User Settings (JSON)

3단계: Prettier를 기본 포맷터로 구성

해당 JSON 파일에 다음 줄을 추가합니다.

 "editor.defaultFormatter": "esbenp.prettier-vscode", "editor.formatOnSave": true

이렇게 하면 VS Code에 “내가 항목을 포맷할 때마다 Prettier를 사용하세요”라고 알려주고, “저장할 때마다 자동으로 포맷하세요”라고 알려주는데, 이는 엄청난 시간을 절약해줍니다.

이 설정은 기존 설정 중 일부를 덮어쓸 수 있으니, 추가하거나 신중하게 병합하세요.이 설정이 즉시 적용되지 않는 경우도 있으므로, VS Code를 다시 시작해 보는 것이 좋습니다.

4단계: 설정 저장

Ctrl+ S(또는 Cmd+ ) 를 눌러 S이 구성을 저장하세요.설정 탭을 닫으세요.그리고 JSON에서 해당 줄이 올바르게 형식화되었는지 확인하세요.때로는 대괄호나 쉼표가 누락되어 문제가 발생할 수 있습니다.네, VS Code는 까다롭습니다.

5단계: JavaScript 파일로 Prettier 테스트

다음으로, 지저분한 JavaScript 파일을 열거나 만들어 보세요.무작위 코드를 작성하고, 마치 어린아이 그림처럼 보이도록 만들어 보세요.이제 변수를 변경하고 공백을 추가하는 등 간단한 수정을 한 후 저장( Ctrl+ S)을 눌러보세요.모든 것이 정상적으로 진행되면 Prettier가 자동으로 실행되어 코드를 정리할 것입니다.그렇지 않은 경우, formatOnSave설정이 활성화되어 있고 구성 JSON에 구문 오류가 없는지 다시 한번 확인하세요.경우에 따라 새 설정을 인식하려면 VS Code를 다시 로드하거나 재시작해야 할 수도 있습니다.처음에는 작동하지 않다가 재시작 후 갑자기 완벽하게 작동하는 경우가 있는데, 이는 다소 이상합니다.

추가 팁 및 일반적인 문제

또 다른 방법은 충돌하는 설정을 확인하는 것입니다.작업 공간 설정이 사용자 설정보다 우선하는 경우가 있습니다.파일 > 환경 설정 > 설정Prettier 으로 이동하여 구성 또는.config 파일 을 찾아보세요.서식이 불안정하다면 프로젝트 루트에 원하는 규칙을 담은 `.prettierrc`formatOnSave 파일을 추가하는 것이 좋습니다.이렇게 하면 Prettier가 사용자가 원하는 대로 동작하도록 할 수 있습니다.

요약

VS Code 마켓플레이스에서 Prettier 확장 프로그램을 설치합니다.
사용자 설정 JSON을 열고 포매터 구성을 추가합니다.
저장할 때 자동으로 서식을 지정하려면 formatOnSave를 true로 설정합니다.
지저분한 파일로 테스트하여 자동으로 정리되는지 확인하세요.

누군가에게는 몇 시간이라도 단축될 수 있기를 바랍니다.물론 VS Code는 기본값과 설정이 충돌하는 경우가 많기 때문에 필요 이상으로 어렵게 만들어야 하니까요.하지만 제대로 설정하고 나면 순조롭게 진행될 겁니다.도움이 되기를 바랍니다.