본문 바로가기

Coding/react

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 하면 됩니다.

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