Vue 프로젝트를 위한 공유 가능한 ESlint 구성 생성

Linting은 프로젝트가 모범 사례를 따르고 코딩 규칙을 적용하며 코드 품질을 보장하도록 도와줍니다. ESlint은 Javascript 코드를 독점적으로 린트하는 정적 코드 분석 도구입니다.

ESlint 설정이 있는 모든 프로젝트는 개발자의 전문성에 관계없이 코드 일관성을 준수합니다. ESlint는 코드를 스캔하고 잠재적인 오류와 문체 오류를 보고합니다. 따라서 개발자는 코드를 검토하기 전에 오류를 즉석에서 수정할 수 있습니다.

ESlint가 코딩 스타일을 수정하는 동안 Prettier 서식을 수정하기 위해 동반할 수 있습니다.

이 기사에서는 Vue 프로젝트에서 공유할 수 있는 재사용 가능한 ESlint 구성을 노출하는 패키지를 만들어 보겠습니다.

다음 명령을 실행하여 npm 패키지를 생성합니다. 패키지 이름이 eslint-config와 같이 eslint-config-vue-standards로 시작하는지 확인하십시오. 프로젝트에 npm 범위가 있는 경우 이름을 @scope/eslint-config로 지정할 수 있습니다.

npm init

이렇게 하면 프로젝트 디렉토리 아래에 package.json 파일이 생성됩니다.

ESlint를 설치하자.

npm install eslint --save-dev

ESlint는 devDependencies에 설치되고 이를 peerDependencies에 추가하여 소비자 애플리케이션이 동일한 버전의 ESlint를 설치하도록 합니다.

다음으로 Vue 파일을 지원하는 ESlint 플러그인을 설치해 보겠습니다.

npm install eslint-plugin-vue --save

ESlint 규칙은 스타일 가이드를 기반으로 완벽하게 구성할 수 있습니다. 완전히 또는 특정 조건에서 활성화/비활성화할 수 있습니다. 자세한 내용은 확인this guide.

Airbnb에서 권장하는 eslint-config-airbnb과 같이 많은 회사에서 사용하는 공유 가능한 ESlint 구성이 많이 있습니다. 마찬가지로, 따르는 스타일 가이드를 기반으로 프로젝트 또는 회사용 패키지로 고유한 구성 세트를 생성하고 다른 팀이 사용할 수 있도록 공유할 수도 있습니다. 이미 모범 사례를 시행하고 있는 일부 기존 구성을 설치해 보겠습니다.

npm install eslint-config-airbnb-base eslint-plugin-import eslint-plugin-vuejs-accessibility --save

설치된 구성을 확장할 수 있는 구성 파일index.js을 생성해 보겠습니다.

module.exports = {
  env: {
    es6: true,
    browser: true,
    node: true,
  },
  parserOptions: {
    ecmaVersion: 2021,
    sourceType: "module",
    ecmaFeatures: {
      jsx: true,
    },
  },
  extends: [
    "eslint:recommended",
    "airbnb-base",
    "plugin:import/recommended",
    "plugin:vue/recommended",
    "plugin:vuejs-accessibility/recommended"
  ],
  rules: {
    "vue/camelcase": ["error"],
  },
};

거기에서 env 및 parserOptions는 노드, 브라우저 및 jsx, ecma와 같은 파서와 같은 환경을 정의하는 데 사용됩니다. vuevue/camelcase 내의 표현식이 camelCase 규칙을 따르지 않을 때 오류를 발생시키는 error 구성의 <template> 규칙을 추가했습니다.

이제 더 예쁘게 구성하자,

npm install prettier --save-dev

ESlint와 마찬가지로 Prettier도 peerDependency여야 합니다.

더 예쁜 구성을 설치하자,

npm install eslint-config-prettier eslint-plugin-prettier --save

더 예쁜 구성을 추가한 후의 최종 구성은 아래와 같습니다.

module.exports = {
  env: {
    es6: true,
    browser: true,
    node: true,
  },
  parserOptions: {
    ecmaVersion: 2021,
    sourceType: "module",
    ecmaFeatures: {
      jsx: true,
    },
  },
  extends: [
    "eslint:recommended",
    "airbnb-base",
    "plugin:import/recommended",
    "plugin:vue/recommended",
    "plugin:vuejs-accessibility/recommended",
    "prettier",
    "plugin:prettier/recommended",
  ],
  rules: {
    "vue/camelcase": ["error"],
  },
};

더 예쁜 구성 파일.prettierrc.js이 소비자 응용 프로그램에 상주해야 한다는 점에 유의해야 합니다.

module.exports = {
  tabWidth: 2,
  singleQuote: true
}

예이.끝났어!
이 패키지를 게시하고 모든 vue 애플리케이션에서 사용할 수 있습니다. 로컬에서 테스트하려면 다음 명령을 실행하여 설치할 수 있습니다.

npm install <path-to-application>/eslint-vue-blog --save-dev

이 패키지는 Github에서 사용할 수 있습니다.