[Vue.js] ESLint

ESLint

1. 패키지 설치

$ npm i -D eslint eslint-plugin-vue babel-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 패키지에서 제공하는 기본적인 코드 검사 규칙(코드 권장 사항)입니다. 

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

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

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

 

3. 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를 명시해줍니다.