[Next.js] Prettier

블로그 리스트

이 블로그 포스트는 시리즈로 제작되었습니다. 다음은 Next.js의 시리즈 리스트입니다.

개요

이번 블로그 포스트에서는 TypeScript를 기반으로 하는 Next.js 프로젝트에 Prettier를 적용하는 방법에 대해서 알아보겠습니다. Prettier는 코드 포멧터(Code formatter)로써, 코드의 스타일을 일관성있게 관리할 수 있도록 도와줍니다.

Prettier: https://prettier.io/

여기서 소개한 소스코드는 아래에 링크를 통해 확인할 수 있습니다.

GitHub: https://github.com/dev-yakuza/study-nextjs/tree/main/3.prettier

TypeScript 기반 Next.js 프로젝트 생성

TypeScript가 적용된 Next.js에서 Prettier를 사용하는 방법을 확인하기 위해, 다음 명령어를 실행하여 TypeScript가 적용된 Next.js 프로젝트를 생성합니다.

npx create-next-app --typescript my-app

Prettier 설치

다음 명령어를 실행하여 Prettier를 설치합니다.

npm install --save-dev prettier

Prettier 설정

이제 설치한 Prettier를 사용하기 위한 설정할 필요가 있습니다. .prettierrc.js 파일을 생성하고 다음과 같이 수정합니다.

module.exports = {
  semi: false,
  singleQuote: true,
  trailingComma: 'all',
}

semi: false: Next.js는 기본적으로 마지막 세미콜론(;)을 사용하지 않습니다.
singleQuote: true: Next.js는 기본적으로 작은 따옴표(')를 사용합니다.
trailingComma: ‘all’: 변경 사항을 최소화하기위해, 콤마를 추가할 수 있으면, 마지막에 콤마를 추가하도록 합니다.

스크립트 설정

이렇게 설정한 Prettier를 사용하기 위해 package.json 파일을 열고 다음과 같이 스크립트를 추가합니다.

"scripts": {
  ...
  "format": "prettier --check --ignore-path .gitignore .",
  "format:fix": "prettier --write --ignore-path .gitignore ."
},

--ignore-path 옵션으로 .gitignore 파일을 선택함으로써, Git으로 관리하지 않는 파일들은 검사하지 않도록 설정하였습니다.

실행

이제 다음 명령어를 사용하여 앞에서 설정한 Prettier의 내용을 검사합니다.

npm run format

만약, 설정한 Prettier 옵션에 위반이 되는 파일이 있으면, 다음과 같이 표시됩니다.

Checking formatting...
[warn] .prettierrc.js
[warn] pages/api/hello.ts
[warn] Code style issues found in the above file(s). Forgot to run Prettier?

다음 명령어를 실행하여, 위반된 파일을 수정할 수 있습니다.

npm run format:fix

모든 파일이 수정되었다면, 다시 다음 명령어를 실행하여 검사합니다.

npm run format

모든 파일이 잘 수정되었다면, 다음과 같은 결과가 표시됩니다.

Checking formatting...
All matched files use Prettier code style!

완료

이번 블로그 포스트에서는 Next.js 프로젝트에 Prettier를 설정하는 방법에 대해서 알아보았습니다. 저는 VSCode를 사용하고, Prettier 플러그인을 사용하는데, 저장할 때마다, 세미콜론과 큰따옴표가 자동으로 생성되어 불편함을 겪었습니다. 그래서 Next.js에 Prettier를 적용하는 방법에 대해서 알아보았습니다. 여러분도 저와 같은 문제를 겪고 계신다면, Next.js 프로젝트에 Prettier를 적용해 보시기 바랍니다.