Prettier - Code Formatter 단축키로 바로 적용하는 법

안녕하세요! 오늘은 코드 포맷팅 도구인 Prettier를 단축키로 빠르게 적용하는 방법에 대해 알아보겠습니다. Prettier는 코드 스타일을 일관되게 유지해 주어 개발 효율성을 높여주는 유용한 도구입니다. 단축키를 통해 더욱 편리하게 사용할 수 있으니, 함께 살펴보도록 하겠습니다!

 

1. Prettier란?

Prettier는 JavaScript, TypeScript, HTML, CSS 등 다양한 언어를 지원하는 코드 포맷터입니다. 코드의 가독성을 높이고 팀 프로젝트에서 일관된 스타일을 유지하는 데 큰 도움이 됩니다.

2. Prettier 설치하기

2.1. Visual Studio Code에서 설치

1. VS Code 열기: Visual Studio Code를 실행합니다.
2. Extensions 메뉴 열기: 왼쪽 사이드바에서 Extensions 아이콘(사각형 네 개)을 클릭합니다.
3. Prettier 검색: 검색창에 "Prettier - Code formatter"를 입력합니다.
4. 설치: 검색 결과에서 "Prettier - Code formatter"를 찾아 설치 버튼을 클릭합니다.

2.2. 프로젝트에 Prettier 설치 (선택 사항)

프로젝트에서 Prettier를 사용할 경우, 다음 명령어로 프로젝트에 설치할 수 있습니다:

bash

npm install --save-dev prettier

이렇게 하면 팀원들이 동일한 버전의 Prettier를 사용할 수 있습니다.

3. Prettier 설정하기

3.1. 기본 설정 적용

Prettier는 기본적으로 사용할 수 있지만, 원하는 설정을 위해 .prettierrc 파일을 생성할 수 있습니다. 프로젝트 루트 디렉터리에 다음과 같은 내용을 포함한 .prettierrc 파일을 생성합니다:

json

{
  "singleQuote": true,
  "tabWidth": 2,
  "semi": true
}

위 설정은 작은 따옴표 사용, 탭 너비 2로 설정, 세미콜론 포함을 의미합니다.

3.1. VS Code 설정

1. 설정 열기: File > Preferences > Settings로 이동합니다.
2. "Format On Save" 활성화: "Editor: Format On Save" 옵션을 체크하여 파일을 저장할 때 자동으로 포맷팅되도록 설정합니다.
3. 기본 포맷터 설정: "Default Formatter"를 검색하고, "Prettier - Code formatter"를 선택합니다.

4. Prettier 단축키로 적용하기

이제 Prettier를 단축키로 쉽게 적용할 수 있습니다. 기본적으로 다음 단축키를 사용하여 포맷팅을 수행할 수 있습니다.

4.1. 기본 단축키

• Windows/Linux: Shift + Alt + F
• Mac: Shift + Option + F

위 단축키를 사용하여 현재 열려 있는 파일을 Prettier로 포맷팅할 수 있습니다.

4.2. 단축키 변경하기 (선택 사항)

원하는 단축키로 변경하고 싶다면, 다음 단계를 따르세요.

1. 단축키 설정 열기: File > Preferences > Keyboard Shortcuts로 이동합니다. 또는 Ctrl + K Ctrl + S를 눌러 단축키 설정을 엽니다.
2. "Format Document" 검색: 검색창에 "Format Document"를 입력합니다.
3. 단축키 변경: "Format Document" 항목의 연필 아이콘을 클릭한 후, 원하는 단축키를 입력하고 Enter를 누릅니다.

5. 마치며

이제 Prettier를 단축키로 빠르게 적용하는 방법을 알게 되었습니다! 코드 작성 후 바로 포맷팅을 적용하여 코드 품질을 높일 수 있습니다.

궁금한 점이나 추가적인 질문이 있다면 댓글로 남겨주세요! 행복한 코딩 되세요! 😊