Prettier - .prettierrc 설정하기

Prettier

.prettierrc 설정하기

 

🔎 .prettierrc 란

Prettier 설정파일로 프로젝트 상단에 .prettierrc 의 옵션값을 확인하여 코드 포맷팅을 진행한다.

 

🔎 printWidth

기본값은 80으로 코드 한줄의 갯수를 설정한다.

 

🔎 tabWidth

기본값은 2로 들여쓰기(tab) 의 너비수를 설정한다.

 

🔎 useTabs

기본값은 false 로 탭을 사용할 지 스페이스바로 간격을 조정할 지 설정한다.

 

🔎 semi

기본값은 true 로 코드 마지막에 ;(세미콜론)을 붙일지 설정한다.

 

🔎 singleQuote

기본값은 false 로 큰따옴표 대신 작은따옴표를 사용할 지를 설정한다.

 

🔎 quoteProps

기본값은 'as-needed' 로 개체의 속성이 인용될 때 변경한다.

• as-needed : 필요한 경우에만 개체 속성 주위에 따옴표를 추가한다.
• consistent : 개체의 속성 중 하나 이상에 따옴표가 필요할 경우 모든 속성을 따옴표로 묶는다.
• preserve : 개체 속성에서 따옴표의 입력 사용을 존중한다.
  
  

🔎 jsxSingleQuote

기본값은 false 로 JSX 내에서 큰따옴표 대신 작은따옴표를 사용할 지를 설정한다.

 

🔎 trailingComma

객체나 배열을 작성하여 데이터를 넣을 때, 마지막에 후행쉼표를 넣을지 여부를 설정한다.

 

• es5 : 후행쉼표 제외
• none : 후행쉼표 없음
• all : 후행수미표 포
  
  

🔎 jsxBracketSameLine

기본값은 true 로 ">" 다음 줄에 혼자 있는 대신 여러 줄 JSX 요소를 마지막 끝줄에 넣을 지를 설정한다.

 

🔎 bracketSpacing

기본값은 true 로 화살표 함수가 하나의 매개변수를 받을 때 괄호를 사용할 지를 설정한다.

 

🔎 bracketSameLine

기본값은 false 로 혼자 있는 대신 여러  HTML 요소를 마지막 줄 끝에 넣을 지를 설정한다.

 

🔎 arrowParens 

기본값은 'always' 로 단독 화살표 기능 매개변수 주위에 괄호를 포함할 지를 설정한다.

 

// .pretteierrc.js
module.exports = {
  /**
   * @template: printWidth: <int>
   * @description: 코드 한줄의 개수
   * 추천) 가독성을 위해 80자 이상을 사용하지 않는 것이 좋습니다.
   * 추천) 코드 스타일 가이드에서 최대 줄 길이 규칙은 종종 100 또는 120으로 설정됩니다.
   */
  printWidth: 80,

  /**
   * @template: tabWidth: <int>
   * @description: 들여쓰기 너비 수(탭을 사용할 경우 몇칸을 띄워줄지)
   */
  tabWidth: 1,

  /**
   * @template: useTabs: <bool>
   * @description: 탭 사용 여부 (미사용 시 스페이스바로 간격조정을 해야함.)
   */
  useTabs: true,

  /**
   * @template: semi: <bool>
   * @description: 명령문의 끝에 세미콜론(;)을 인쇄합니다.
   * true: (;)를 추가함
   * false: (;)를 지움
   */
  semi: true,

  /**
   * @template: singleQuote: <bool>
   * @description: 큰따옴표("") 대신 작은따옴표('')를 사용여부
   * true: 홀따옴표로 사용
   * false: 큰따옴표로 사용
   */
  singleQuote: true,

  /**
   * @template: jsxSingleQuote: <bool>
   * @description: JSX내에서 큰따옴표("") 대신 작은따옴표('')를 사용여부
   * true: 홀따옴표로 사용
   * false: 큰따옴표로 사용
   */
  jsxSingleQuote: true,

  /**
   * @template: trailingComma: "<es5|none|all>"
   * @description: 객체나 배열을 작성하여 데이터를 넣을때, 마지막에 후행쉼표를 넣을지 여부
   * es5: 후행쉼표 제외
   * none: 후행쉼표 없음
   * all: 후행쉼표 포함
   */
  trailingComma: 'all',

  /**
   * @template: jsxBracketSameLine: <bool>
   * @description: ">" 다음 줄에 혼자 있는 대신 여러 줄 JSX 요소를 마지막 줄 끝에 넣습니다
   * true: 줄넘김하지 않음
   * false: 줄넘김을 수행
   */
  jsxBracketSameLine: true,

  /**
   * @template: bracketSpacing: <bool>
   * @description: 개체 리터럴에서 대괄호 사이의 공백을 넣을지 여부
   * true: 공백을 넣음 { foo: bar }
   * false: 공백을 제외 {foo: bar}
   */
  bracketSpacing: true,

  /**
   * @template: bracketSpacing: <'always'| 'avoid'>
   * 화살표 함수가 하나의 매개변수를 받을 때 괄호 사용여부
   * always : 괄호 사용
   * avoid : 괄호 제거
   */
  // arrowParens: 'avoid',

  // endOfLine: 'auto', // EoF 방식, OS별로 처리 방식이 다름
  // htmlWhitespaceSensitivity: 'css', // HTML 공백 감도 설정
};

 

참고
https://adjh54.tistory.com/20