[D+45] ESlint 설치하기

 

D+45

-  ESlint 설치하기 -

(ESlinet 설치하기)

 

---

 

 

ESlint 설치하기

ESlint는 코드의 띄어쓰기나 줄 바꿈 등의 규칙들을 맞추는 데에 도움이 되는 Linter라고 하며,

좀 더 정확하게는 ECMAScript/JavaScript 코드에서 발견되는 패턴을 식별하고 보고하는 도구로

코드를 보다 일관성 있게 만들고 버그를 피할 수 있게 하는 도구라고 생각하면 된다.

 

ESlint를 설치하는 방법은 다양한 방법이 있겠지만 공식문서를 통해 설치를 하는 것을 권장한다고 하니

공식문서를 참고해 설치를 해보았다.

 

Getting Started with ESLint

 

 

1 > ESLint 설치

npm install eslint --save-dev

ESLint는 npm과 yarn을 통해서 설치하는 방법이 있는데 나는 npm을 이용해 설치를 진행해 보았다.

 

2 > ESLint 설정

$ npx eslint --init

설치 후 구성 파일을 설정해 주기 위해 init플래그를 사용해 설정해 주며,

설정 방법은 본인이 원하는 설정으로 맞춰서 진행해 주면 된다.

 

내가 설정한 선택지는 그냥 참고만 해줘도 좋다.

 

질문	선택
How would you like to use ESLint?	To check syntax and find problems
What type of modules does your project use?	CommonJS
Which framework does your project use?	None of these
Does your project use TypeScript?	No
Where does your code run?	Node
What format do you want your config file to be in?	원하는 항목 선택

 

$ npm run lint

만약 제대로 설정이 되어 lint 에러를 잡아낼 수 있는지 확인해보고 싶다면 해당 명령을 입력해 주면

 

이와 같이 에러를 잘 잡아내는 모습을 확인할 수 있다.

 

3 > Linting

ESLint에서 지적하는 에러를 잡아내는 시간을 가져보았다.

 

1. mocha 관련 에러 해결하기

   4:1  error  'describe' is not defined  no-undef
   6:3  error  'it' is not defined        no-undef

만약 당신이 이와 같은 에러를 발견한다면 먼저 에러에 표시되어 있는 'no-undef'의 의미에 대해서 알아야 하는데

이는 코멘트에 언급되지 않는 한 발표되지 않은 변수 사용을 허용하지 않는다는 의미로 이 에러를 더 이상 보고 싶지 않다면

ESLint에게 현재 mocha를 사용하고 있다고 알려줘야 해당 에러를 보지 않아도 된다.

 

해결방법은. eslintrc.js에 'env'키 안에 "mocha": true를 넣어주면 된다.

 

Configuring ESLint

mocha 말고도 다른 것들도 해당 방법으로 해결이 가능하니 찾아보길 바란다.

 

 

2. ESLint 검사 조건 완화하기

 

이외에도 다양한 에러가 존재하겠지만 그중에서도 내가 제대로 했음에도 lint에서 에러를 지적하는 경우가 있다.

 

이런 경우에는 ESLint에서 검사 조건을 완화해 주면 문제가 해결된다.

 

List of available rules

먼저 위의 링크를 들어가 발생되고 있는 에러의 내용을 확인하고

해당 에러 메시지를 에러로 처리하지 않고 넘기고 싶다면 rules라는 키에 해당 에러를 입력 후 0으로 처리해주면

에러 메시지를 무시하게 된다.

 

Configuring ESLint

 

이런 식으로 공식문서를 활용해 충분히 여러 문제들을 해결할 수 있으니

나도 열심히 복습하고 연습해봐야겠다.