더블리의 12층

EsLint, Prettier는 VS Code에서 React를 개발할때 설치하면 좋은 확장 툴이다.
ESLint는 문법 검사, Prettier는 코드 스타일 자동 정리를 해주는 툴이다.

여러 개발자들이 동시에 개발하는 프로젝트라면 Prettier는 무조건 필수라고 할 수 있다.
git에서 merge할때 indentation 관련한 코멘트를 받으면 ... 창피

ESLint는 설치하고 바로 사용하면 되고, Prettier의 경우에는 프로젝트에 설정을 해야 한다.
프로젝트의 root directory에서 .prettierrc라는 파일을 설정하고
아래와 같이 프로젝트에서 사용할 prettierrc를 정의를 하면된다.

prettierrc example

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

prettier에 관련한 옵션은 다음 사이트에서 확인

코드 자동으로 정렬

VS Code에서는 코드를 저장할때 자동으로 정렬을 해준다.

[Code] - [Preference] - [Settings] 
에서 format on save 을 검색하고 체크

Visual Studio Code로 React를 개발하면서 유용한 확장 프로그램을 정리

ESLint

• 문법 및 코드 스타일을 검사

reactjs Code Snippets

• 라이프사이클 함수를 작성할때 단축 단어를 사용해 코드 자동 생성

Prettier-Code formatter

• 내가 설정한 코드 포맷의 스타을로 자동 정리해주는 도구