[vscode] Prettier 설정

Prettier란?

모든 출력 코드가 일관된 코드 스타일을 준수하도록 보장한다.

Prettier와 ESLint의 차이는?

Linter(코드 검사 도구들)에는 두 가지 규칙이 있다.

• 서식 규칙 : 예: 최대 길이, 공백과 탭 혼합 금지 등
• 코드 품질 규칙 : 예: no-unused-vars, no-implicit-globals

즉, Prettier를 사용해 공통 서식 포맷을 지정 하고 linter를 사용해 버그를 잡는다.

익스텐션 설정

좌측 하단 톱니바퀴를 클릭 - 설정 클릭.

단축키는 Ctrl + ,

format을 검색해서 Editor: Default Formatter를 찾는다.

Prettier - Code formatter로 설정한다.

Format On Save를 검색해서 체크한다.

.prettierrc 파일로 공통 서식 설정

prettier를 설치한다.

// npm
npm install --save-dev --save-exact prettier

// yarn
yarn add --dev --exact prettier

• --save-dev : prettier 패키지가 package.json 파일의 devDependencies 부분에 추가된다.
• devDependencies는 실제로 실행될 때는 필요하지 않고, 개발 과정에서만 필요한 도구나 라이브러리를 의미한다.
• --save-exact : package.json 파일에 "prettier": "2.8.0" 같은 형식으로 설치된 버전이 정확히 기록된다.

제대로 설치가 됐다면 package.json의 devDependencies항목에서 확인할 수 있다.

.prettierrc 파일을 루트 폴더에 생성 후 prettier 세부 설정을 작성한다.

각 세부 옵션에 대한 것은 prettier 공식문서 옵션을 참고한다.

익스텐션 설치 후 .prettierrc 파일이 없어도
Prettier는 기본 설정값을 사용해 포맷팅 기능을 작동시킨다.
하지만 협업시 특정한 포맷팅 규칙이 필요하다면
.prettierrc 파일을 만들어 설정을 명시해주는 것이 좋다.

.prettierignore 파일로 포맷팅 제외 설정

Prettier가 특정 파일이나 폴더를 포맷팅하지 않도록 하기 위해 사용한다.

루트 디렉토리에 .prettierignore파일을 생성한다.

사용법은 .gitignore와 같다.

# 디렉토리 제외
build/
node_modules/

# 특정 파일 제외
src/legacyCode.js
public/index.html

정리

1. Visual Studio Code에서 Extensions 탭을 열고 "Prettier - Code formatter"를 검색하여 설치한다.
2. 설정 메뉴로 이동하여 "Preferences > Settings"를 선택한다.
3. 설정 화면에서 "Editor: Default Formatter" 옵션을 찾아 "Prettier - Code formatter"로 설정한다.
   • 다양한 코드 포맷터 중 Prettier를 기본으로 설정하는 단계다.
4. 설정 화면에서 "Format On Save" 옵션을 찾아 체크한다.
   • 파일을 저장할 때마다 자동으로 코드가 정리된다.
5. 터미널에서 prettier를 설치한 후 .prettierrc 파일을 생성한다.
   • 코드 스타일 옵션을 상세하게 설정할 수 있다.

 

참고자료

https://velog.io/@gangk_99/VS-Code-Prettier-%EC%84%A4%EC%A0%95%ED%95%98%EA%B8%B0

https://yrnana.dev/post/2021-03-21-prettier-eslint/

https://meetup.nhncloud.com/posts/243

https://prettier.io/