Lint?

ESLint를 알기 전에 우리는 Lint가 무엇인지 부터 알아봐야 한다.

린트(lint) 또는 린터(linter)는 소스 코드를 분석하여 프로그램 오류, 버그, 스타일 오류, 의심스러운 구조체에 표시(flag)를 달아놓기 위한 도구들을 가리킨다.
[출처 : https://ko.wikipedia.org/wiki/%EB%A6%B0%ED%8A%B8_(%EC%86%8C%ED%94%84%ED%8A%B8%EC%9B%A8%EC%96%B4)#cite_note-BellLabs-2 ]

ESlint는 lint의 기능을 JavaScript내에서 사용 할 수 있도록 만든 분석도구이다.
여기서 ES는 ECMA(European Computer Manufacturers Association) Script인 자바스크립트 표준 규격을 뜻한다.

정리하자면, ESlint는 JavaScript 코드 분석 도구이다.

ESlint 설치

npm install eslint --save-dev

npx eslint --init

npx eslint --init를 하게 되면 CLI 설치 과정 중 선택지를 받게된다. 이때 질문을 잘 읽고 현재 나에게 맞는 상황에 맞게 선택하면 된다.

그러면 .eslintrc.js라는 파일이 생성된다.

module.exports = {
    "env": {
        "node": true,
        "commonjs": true,
        "es2021": true,
        "mocha" : true,
        "browser" : true
    },
    "extends": "eslint:recommended",
    "parserOptions": {
        "ecmaVersion": 12
    },
    "rules": {
        "semi" : ["warn","always"],
        "quotes" : ["warn","double"],
        "no-unused-vars": "off"
    }
};

.eslintrc.js는 이렇게 생겼다.
"env"는 환경이라 생각하면 된다. 내가 어떤 상황에 이 파일들을 사용 할 것 인지에 대해 파악하는 것이다. node에서 사용하는지 common JS 규격에서 사용하는 지 Mocha를 사용하는 지에 대한 내용을 쓰는 공간이다. 특별한 개발환경에 대해 선언해주는 내용이다. 어떤 환경들을 지정 할 수 있는지 궁금하다면 https://eslint.org/docs/user-guide/configuring#specifying-environments 를 참조해보면 된다.

사용하는 이유에 대해 생각해보자. "mocha"에는 it이나 describe같은 기능을 사용해야 한다. 이때 이는 선언되어 있지 않은 function이기 때문에 lint에서는 오류로 받아 낼 것이다. 하지만 "env"에서 "mocha" : true로 하게 된다면 이를 오류로 잡지 않을 것이다. 이 때문에 lint를 사용 할 시에 내가 사용하는 환경을 적어 줘야 한다. browser에서 사용하는 document도 위와 마찬가지 이기 때문에 적어줘야 한다.

"rules"는 어느 특정상황에 대한 오류를 발생시키는 것이다.
"semi"는 세미콜론(;)을 알맞는 위치에 항상(always) 표시했는 가를 나타내는 것이다.
"quotes"는 따옴표(' , ")를 뜻하며 뒤에 보이는 double은 " 을 뜻한다.
위에 보이는 warn는 오류발생시키지 않고 경고만 주는 것이다. 오류를 표시하고 싶다면 error로 바꾸면 된다. 이를 그냥 넘기고 싶다면 off로 지정해주면 된다.
js에서 만약 function만 지정해준 파일들이 존재한다면 이곳에서 만든 function들이 사용되지 않아 no-unused-vars에 대한 오류가 발생할 것이다. 이를 방지하기 위해 no-unused-vars를 off해놓으면 lint에서 오류가 발생하지 않는다.

그렇다면 lint는 어떻게 실행시키는 것일까?

ESlint 사용법

npm run lint

이를 하게 되면 현재 터미널에서 지정된 폴더 안에 있는 모든 js파일을 lint를 통해 검사할 것이다.
결과는

seungjae@seungjae-TFX242XA:~/바탕화면/codestates/im-sprint-immersive-prep$ npm run lint

> immersive-prep@1.0.0 lint /home/seungjae/바탕화면/codestates/im-sprint-immersive-prep
> eslint pre-hiring-assessment/**/*.js modern-js-koans/**/*.js


/home/seungjae/바탕화면/codestates/im-sprint-immersive-prep/pre-hiring-assessment/06_test6/index.test.js
  56:9  warning  Strings must use doublequote  quotes
  59:9  warning  Strings must use doublequote  quotes

✖ 2 problems (0 errors, 2 warnings)
  0 errors and 2 warnings potentially fixable with the `--fix` option.

이런 식으로 나타날 것이다.

ESlint 느낀점

1. ESlint는 중요한 기능이라 생각한다. 실행만 잘 시키고 정리가 되지 않은 코드들은 수정이 어려울 것이다. 오류가 발생할 시에 혹은 더 좋은 코드로 발전 시킬때 정리가 안된 코드를 만지게 되면 더 큰 오류를 발생 시킬 수 있기 때문에 ESlint를 통해 코드를 한번 점검해보고 정리해보는 습관을 들여야 된다고 생각한다.
2. 결론적으로 평소에 ESlint를 사용하며 나의 잘못된 코드 습관을 발견하고 이를 고치기 위해 노력해야겠다.