포맷팅(코드 자동 정렬) 프로그램 프리티어(Prettier) 설정하기

 

Visual Studio Code에서 NPM을 사용하여 Prettier를 사용하는 것은 프로젝트 전체에서 코드 일관성을 보장하는 일반적인 설정입니다. 다음은 Visual Studio Code에서 NPM을 사용하여 Prettier를 설정하고 사용하는 방법에 대한 단계별 가이드입니다.

 

굳이 NPM을 통해서 모듈로서 프리티어를 사용해야 하는 상황이 아니라면 NPM을 통한 설치 단계는 무시하고, 비주얼스튜디오코드용 익스텐션만 설치하는 방식을 취하셔도 무관합니다.

 

1단계: Prettier 설치

먼저, Prettier를 개발 의존성으로 설치해야 합니다:

npm install --save-dev prettier

2단계: Prettier 구성 파일 생성

Prettier 구성 설정을 저장하기 위해 프로젝트 루트에 .prettierrc 파일을 생성합니다. 이 파일을 통해 Prettier가 코드를 형식화하는 방법을 정의할 수 있습니다. 다음은 예제 구성입니다:

.prettierrc:

{
  "singleQuote": true,
  "trailingComma": "es5",
  "bracketSpacing": true,
  "printWidth": 80,
  "tabWidth": 2,
  "useTabs": false
}

이 구성 파일이 없더라도 파일 확장자에 따라 프리티어 기본 설정으로도 포맷팅이 진행되기도 하니, 이 부분은 참고하시기 바랍니다.

3단계: Prettier 무시 파일 생성

Prettier가 무시해야 할 파일과 디렉토리를 지정하기 위해 프로젝트 루트에 .prettierignore 파일을 생성합니다.

.prettierignore:

node_modules
build
dist

4단계: package.json에 Prettier 스크립트 추가

Prettier를 실행하기 위해 package.json에 스크립트를 추가합니다. 이를 통해 NPM 스크립트를 사용하여 코드를 형식화할 수 있습니다.

package.json:

{
  "scripts": {
    "format": "prettier --write \"src/**/*.{js,jsx,ts,tsx,html,css,md}\""
  }
}

5단계: Visual Studio Code가 Prettier를 사용하도록 구성

1. Prettier 확장 설치:
   • VS Code를 엽니다.
   • 사이드바의 확장 아이콘을 클릭하거나 Ctrl+Shift+X를 눌러 확장 뷰로 이동합니다.
   • Prettier - Code formatter를 검색하고 설치합니다.
2. Prettier를 기본 포매터로 설정:
   • VS Code 설정 파일(.vscode/settings.json)을 엽니다.
   • Prettier를 기본 포매터로 사용하고 저장 시 자동 형식화되도록 다음 설정을 추가합니다:

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

     꼭 설정 화면에서 별도로 값을 지정하지 않아도, 비주얼스튜디오코드 프롬프트 커맨드를 통해서도 기본 포맷터 지정이 가능합니다.
     또한 꼭 저장할 때 포맷팅이 되는 것이 아니라 'Alt+Shift+F' 등의 단축키나 프롬프트 커맨드를 통해서도 포맷팅이 가능합니다.
   • .vscode/settings.json:

6단계: 프로젝트에서 Prettier 사용

1. 저장 시 형식화:
   • editor.formatOnSave 설정이 활성화되어 있으면 파일을 저장할 때마다 코드가 자동으로 형식화됩니다.
2. 수동으로 형식화:
   • 에디터에서 코드나 선택 영역을 수동으로 형식화하려면 마우스 오른쪽 버튼을 클릭하고 Format Document 또는 Format Selection을 선택하거나, 명령 팔레트(Ctrl+Shift+P)를 열고 Format Document를 검색하여 사용할 수 있습니다.
3. NPM 스크립트를 통해 Prettier 실행:
   • 이전에 추가한 NPM 스크립트를 실행하여 모든 코드 파일을 형식화할 수 있습니다:
   • npm run format

예제 프로젝트 설정

다음은 예제 프로젝트 구조와 설정입니다:

my-project/
├── .prettierrc
├── .prettierignore
├── .vscode/
│   └── settings.json
├── package.json
└── src/
    ├── index.js
    ├── App.js
    └── styles.css

예제 파일

.prettierrc:

{
  "singleQuote": true,
  "trailingComma": "es5",
  "bracketSpacing": true,
  "printWidth": 80,
  "tabWidth": 2,
  "useTabs": false
}

.prettierignore:

node_modules
build
dist

package.json:

{
  "name": "my-project",
  "version": "1.0.0",
  "scripts": {
    "format": "prettier --write \"src/**/*.{js,jsx,ts,tsx,html,css,md}\""
  },
  "devDependencies": {
    "prettier": "^2.3.2"
  }
}

.vscode/settings.json:

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

결론

이 단계를 따라가면 Visual Studio Code에서 Prettier를 쉽게 설정할 수 있으며, 프로젝트 전체에서 일관된 코드 형식을 보장할 수 있습니다. 이러한 설정은 코드 품질을 유지하고 형식화에 소요되는 시간을 줄여줌으로써 코딩에 더 집중할 수 있게 해줍니다.