ESLint

1. 린터(linter)

린트(lint)는 소스 코드에 문제가 있는지 탐색하는 작업을 의미하며, 린터(linter)는 이 작업을 도와주는 소프트웨어 도구를 의미합니다.

자바스크립트와 같이 컴파일 과정이 없는 인터프리터 언어의 경우, 런타임 에러가 발생할 확률이 높기 때문에, 이 린트 작업을 통해 사전에 에러를 최대한 잡아주는 것이 중요합니다.

저는 가장 대중적으로 사용되는 eslint를 프로젝트에 적용해보았습니다.

2. ESLint 설치 방법

2-1. ESLint설치

eslint를 적용하고자 하는 프로젝트 내부에서 eslint패키지를 개발의존성 모드로 설치를 해줍니다.

$ npm init -y
$ npm i -D eslint

설치가 완료되면 프로젝트에 node_modules라는 폴더가 생긴 것을 확인할 수 있습니다.

2-2 ESLint실행

$ eslint --init

elint를 실행시켜 나오는 질문들에 프로젝트 상황에 맞춰 답변을 해줍니다.

2-3 .eslintrc.js

설정한 내용에 맞춰 .eslint.js가 생성된 것을 확인할 수 있습니다.

만약, 개인적으로 사용하고 싶은 규칙들이 있는 경우 rules에 정의를 해주면 됩니다.

module.exports = {
  env: {
        "browser": true,
        "es2021": true,
        "node": true
  },
  extends: "eslint:recommended",
  parserOptions: {
        "ecmaVersion": "latest",
        "sourceType": "module"
  },
  rules: {    
  }
}

env : {}

• env옵션을 통해 브라우저 및 node.js에서 동작하는 전역개념들을 모두 코드검사를 할 것인지를 설정할 수 있습니다.

extends : []

• eslint를 통해 코드 검사를 할 기본적인 규칙들을 명시할 수 있습니다.
• JS와 관련된 코드 규칙들은 ▶JS코드규칙에서 확인할 수 있습니다.

parserOptions : {}

기본적인 코드를 분석할 수 있는 분석기를 지정합니다.