본문 바로가기

Code/web-frontend

ESLint와 Prettier 설정하기

ESLint

ESLint는 문법검사 도구입니다. 

VSCode 확장프로그램에서 다운받으면 됩니다.

 

Prettier-Code formatter

코드 스타일을 자동으로 정리해주는 도구입니다.

VSCode 확장프로그램에서 다운받으면 됩니다.

.prettierrc를 프로젝트의 루트 디렉토리에 만들어줘야 합니다. (설정예제)

{
  "singleQuote": true,
  "semi": true,
  "useTabs": false,
  "tabWidth": 2,
}

 

정렬은 파레트명령어(F1 또는 ctrl + shift + p)에서

format selection(부분정렬) 또는 format document(전체정렬) 를 입력해야합니다.

 

단축키는, 부분 정렬 하려면 뭔하는 부분 드래그하고

ctrl + k + f 하면 됩니다.

 

자동정렬을 설정하려면, 

파일 > 기본설정 > 설정 에서 format on save 를 체크해주고 ctrl + s 누르면 전체가 자동으로 정렬이 됩니다.