react ESLint로 코딩스타일 코웍

리액트 프로젝트진행하게 될 때, 

문법 검사 및 더 나은 자바스크립트 코딩 스타일을 위하여 ESLint 라는 도구를 사용합니다. 

create-react-app 으로 만들어진 프로젝트의 경우에는 자체적으로 내장되어있습니다.

예를들어서 const 로 값을 선언해놓고 그 값을 수정하려고 하면 사전에 에러가 보일것이고, 

선언해놓고 사용하지 않으면 경고를 띄울수도 있게 하고, 

스타일에 따라서 따옴표를 쓸 지 쌍따옴표를 쓸 지, 

들여쓰기 설정은 공백 2 개로 할 지, 4 개로 할 지, 탭으로 할 지.. 

그런 것들을 설정 할 수 있게 됩니다.

보통 ESLinst 를 사용하면, 코딩 스타일을 준수하기 위하여 

사전에 정의한 코딩 스타일과 맞지 않는다면 

경고나 에러를 띄움으로써 

우리가 제대로 된 코드를 작성 할 수 있게끔 도와줍니다.

에디터 상에서도 오류를 제대로 보려면 

비주얼스투디오코드 익스텐션 마켓플레이스에서 ESLint 를 검색후 설치한 다음, 

https://marketplace.visualstudio.com/items?itemName=dbaeumer.vscode-eslint   --> 마켓플레이스

아래와 같이 설정 파일을 만들어주어야 합니다 

프로젝트 디렉토리에 .eslintrc 라는 파일을 만들고 다음과 같이 입력하세요:

{
  "extends": "react-app"
}

저장하고 나면, 자바스크립트 파일에서 경고들을 확인 할 수 있습니다.