image

Next.js에 Prettier 적용하기

태그
DevNext.js
상세설명Next.js에 Prettier 적용하기
작성일자2024.06.23

프로젝트 시작 시 Prettier 설정하는 방법에 대해 정리했다.

Prettier 설치

npm install --save-dev prettier

프로젝트 루트에  .prettierrc / .prettierrc.js 파일 추가

module.exports = {
  printWidth: 200,
  tabWidth: 2,
  bracketSpacing: true,
  arrowParens: 'always',
  semi: true,
  singleQuote: true,
  trailingComma: 'all',
  endOfLine: 'auto',
  singleAttributePerLine: true,
};
  • semi: false - 세미콜론을 사용하지 않는다.
  • singleQuote: true - 문자열을 표현할 때 싱글 쿼트를 사용
  • trailingComma: 'all’ - 가능한 모든 곳에 후행 쉼표를 추가한다. (ex. const obj = {a: 1,b: 2,})
  • useTabs: false - 탭 대신 스페이스를 사용
  • tabWidth: 2 - 들여쓰기 할 때 사용하는 스페이스의 개수를 2칸으로 설정
  • printWidth: 200 - 한 줄의 최대 길이를 200자로 설정함. 이 길이를 초과하면 줄바꿈을 한다.
  • arrowParens: 'always’ - 화살표 함수의 매개변수에 항상 괄호를 사용 (ex. const func = (x) => x + 1)
  • bracketSpacing: true - 객체 리터럴의 중괄호 양 옆에 공백을 추가합니다.
  • endOfLine: 'auto’ - 파일의 끝 줄바꿈을 자동으로 감지하고 설정합니다. 운영 체제에 따라 다른 줄바꿈을 사용할 때 유용합니다.
  • singleAttributePerLine: true - HTML, JSX, Vue 등의 태그에 하나의 속성만 한 줄에 위치하도록 설정

    • 스크립트 설정 (package.json)

    — ignore-path 옵션으로 .gitignore 파일을 선택함으로써, Git으로 관리하지 않는 파일들은 검사하지 않도록 설정한 스크립트

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

    Prettier적용

    기존 파일들에 프리티어 적용 하기 위해서 터미널에  npm run format 실행 후 wraning이 나온다면 npm run format:fix 실행한다.

    그 후 npm run format 실행 후 All matched… 가 나오면 성공했다.

    이전 포스트

    React.memo, useMemo, useCallba...

    다음 포스트

    react-idle-timer (로그인 연장 버튼)