Vue 프로젝트에 Airbnb ESLint 적용하기

2024-06-26 eslint v8.46.0 기준

1. 패키지 설치

React가 아닌 Vue와 함께 사용할 것이므로 일반 패키지가 아닌 base 패키지를 설치한다.

npm i -D eslint-config-airbnb-base

 

또한, 프로젝트에서 컴포넌트 및 모듈을 절대 경로를 이용해 import 하므로 이를 인식하기 위한 별도의 패키지를 추가로 설치해 준다.

npm i -D eslint-import-resolver-alias eslint-plugin-import

 

2. eslint 설정

eslintrc.json 파일에서 위에서 설치한 패키지를 적용해 준다. extends에 airbnb-base를 추가한다.

// .eslintrc.json
{
  "extends": [
    ...
    "airbnb-base"
  ]
}

 

그리고 절대경로 매핑을 위한 설정도 하단에 작성해 준다. map 부분의 매핑 규칙은 각 프로젝트 설정에 맞춘다.

// .eslintrc.json
{
  ...
  "settings": {
    "import/resolver": {
      "alias": {
        "map": [["@", "./src"]],
        "extensions": [".js", ".vue"]
      }
    }
  }
}

 

여기까지 작성 후 npm run lint를 실행해 보면, airbnb lint 설정에 맞게 검사 결과가 보인다.

---

참고:

[1] GitHub - airbnb/javascript: JavaScript Style Guide

[2] ESLint & Prettier, Airbnb Style Guide로 설정하기