9/2[TIL] ESLint

  우선 Lint는 소스 코드에 문제가 있는지 없는지 탐색하는 작업을 가리키는 말이며 Linter는 이 작업을 도와주는 소프트웨어 도구라고 보면 된다. 이러한 소프트웨어 js코드에서 발견된 문제 패턴을 식별하기 위한 정적 코드 분석 도구인 ESLint를 이용하여 과제를 진행했다.

 

  npm install eslint --save-dev 또는 yarn add eslint --dev를 사용해서 eslint를 설치

 

  여기서 npm install eslint –-save 뒤에 -dev를 쓰는 것과 안 쓰는 것의 차이는 사용하게 되면 package.json 파일에devDependencies에 파일이 설치되는 것이고 안 쓰는 경우엔 dependencies dependencies에 설치가 되게 된다. devDependencies는 테스트 및 실행, 개발에 필요한 모듈이며 dependencies는 실행에 필요한 모듈이다.

 

  npm install eslint --global을 이용해서 설치할 때 글로벌로 설치를 해줄 수 있지만 이는 별로 추천하지 않고 해당 프로젝트에

사용 될 것이 경우에 따라 다른 버전을 쓰는 경우도 존재하기에 필요한 테스트 부분 만의 local로 설치하는 것이 더 좋은 방법이라고

생각된다.

 

  이렇게 설치한 모듈들을 확인하기 위해서는

 

npm ls –depth=0  (local 확인)

npm ls - g -depth=0 (global 확인)

 

그리고 npx eslint –init 명령어를 사용하여 설치 과정 중 질문에 따른 선택지를 입력하면 설치가 완료된다.

그럼 .eslintrc.js(json…) 파일이 생성될 것인데 아래 이미지에 있는 경우를 예로 들자면

 

“env” 에선 사전 정의된 전역 변수 사용을 정의할 수 있으며

 

“rules”에선 프로젝트에서 사용하는 규칙을 수정할 수 있다. 규칙을 변경하는 경우에는

 

-"off" 또는 0: 규칙을 사용하지 않음

-"warn" 또는 1: 규칙을 경고로 사용
-"error" 또는 2: 규칙을 오류로 사용 이런 식으로 사용하면 된다. 규칙에 추가 옵션이 있는 경우에는 배열 리터럴 구문을 사용하여

지정할 수 있다.

 

“extends” 에서는 추가한 플러그인에서 사용할 규칙을 설정한다.

내가 설치 한 ESLint eslint:recommended eslint:recommended로 지정되어 있는 것을 볼 수 있다.

 

"parserOptions" 은 ESLint 사용을 위해 지원하려는 Javascript 언어 옵션을 지정할 수 있다.

 

이 밖에도 많은 설정들이 존재한다.

 

 

 

* 참고 페이지

https://eslint.org/