[VS CODE] Prettier - Code formatter 설정

① EXTENSIONS ( Ctrl + Shift + X ) Prettier - Code formatter 설치

② [File] > Preferemces > Setting 혹은 단축키 CTRL + ,  실행

 

③ 검색창에 Default formatter 검색하여 "Prettier - Code formatter"지

④ 자동저장을 원할경우 Text Editor > Default formatter 에서 "Format On Save" 체크

                       ( 자동저장 미 사용시 저장할때 Shift + Alt + F로 사용 )

 

⑤ 프로젝트 소스 최상위 폴더에

.prettierrc.json 파일 생성

하여 원하는 코드 입력

소스코드 샘플 (※ 주석은 추가 불가)

{
  // 코드 너비 (Defalut 80) 만약, 줄이 길경우 너비 크기를 조정
  "printWidth": 200, 

  // 줄바꿈시 들여쓰기 공백 수 (Default 4 or 2)
  "tabWidth": 3, 

  // 공백 대신 탭 사용하여 들여쓰기
  "useTabs": true, 

  // 명령문 마지막 세미콜론 추가
  "semi": true, 

  // “”큰따움표 > ‘’작은 따움표로 변경
  "singleQuote": true, 

  // 객체의 속성을 표현시 따움표 적용/미적용 여부
  // - "as-needed“  - Object의 key값에 ""가 필요없는 부분이 있을경우 제거 (Default)
  // - “consistent” - Object의 value값에 ""가 필요한 부분이 있을경우 추가
  // - “preserve” - 사용자가 직접 작성한 코드로 지정
  "quoteProps": "as-needed“ ,

  // 멀티 행의 쉼표 구문 마지막에 쉼표 표출
  // - ( all, none, es5, all )
  "trailingComma": "all", 

  // 객체 리터럴 대괄호 사이공백
  "bracketSpacing": true, 

  // 요소 다음줄에 줄을 추가  
  // jsx문법 시에 “>” 뒤에 줄을 사용할지 말지 
  "jsxBracketSameLine": false, 

   //화살표 함수(Arrow Function) 매개변후 뒤에 괄호 포함 (alwalys) / 미포함 ( avoid)
   “arrowParens” : “alwalys” ,

  // 포멧 적용 시작라인
  “rangeStart” 0 ,

  // 포멧 적용 파일 끝 라인 (숫자 / Infinity)
  “rangeEnd” : Infinity,

  "vueIndentScriptAndStyle": true,

 // 마지막 코드 라인에 줄바꿈을 할지 다른것을 사용할지
 // ”if” 줄 바꿈 / ”crlf " 캐리지 리턴 + 줄바꿈 / cr "캐리지 리턴 문자만"
  "endOfLine": "auto“, 

  //포멧 사용 여부 지정
/**
* @prettier
*/

/** * @format */

 "requirePragma": false, 

  // 미리 정의된 @format marker의 사용 여부
  "insertPragma": false, 
  // CSS -display 속성에 따른다. / strict - 공백간주 / ingnore - 모든공백 무시
  “htmlWhitespaceSensitivity” : css

}