[eslint] vue3 eslint 설정

초급 개발자로서 프로젝트 설정은 항상 어렵다. 일관적인 코드 품질을 위해서 엄격하게 eslint를 적용하는 것을 원했다. rule을 하나하나 추가해보려 했으나, 너무 손이 많이가서, 이미 누군가 만들어 놓은 rule 묶음을 사용하기로 했다. 이런 rule묶음을 airbnb라고 지칭하는 것 같다. 아래는 npm 에서 vue airbnb로 검색했을 때 가장 상위노출되는 패키지이다.

 

https://www.npmjs.com/package/@vue/eslint-config-airbnb

npm i @vue/eslint-config-airbnb

npm 명령어로 인스톨한 다음, .eslintrc.cjs 파일의 extends에 추가해주었더니 정상적으로 에러를 잡아준다.

/* eslint-env node */
// eslint-disable-next-line import/no-extraneous-dependencies
require('@rushstack/eslint-patch/modern-module-resolution');

module.exports = {
  root: true,
  extends: [
    'plugin:vue/vue3-recommended',
    '@vue/airbnb', // 추가한 줄
    'eslint:recommended',
    '@vue/eslint-config-typescript/recommended',
    'plugin:import/typescript', // 타입스크립트 사용할때 기본적인 룰 수정해주는것 같다.
  ],
};