WebStorm에서 Prettier 설정하는 방법

WebStorm에서 Prettier 설정하는 방법

Prettier는 코드 포매팅을 자동화하여 코드 스타일을 일관되게 유지할 수 있는 도구입니다. WebStorm은 Prettier와의 통합을 지원하며, 프로젝트 전반에 걸쳐 쉽게 적용할 수 있습니다. 이번 포스팅에서는 WebStorm에서 Prettier를 설정하는 방법을 단계별로 안내합니다.

---

1. Prettier 설치하기

먼저 Prettier를 프로젝트에 설치해야 합니다. Node.js가 설치되어 있어야 하며, 다음 단계를 따릅니다.

1.1. 프로젝트에 Prettier 설치

터미널에서 다음 명령어를 실행하여 Prettier를 프로젝트에 설치합니다.

npm install --save-dev prettier

1.2. 글로벌로 Prettier 설치 (선택 사항)

Prettier를 전역적으로 설치하려면 다음 명령어를 사용합니다.

npm install -g prettier

로컬 설치를 하는경우(기본사항)

1. 프로젝트별 버전 관리:
   •    프로젝트마다 다른 Prettier 버전을 사용할 수 있어 호환성 문제가 없습니다.
   •    팀원들과 동일한 환경을 유지할 수 있습니다.
2. 협업과 CI/CD 환경에 적합:
   •    로컬 설치로 package.json에 Prettier 의존성을 명시하면, 팀원이 프로젝트를 클론할 때 동일한 Prettier 설정을 사용합니다.

전역 설치를 하는경우

1. 간단한 개인 작업:
   •    간단히 코드 포맷팅이 필요하거나 특정 프로젝트에 의존하지 않는 작업을 할 때.
2. 테스트와 빠른 실행:
   •    CLI 명령어(prettier)를 빠르게 실행하고 싶을 때.

---

2. WebStorm에서 Prettier 플러그인 활성화

WebStorm은 Prettier 플러그인을 기본적으로 제공합니다. 다음 단계를 통해 설정을 확인합니다.

2.1. 플러그인 설정 확인

1. WebStorm 메뉴에서 File > Settings (macOS에서는 WebStorm > Preferences)로 이동합니다.
2. 왼쪽 사이드바에서 Plugins를 선택합니다.
3. Installed 탭에서 "Prettier"가 설치되어 있는지 확인합니다.
   •    설치되어 있지 않다면 Marketplace 탭에서 "Prettier"를 검색하여 설치합니다.

---

3. Prettier 설정 구성

Prettier를 WebStorm에서 사용하려면 설정을 구성해야 합니다.

3.1. Prettier 패키지 경로 지정

1. File > Settings > Languages & Frameworks > JavaScript > Prettier로 이동합니다.
2. Manual Prettier configuration으로 이동합니다.
3. Prettier package
   •    프로젝트 내에 설치한 경우: <프로젝트 경로>/node_modules/prettier
   •    글로벌 설치 경로는 Node.js 버전에 따라 다를 수 있으므로, 터미널에서 npm list -g prettier 명령어를 사용하여 확인합니다.
4. Run for files를 설정합니다. Run for files는 Prettier가 실행될 파일 형식을 지정하는 필드입니다. 여기에서 패턴을 설정하여 특정 파일만 포맷팅하거나 전체 프로젝트에 적용할 수 있습니다. Run for files에 사용할 파일 패턴 예제

React 프로젝트:

**/*.{js,jsx,ts,tsx,json,css,scss,md,html,yml,yaml}

이 패턴을 적용하면 React 프로젝트에 필요한 주요 파일들이 Prettier로 포매팅됩니다.

설명

• */*.: 프로젝트의 모든 디렉터리를 탐색합니다.
• js, jsx: JavaScript와 React JSX 파일.
• ts, tsx: TypeScript와 React TSX 파일.
• json: JSON 파일 (환경 설정이나 데이터 파일).
• css, scss: CSS 및 SCSS 파일 (스타일링 관련 파일).
• md: Markdown 파일 (README나 문서 파일).

추가적으로 적용할 수 있는 파일

React 프로젝트에서는 다음과 같은 파일 유형도 포함할 수 있습니다:

• html: HTML 파일을 포매팅하려면 html을 추가하세요.
• yaml, yml: YAML 파일도 필요하다면 포함할 수 있습니다.

참고)

Glob 패턴 설명

1. */: 프로젝트의 모든 하위 디렉터리를 탐색합니다.
2. .{js,jsx}: 특정 확장자를 가진 파일을 선택합니다.
3. *: 모든 파일을 의미합니다.

5. Run on save 체크하기 Run on save는 WebStorm에서 파일을 저장할 때 자동으로 Prettier를 실행하도록 설정하는 옵션입니다. 이 설정을 활성화하면, 코드 작성 후 저장 시 자동으로 포매팅이 적용되어 일관된 코드 스타일을 유지할 수 있습니다.

 

6. 모든 설정을 완료한 후 Apply를 눌러줍니다!