[ESLint] 시작하기

개요

버그가 발생할 여지가 있는 요소를 확인해 볼 요량으로 ESLint를 JavaScript 프로젝트에 적용하였습니다.

덧붙여 코드의 편집은 VSCode를 주로 사용하기 때문에 해당 도구에서 즉시 확인할 수 있도록 확장 도구를 함께 설치하였습니다.

설치 및 사용

프로젝트 폴더로 이동하여 npm을 이용하여 ESLint를 설치합니다.

npm install eslint --save-dev

다음 명령을 사용하여 설정파일을 생성합니다

※ 해당 프로젝트에는 이미 package.json 이 있어야 합니다.

npx eslint --init

생성된 .eslintrc.js 파일에 프로젝트에 따라 필요한 설정을 추가합니다.

저는 jquery 라이브러리와 firebase SDK를 프로젝트에서 사용하며 해당 모듈로 인하여 발생한 오류는 제가 고칠 수 없으므로 "jquery": true, "firebase": true를 추가하여 예외처리를 하였습니다.

    "env": {
        "browser": true,
        "es2021": true,
        "jquery": true,
        "firebase": true
    },

작성한 JavaScript 코드의 결함을 확인하려면 다음과 같이 ESLint를 실행합니다.

npx eslint yourfile.js

대부분의 코드는 VSCode를 사용하므로 VSCode에서 ESLint를 사용할 수 있도록 확장 프로그램을 설치합니다.

플러그인을 동작시키려면, VSCode 하단의 상태바의 ESLint 아이콘을 클릭합니다. 다음과 같은 창이 표시됩니다.

허용(Allow) 또는 모두 허용(Allow Everywhere)을 선택하면 ESLint에 의해 검출된 오류가 붉은색으로 표시됩니다.

참고

• Getting Started with ESLint