ESlint 설치해서 사용해보기

ESlint 란 무엇인가요?

ESlint 는 ES (ECMAScript) + Lint (에러 코드 표식) 을 조합한 단어로 코드에 특정한 스타일을 적용해서 사전에 문제가 발생하지 않도록 예방할 수 있게 도와주는 정적 분석 툴입니다.

 

ESlint 를 사용하면 다양한 플러그인들을 사용해 규칙들을 추가하고 사용자의 설정에 맞게 커스텀 하는것이 가능합니다. 이를 미리 정해놓고 개발을 시작하면, 그룹간의 같은 환경에서 개발을 진행할 수 있다는 장점이 있습니다.

 

대부분의 협업에서는 먼저 ESlint 부터 설치하고 규칙들을 미리 정해놓는것부터 시작합니다. 따라서 ESlint 를 미리 사용해보는것은 추후에 진행할 프로젝트에 대비하기 좋은 경험이 될 수 있습니다.

ESlint 설치해보기

ESlint 설치의 공식문서에서 간단하게 ESlint 를 시작하는 방법을 자세히 알려주고 있습니다. 기본적이고 간단한 내용을 확인하실 수 있으니 한 번 살펴보는것을 추천해드립니다. 저는 아래와 같이 설치를 진행해보도록 하겠습니다.

 

먼저 터미널로 이동해서 npm 을 init 해줍니다. 여기서 -y 를 같이 입력해주면 번거롭게 yes 를 입력하지 않고 빠르게 설치를 진행할 수 있습니다.

npm init -y

 

명령어를 실행하면 아래와 같이 진행되고 vscode 에서 package.json 파일이 만들어진 것을 볼 수 있습니다.

 

package.json 

이제 eslint 를 설치해보도록 하겠습니다. 외부에 공개되어 많은 개발자들이 사용하는 Airbnb Style Guide 를 사용해서 ESlint 스타일 가이드를 적용해보도록 하겠습니다.

 

또한 -D 를 같이 입력해주면 devDependency, 즉 현재 개발환경에서만 설정을 사용할 수 있습니다. 만약 global 로 설치를 하시게 되면 이후에 진행할 별개의 프로젝트에서 정해놓은 규칙을 사용하는데 문제가 될 수 있으니 프로젝트 별로 설정을 해주는것이 좋습니다. 

 

따라서 -D 를 사용해서 현재 프로젝트에서 의존성을 가지도록 설치해보겠습니다. 아래와 같이 입력해주세요.

npm i -D eslint eslint-config-airbnb-base babel-eslint eslint-config-prettier

 

설치가 완료된 후에 package.json 파일에 들어가보면 아래처럼 설정이 완료된것을 볼 수 있습니다.

 

package.json

 

이후에 eslintrc.json 파일을 만들어줍니다. eslintrc.josn 파일을 통해서 다양한 규칙들을 추가하는 것이 가능합니다. 아래 코드는 제가 사용하는 ESlint 설정으로 무난하게 사용하실 수 있어 복사 붙여넣기 하셔도 무방합니다.

{
  "parser": "babel-eslint",
  "parserOptions": {
    "ecmaVersion": 11
  },
  "env": {
    "browser": true,
    "node": true,
    "jest": true
  },
  "extends": ["airbnb-base", "prettier"],
  "rules": {
    "no-console": "warn",
    "no-plusplus": "off",
    "no-shadow": "off",
    "vars-on-top": "off",
    "no-underscore-dangle": "off", // var _foo;
    "func-names": "off", // setTimeout(function () {}, 0);
    "prefer-arrow-callback": "error", // Require using arrow functions for callbacks
    "prefer-template": "off",
    "no-nested-ternary": "off",
    "max-classes-per-file": "off",
    "wrap-iife": ["error", "inside"],
    "arrow-parens": ["error", "as-needed"], // a => {}
    "no-restricted-syntax": [0, "ForOfStatement"], // disallow specified syntax(ex. WithStatement)
    "no-param-reassign": ["error", { "props": false }],
    "require-await": "error",
    "import/no-extraneous-dependencies": ["error", { "devDependencies": true }]
  }
}

 

이후에 아래와 같이 코드를 입력하고 확인했을때 설치한 airbnb 스타일 가이드에 맞지 않은 경우 에러메세지를 보여주게 됩니다.
이를 통해 같은 규칙을 적용한 환경에서 협업이 가능합니다.

 

var 사용 금지, console.log 는 비표준입니다.

마무리

이번 게시글에서는 ESlint 에 대해서 알아보고 직접 설치해보고 사용해보았습니다. ESlint 를 사용하면 다른 개발자들과 같은 환경에서 코딩하는 것이 가능합니다. 또한 코드의 스타일을 자동으로 검사하는 것이 가능하며 미리 문제 발생을 예방하는 것 또한 가능합니다. 자세한 규칙은 ESLint 공식 문서에서 확인이 가능합니다. 글 읽어주셔서 감사합니다!