개요

• 포맷팅을 일관되게 유지 해서 가독성을 올려주는 역할을 함.
• 혼자 개발할 때도 좋지만 특히 협업할 때에는 더 중요하게 다가옴

설정 예시

{
  "arrowParens": "avoid", // 화살표 함수 괄호 사용 방식
  "bracketSpacing": false, // 객체 리터럴에서 괄호에 공백 삽입 여부
  "endOfLine": "auto", // EoF 방식, OS별로 처리 방식이 다름
  "htmlWhitespaceSensitivity": "css", // HTML 공백 감도 설정
  "jsxBracketSameLine": false, // JSX의 마지막 `>`를 다음 줄로 내릴지 여부
  "jsxSingleQuote": false, // JSX에 singe 쿼테이션 사용 여부
  "printWidth": 120, //  줄 바꿈 할 폭 길이
  "proseWrap": "preserve", // markdown 텍스트의 줄바꿈 방식 (v1.8.2)
  "quoteProps": "as-needed", // 객체 속성에 쿼테이션 적용 방식
  "semi": true, // 세미콜론 사용 여부
  "singleQuote": true, // single 쿼테이션 사용 여부
  "tabWidth": 2, // 탭 너비
  "trailingComma": "all", // 여러 줄을 사용할 때, 후행 콤마 사용 방식
  "useTabs": false, // 탭 사용 여부
  "vueIndentScriptAndStyle": true, // Vue 파일의 script와 style 태그의 들여쓰기 여부 (v1.19.0)
  "requirePragma": false, // 파일 상단에 미리 정의된 주석을 작성하고 Pragma로 포맷팅 사용 여부 지정 (v1.8.0)
  "insertPragma": false, // 미리 정의된 @format marker의 사용 여부 (v1.8.0)
  "overrides": [
    {
      "files": "*.json",
      "options": {
        "printWidth": 200
      }
    }
  ] // 특정 파일별로 옵션을 다르게 지정함, ESLint 방식 사용
}

맺음말

.prettierrc 등을 통한 설정 쓰리즈는 정말 많습니다. pretier eslint tsconfig yarn webpack parcel rollup ... 쩝

사실 매번 외워서 하기 보단 기존에 만들어 놓은 탬플릿을 복제하여 적용하는 경우가 많고여

---

혼자서 사용할 땐 뭐 플러그인 설치 하고 별도 개별 설정 파일을 만들지 않는 경우도 많은데, github 등에 공유하는 것을 위해 개별 설정파일을 구성하여 다른 이들에게도 동일한 설정을 구성하는 것도 좋은 방법이라 생각 되네요