ESlint

ESLint는 문법을 교정해주는 Grammarly 프로그램과 같은 역할을 한다.

 

Linter를 이용하면 단순히 문법을 고쳐줄 뿐만 아니라, VSC에서 코딩 스타일까지 점검해준다.

* 개발자가 원하는 추가 규칙들까지 직접 넣어서 작성한 코드를 검사할 수가 있다.

---

ESLint Installation

자, 그럼 ESLint는 어떻게 설치할 수 있나?

 

ESLint의 공식 홈페이지가 있다.

구글링을 통한 다른 블로그나 글보다 공식 문서를 참고하는 것이 항상 좋다.

공식 문서를 따라 ESLint를 Sprint Repository에 설치하자.

* npm 혹은 yarn을 통해 설치할 수 있는데, npm만 먼저 알아보자.

 

"npm install eslint --save-dev"

 

* 설치가 잘 되었다면, package.json 파일의 devDependencies 항목에 eslint가 추가가 되어있을 것이다.

 

devDependencies_eslint

---

ESLint Configuration

ESLint를 설치한 다음, 설정까지 마쳐야한다.

공식 문서를 따라 ESLint 설정 마치자.

 

npx eslint --init"

 

이후 ESLint 파일은, CLI 과정중 개발자의 선택에 따라.eslintrc.js 또는 .eslintrc.json와 같은 이름으로 만들어진다.

 

.eslintrc.js 생성됨

package.json의 "scripts" 부분에 "lint"가 적용되어 있다면 :

npm run lint 를 통해서 코드에서 발생하는 에러를 알 수 있다.

 

예를 들어서, 작성한 코드에서 mocha를 사용하고 있다면, ESLint는 이를 에러로 볼 수도 있다.

Mocha 관련된 에러들은 아래와 같다.

 

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

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

* no-undef는 그 단어에서 유추할 수 있듯이 '정의되지 않았다'는 의미를 갖고있다.

 

ESLint에게 "우리가 현재 mocha를 사용하고 있다"는 것을 알려줘야 한다.

바로, 우리가 사용하는 '환경'을 ESLint에게 알려주는 것이다.

* 참조 공식 문서 (Specifying Environment)

 

.eslintrc.js

---

ESLint Rules

"No rules are enabled by default."
"기본적으로 ESLint는 규칙이 없다"

--fix script를 CLI에 입력하면 자동으로 에러를 해결한다.

 

혹은 내가 원하는 규칙을 따로 넣어 실행할 수도 있다.

* 사용 가능한 규칙들과 발생 가능한 에러들: 참고 공식 문서 (Rules)

List of available rules

---

그리고, ESLint라는 Extention을 통해 ESLint를 VSC와 통합하여 사용할 수가 있다는 것을 마지막으로 글을 마무리 하겠다.