VSCODE Prettier

Prettier Setting

vscode의 코드들을 자동으로 깔끔하게 정렬해주는 Extenstion

Extenstions 탭에 들어가서 Prettier를 검색 후 install 해준다.

다음 file-preferences-settings(Ctrl+,)로 들어가 Editor: Default Formatter에 들어가서 Prettier - code formatter로 변경, Editor: format on save 검색 후 체크박스를 체크

Code

루트가 되는 디렉토리에 .prettierrc 파일 생성 후 아래 내용을 참고하여 취향에 맞게 설정

{
  "singleQuote": true,  // 작은따옴표를 사용하여 문자열을 표시
  "semi": true,  // 문장을 세미콜론으로 마침
  "useTabs": false,  // 탭 대신 스페이스를 사용하여 들여쓰기
  "tabWidth": 2,  // 들여쓰기에 사용되는 스페이스 또는 탭의 개수
  "trailingComma": "all",  // 모든 객체 속성 또는 배열 요소의 뒤에 쉼표 추가
  "printWidth": 120  // 한 줄의 최대 길이
}

코드로 돌아가서 F1 누르고 format 입력 후 Format Document 선택
(Editor: format on save를 설정했기 때문에 저장만 해도 정렬이 되긴 한다.)

prettier만 있으면 이렇게 엉망진창인 코드도 예쁘게 정렬이 된다.

저장전	저장후