[Template] Prettier Template for FrontEnd Developers

Prettier은 개발할 때 있어 매우 유용하게 쓰이는 코드 품질을 책임져주는 도구들 중 하나입니다.

그리고 여기에는 프론트엔드 개발을 하고 prettier을 사용할 때 미리 커스텀을 해둘 수 있는 파일인

.prettierrc의 템플릿을 미리 만들어두었습니다.

개발 시작할 때 이 글이 많은 도움이 되길 바랍니다.

아래에는 참고하면 좋을 관련 글과 작성하는데 참고했던 프리티어 공식 문서를 두었습니다.

 

[ESLint, husky, Prettier] 당신의 코드 품질을 책임져주는 3가지 도구들

Prettier · Opinionated Code Formatter

---

 

Prettier 공식 문서를 참고해 만든 템플릿

루트 디렉토리에 [ .prettierrc ] 파일을 만든 뒤 아래 코드를 복사해 가서 입맛에 맞게 수정하고 사용하면 됩니다.

각 구문마다 설명을 달아두어 조금 더 고려하기 편하게 만들어 두었습니다.

module.exports = {
  // 기본 설정
  printWidth: 80, // 한 줄이 얼마나 길어질 수 있는지 (기본은 80자)
  tabWidth: 2, // 들여쓰기에 사용할 공백 수 (기본은 2)
  useTabs: false, // 탭 대신에 공백 사용 여부
  endOfLine: 'auto', // 줄바꿈 문자 설정 (예: 'lf', 'crlf', 'cr', 'auto')

  // JavaScript/TypeScript 설정
  semi: true, // 세미콜론 자동 삽입 여부
  singleQuote: false, // 작은따옴표 사용 여부 (기본은 큰따옴표)
  quoteProps: 'as-needed', // 객체의 속성에 따옴표 사용 여부
  bracketSpacing: true, // 객체 브라켓 사이에 공백 사용 여부
  arrowParens: 'always', // 항상 화살표 함수의 매개변수에 괄호 사용 여부
  trailingComma: 'es5', // 객체나 배열의 마지막 항목 후에 쉼표 사용 여부

  // JSX 설정
  jsxSingleQuote: false, // JSX에서 작은따옴표 사용 여부 (기본은 큰따옴표)
  jsxBracketSameLine: false, // 여러 줄의 JSX에서 마지막 >를 마지막 줄에 위치시키는지 여부

  // 파서 설정
  parser: 'babylon', // 사용할 파서 (기본은 'babylon')
  filepath: '', // 변환할 파일의 경로

  // 범위 설정
  rangeStart: 0, // 포매팅을 시작할 위치
  rangeEnd: Infinity, // 포매팅을 끝낼 위치

  // 프라그마 설정
  requirePragma: false, // 파일 상단에 특정 주석이 있어야 포매팅을 수행할지 여부
  insertPragma: false, // 포매팅 후 파일 상단에 주석을 추가할지 여부

  // ProseWrap 설정
  proseWrap: 'preserve', // 프로즈 랩 설정 ('always', 'never', 'preserve' 중 선택)

  // HTML 설정
  htmlWhitespaceSensitivity: 'css', // HTML에서의 공백 감도 설정

  // Vue 설정
  vueIndentScriptAndStyle: false, // Vue 파일의 <script>와 <style> 태그에 들여쓰기를 적용할지 여부

  // 기타 설정
  embeddedLanguageFormatting: 'auto', // 내장 언어 포매팅 적용 여부
};

 

---

End