ESLint 사용하기 - eslint-config-airbnb

ESLint

 

린트는 소스 코드를 분석하여 프로그램 오류, 버그, 스타일 오류 등을 표시해주는 도구를 가리킨다.

ESLint는 요즘 많이 쓰이고 있는 린트의 하나.

최근 코드 작성시에 Airbnb JS Style Guide를 많이 참고하고 있는데,

마침 에어비앤비에서 린트 규칙을 제공하고 있어서 이걸 사용하기로 했다.

 

 

일단 린트를 설치하고

npm install eslint --save-dev

 

에어비앤비 린트를 설치하고

npx install-peerdeps --dev eslint-config-airbnb

 

사용하려는 프로젝트에서 npm init을 한 다음, 린트도 init을 해준다.

npx eslint --init

 

그러고 나면 프로젝트 폴더에 .eslintrc.js 라는 파일이 생긴다. 내 파일에는 아래와 같이 담겨 있다.

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

 

에어비앤비 린트를 사용할 거라면 여기서 extends 부분을 이렇게 바꿔주면 된다.

"extends": ["airbnb", "airbnb/hooks"]

반영하고 저장한 다음에

module.exports = {
    "env": {
        "browser": true,
        "es2021": true
    },
    "extends": ["airbnb", "airbnb/hooks"],
    "parserOptions": {
        "ecmaVersion": 12,
        "sourceType": "module"
    },
    "rules": {
    }
};

새로 파일을 열어서 에어비앤비에서 하지 말라는 함수 표현식을 써보면 이렇게 빨간 줄이 표시된다.

잠깐 마우스를 대고 있으면 뭐가 문제인지 표시되고, Quick Fix를 선택하면 (수정 가능한 부분에 대해서) 자동 수정도 해준다.

잘 익혀서 좋은 코드를 써야겠다.

 

 

***

2021. 05. 22 추가

원래는 extends: airbnb 설정을 직접 해줘야 했는데, 오늘 다시 해보니 Where does your code run? 질문 뒤에

How would you like to define a style for your project?

라는 질문이 생겼다. 여기서 guide를 고르면 아래와 같이 질문을 하고

Which style guide do you want to follow?

airbnb, google 등 유명한 스타일 가이드를 바로 선택할 수 있다.

그러고 나서 .eslintrc.js 파일을 열어보면 아래와 같이 추가된 것을 확인할 수 있다.

  extends: [
    'airbnb-base',
  ],