리액트 프로젝트에서 ESLint로 문법 검사하기

2020/12/09 - [Programming/React] - 리액트 프로젝트에서 Prettier로 코드 스타일 통일하기

리액트 프로젝트에서 Prettier로 코드 스타일 통일하기

이전 글에서는 Prettier로 코드 스타일 맞추는 거에 대해 작성했었는데 이번에는 또 다른 좋은 확장 도구인 ESLint에 대해 소개하려고 합니다.

ESLint는 자바스크립트 문법 검사를 해주는 확장도구입니다.

 

 

 

설치를 하고 나서 App.js에서 이어서 작성을 해보겠습니다.

const로 변수를 선언했기 때문에 이 값을 바꿀 수 없는데 한번 변경하려고 시도해보겠습니다.

코드를 작성함과 동시에 실시간으로 밑줄이 쳐지면서 아래 "문제" 부분에  왜 문제가 생기는 것인지 친절하게 알려줍니다. (노란색은 경고, 빨간색은 오류)

 

 

zz = "4"; 라고 입력을 하면 빨간색 밑줄로 오류가 나는걸 바로 확인가능합니다.

 

 

이런 기본적인 자바스크립트 문법 오류들만 사용하려면 ESLint 확장도구로만으로도 충분히 사용 가능하지만 다른 개발자들이 외부에 공개한 스타일 가이드를 받아서 사용 할 수도 있어요

(내가 세부적인 규칙을 지정하기 귀찮고, 좀 까다롭고 규칙이 잘되어있는 거 가져다가 그냥 사용하고 싶을때? 정도로 사용할 수 있을거 같네요)

 

npmjs 사이트에서 eslint-config 로 검색해보면 관련된 패키지가 쭉 나오는데요. 원하는 패키지 골라서 사용하시면 될 것 같습니다.

 

뭐가 유명하고 사람들이 뭘 많이 사용하는 지 잘 모르겠다 하시면 

npmjs 사이트에서 Popularity로 정렬을 하거나 npmtrends.com 사이트에서 관련 패키지를 다운로드 추세를 보면됩니다.

 

 

• 1) npmjs 사이트

 

 

 

이번 글은 여기서 마무리하고 ^^

다음 글은 깃 훅을 편하게 작성할 수 있게 도와주는 husky와 staged된 파일들을 lint 해주는 도구인 Lint-Staged를 통해 git에 커밋하기 전에 모든 js 파일들에 대해서 코드 컨벤션을 자동화하는 방법인 husky + lint-staged로 git hook 관리하기에 대해 글을 올리겠습니다.

 

다음에 만나요~~