ESLint

이전 글에서 개발환경 설정을 진행하였습니다. 이에 더해, ESlint를 설정해보도록 하겠습니다.

1. 패키지 설치

$ npm i -D eslint eslint-plugin-vue babel-eslint

위와 같이 ESLint에 필요한 패키지를 설치하였습니다.

2. .eslintrc.js

루트 경로에 .eslintrc.js 파일을 만들고 구성 옵션을 추가합니다.

2.1 구성 옵션

module.exports = {
  env: {
    browser: true,
    node: true
  },
  extends: [
    // vue
    // 'plugin:vue/vue3-essential', // Lv1
    'plugin:vue/vue3-strongly-recommended', // Lv2
    // 'plugin:vue/vue3-recommended', // Lv3
    // js
    'eslint:recommended'
  ],
  parserOptions: {
    parser: 'babel-eslint'
  },
  rules: {
  }
}

'plugin:vue/vue3-strongly-recommended': 설치한 eslint-plugin-vue 패키지에서 제공하는 기본적인 코드 검사 규칙(코드 권장 사항)입니다. 이외에도 한 단계 낮은 'plugin:vue/vue3-essential'과 가장 엄격한 'plugin:vue/vue3-recommended'가 있습니다.

'eslint:recommended': eslint에서 권장하는 코드 규칙을 통해 JavaScript 문법 검사를 진행합니다.

parser: 'babel-eslint': parserOptions에는 기본적인 코드 분석기를 입력합니다. eslint를 통해 JavaScript의 코드를 검사할 때, 'babel-eslint'의 패키지의 도움을 받습니다.

rules: {}: 이외에도 추가적으로 필요한 규칙을 명시할 수 있습니다.

2.2 eslint-plugin-vue 관련

  extends: [
  'plugin:vue/vue3-essential', // Lv1
  'plugin:vue/vue3-strongly-recommended', // Lv2
  'plugin:vue/vue3-recommended', // Lv3
]

위와 같이 세 가지의 코드 검사 규칙을 볼 수 있었습니다. 해당 관련 규칙은 여기에서 더욱 자세히 확인할 수 있습니다. 해당 홈페이지에서는 eslint-plugin-vue에서 Vue.js에서 코드를 작성하는 각각의 규칙을 명시해놓고 있습니다. 그 규칙을 개인의 입맛에 맞거나 혹은 팀의 합의에 맞게 Options를 적용하여 프로젝트를 완성하게 됩니다.

2.3 eslint:recommended 관련

extends: [
  'eslint:recommended'
]

ESLint Rules 페이지에서는 위의 옵션에 대해 확인할 수 있습니다. 해당 홈페이지에는 ESLint를 통해 관리할 수 있는 JavaScript의 코드 규칙들이 명시되어 있습니다. 이 규칙에 맞추어 코드를 작성해야하며 그렇지 않다면 에러가 발생하게 됩니다. 물론, 위에 언급했다시피 절대적인 규칙은 아니며 팀의 합의에 맞게 수정하는 것이 가능합니다.

3. rules 수정하기

위에서 이야기한 rules에 본인의 취향 혹은 팀의 합의에 따라 수정하는 경우가 있습니다. 이를 직접 해보도록 하겠습니다.

3.1 multiline

rules: {
    "vue/html-closing-bracket-newline": ["error", {
      "singleline": "never",
      "multiline": "never" // default값은 "always"
    }]
  }

이는 multiline에서 닫히는 > 괄호를 반드시 다음줄에 명시해야한다는 규칙입니다. 이를 수정하기 위해서 default 값인 "always"를 "never"로 수정하였습니다.

3.2 closing

rules: {
  "vue/html-self-closing": ["error", {
    "html": {
      "void": "always", // default값은 "never"
      "normal": "never", // default값은 "always"
      "component": "always"
    },
    "svg": "always",
    "math": "always"
  }]
}

"void": "always": 빈 태그에 self-closing을 항상 하는 것으로 규칙을 변경하였습니다.
"normal": "never": 일반 태그에는 self-closing을 하지 않겠다고 수정하였습니다.

4. 자동 수정

VS code에서 오류가 발생하게 되면, 오류가 그대로 저장되게 됩니다. 이를 eslint 규칙에 맞게 자동으로 수정하여 저장하도록 변경해보도록 하겠습니다.

4.1 명령 팔레트

macOS에서는 cmd + shift + p, Windows에서는 Ctrl + shift + p로 명령 팔레트를 열어줍니다.

4.2 settings 검색

settings를 키워드로 검색하여 기본설정: 설정 열기(JSON)을 선택합니다.

4.3 settings.json 옵션 추가

"editor.codeActionsOnSave": {
  "source.fixAll.eslint": true
}

위와 같이 자동으로 수정하여 저장한다는 옵션에 true를 명시해줍니다.