React5일차-eslint

오늘은 쉽게설명해서 우리의 코딩을 도와주는 프로그램 중하나인 eslint를 배워보겠습니다.

이해를 위해 게임을 하시는분들은 애드온 같은거라고 생각하시면 편하고요

게임을 안하면 카카오톡 자동완성 같은거라고 보시면됩니다

즉 저희가 코드가 오류가 나지않게 문법을 지키도록 교정해주느 프로그램입니다.

시작하겠습니다.

빈폴더에 우클릭 하고 vscode열어주세요

(하면서 다시 인지한건데 폴더이름에 빈공간이 없어야됩니다. 새 폴더안되요 ㅎㅎ )

code(으)로 열기 클릭

들어와서 터미널 -새터미널 해서 터미널 열어주세요(이때까지 햇으니 알수 있을거에요 ㅎㅎ)

새터미 널 열기

npm inint -y 하고 엔터

엔터치기전

엔터 치고나서

package.json파일 생성 됬을겁니다

npm i eslint -D치고 엔터

전

후

파일목록

npx eslint --init 치고엔터

전

선택하는게 나올텐데 보고 자기 상황에 맞는걸 선택해야됩니다. 

우선  어떤건지 보기위해 제가 임의로 선택해서 해보겠습니다

이동키(화살표) 로 선택 가능합니다

두번째꺼 누르고 엔터

첫번째꺼

세번째꺼

첫번째꺼 no 선택

두번째꺼 node

첫번째꺼 javascript

끝

파일목록

 

.eslintrc.js 파일 클릭해서 열기

이런식으로 오류가 안날수도 있다

rules 내부에 

"semi":["error","always"],

추가 그리고 그림처럼 , ; 추가해주세요

, ; 알맞게 추가

이거는 규칙에 ;이거를 안쓰면 오류가 나게 만들겠다 라고 하는겁니다 

이제 index.js라는 폴더 만들어주겠습니다.

클릭

이렇게 입력하고 엔터

이렇게 빈창에 console.log("hellow") 입력 ;이거 치지말아주세요 하고 저장 만약 자꾸 ;가 붙으면 껐다 켜주세요

이런식으로 하고 

npx eslint index.js 치고 엔터

전

후

이렇게 eslint로 오류가 나는걸 알수가 있습니다. 이걸 일일 할때마다 쳐주기 귀찮으면 

4번째 블록 같이생긴거 클릭

클릭

그리고 eslint 검색하고 젤위에꺼선택 하고 설치

설치

그러면 자동으로 이렇게 오류가 나옵니다

완료 쉽죠

create react app에서쓸려면 우선 기본적으로 설치되어있고 rule을 쓸려면 package.json그림처럼

eslintConfig안에extednds 밑에 추가하면 됩니다.

여기까지 알아봤습니다 수고하셔습니다.