[NextJS] prettier 기본 설정

prettier

코드 스타일을 자동으로 정리하여 가독성을 높이고 유지 보수성을 향상시키는 데 사용되는 코드 품질 향상을 위한 도구입니다. 공통적인 코드 스타일 적용을 통해 개발자 사이에 불필요한 코드 스타일에 대한 갈등을 사전에 차단하는 도구가 되기도 합니다(가독성과 코드 품질 향상은 덤).

 

prettier 패키지 설치

// 언제나 최신 버전으로

npm install --save-dev prettier

혹은

// 언제나 현재 버전으로 고정

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

 

npm install --save-dev --save-exact prettier 명령어는 프로젝트에서 Prettier를 사용하기 위해 필요한 패키지를 설치하는 명령어입니다.

• --save-dev: 패키지를 devDependencies에 설치합니다. devDependencies는 개발 중에만 필요한 패키지를 관리하는 데 사용됩니다.
• --save-exact: 설치된 패키지 버전을 package.json 파일에 고정합니다. --save-exact 플래그를 사용하지 않으면, 패키지를 설치할 때마다 최신 버전이 설치되어 프로젝트가 예기치 않게 변경될 수 있습니다.
• prettier: Prettier 패키지를 설치합니다. Prettier는 코드 스타일을 자동으로 정리해주는 도구로, 코드 포맷팅을 통해 일관성 있게 유지할 수 있습니다.

 

따라서, 위의 명령어를 사용하여 Prettier를 설치하면 프로젝트에서 코드 포맷팅을 자동으로 수행할 수 있습니다. --save-exact 플래그를 사용하여 설치된 패키지 버전을 고정하면, 프로젝트가 업데이트되더라도 Prettier 패키지의 버전이 변경되지 않아 코드 포맷팅이 유지될 수 있습니다.

---

prettier 설정 파일 생성

Prettier 설정 파일을 생성합니다. .prettierrc 또는 .prettierrc.json 파일을 프로젝트 루트 폴더에 생성합니다.

예를 들어, 아래와 같은 설정을 갖는 .prettierrc 파일을 만들 수 있습니다.

 

{
  "semi": true,  // 세미 클론 사용
  "singleQuote": true, // '글자' 형식 사용
  "tabWidth": 2 // Tas 넓이 를 2로 지정
}

문자셋이 UTF-8 로 명시되어 있는지 확인해야 합니다. 안 그러면 예기치 못한 에러가 발생할 수 있습니다.

 

>> 그 외 옵션들 

옵션	설명
arrowParens	화살표 함수의 괄호 사용 방식입니다. avoid, always, only-multiline 중 하나를 지정할 수 있습니다.
bracketSpacing	객체 리터럴의 괄호에 공백 삽입 여부입니다. true, false 중 하나를 지정할 수 있습니다.
endOfLine	줄 끝의 구분자를 지정합니다. lf, crlf, cr 중 하나를 지정할 수 있습니다.
htmlWhitespaceSensitivity	HTML 공백 감도를 지정합니다. css, strict 중 하나를 지정할 수 있습니다.
jsxBracketSameLine	JSX의 마지막 >를 다음 줄로 내릴지 여부입니다. true, false 중 하나를 지정할 수 있습니다.
jsxSingleQuote	JSX에 single 쿼테이션 사용 여부입니다. true, false 중 하나를 지정할 수 있습니다.
printWidth	줄 바꿈 할 폭 길이를 지정합니다.
proseWrap	markdown 텍스트의 줄바꿈 방식을 지정합니다. preserve, always, never 중 하나를 지정할 수 있습니다.
quoteProps	객체 속성에 쿼테이션 적용 방식을 지정합니다. as-needed, consistent, preserve 중 하나를 지정할 수 있습니다.
semi	세미콜론 사용 여부입니다. true, false 중 하나를 지정할 수 있습니다.
singleQuote	single 쿼테이션 사용 여부입니다. true, false 중 하나를 지정할 수 있습니다.
tabWidth	탭 너비를 지정합니다.
trailingComma	여러 줄을 사용할 때, 후행 콤마 사용 방식을 지정합니다. none, es5, all 중 하나를 지정할 수 있습니다.
useTabs	탭 사용 여부입니다. true, false 중 하나를 지정할 수 있습니다.

---

prettier 실행 스크립트 추가

package.json 파일에 Prettier 실행 스크립트를 추가합니다. 현재 예시에서는 format 을 사용하면 바로 결과가 파일에 반영되도록 하였지만, --write 자리에 --check 옵션으로 대체하면, 곧바로 반영하지 않고 포맷이 필요한 파일의 경로를 체크해주게 됩니다.

 

즉, 필요에 따라서 "format:", "format:fix" 형식으로 구분해서 스크립트를 구성하면 각각 확인과 반영 동작을 구분하여 실행할 수도 있습니다.

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

 

 

--write 옵션은 Prettier가 포맷팅한 결과를 파일에 반영(쓰도록) 하는 옵션입니다.

--ignore-path .gitignore . 는 git 으로 관리 되지 않은 .gitignore 에 설정된 파일들은 포맷 대상이 아님을 설정하는 옵션입니다.

 

---

코드 포맷팅(prettiler 설행)

npm run format

 

---

 

[NextJS] eslint 설정(prettier와 충돌방지)