Prettier

• prettier 설치

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

• ESLint와 prettier 충돌방지를 위한 플러그인

npm install eslint-plugin-prettier eslint-config-prettier --save-dev

• eslint-config-prettier: eslint의 규칙 중 필요 없거나, prettier와 충돌이 발생하는 규칙을 off 하는 패키지
• eslint-plugin-prettier: prettier의 규칙을 eslint formatting 규칙에 추가하는 패키지

prettierc.cjs

module.exports = {
  // 화살표 함수 식 매개변수 () 생략 여부 (ex: (a) => a)
  arrowParens: "always",
  // 닫는 괄호(>) 위치 설정
  // ex: <div
  //       id="unique-id"
  //       class="contaienr"
  //     >
  htmlWhitespaceSensitivity: "css",
  bracketSameLine: false,
  // 객체 표기 괄호 사이 공백 추가 여부 (ex: { foo: bar })
  bracketSpacing: true,
  // 행폭 설정 (줄 길이가 설정 값보다 길어지면 자동 개행)
  printWidth: 80,
  // 산문 래핑 설정
  proseWrap: "preserve",
  // 객체 속성 key 값에 인용 부호 사용 여부 (ex: { 'key': 'xkieo-xxxx' })
  quoteProps: "as-needed",
  // 세미콜론(;) 사용 여부
  semi: true,
  // 싱글 인용 부호(') 사용 여부
  singleQuote: true,
  // 탭 너비 설정
  tabWidth: 2,
  // 객체 마지막 속성 선언 뒷 부분에 콤마 추가 여부
  trailingComma: "es5",
  // 탭 사용 여부
  useTabs: false,
}