ESLint

ESLint는 자바스크립트 코드에서 발견되는 문제시되는 패턴들을 식별하기 위한 정적 코드 분석 도구이다. 니콜라스 C. 자카스가 2013년에 개발하였다. ESLint의 규칙들은 구성이 가능하며, 사용자가 지정한 규칙들을 정의하고 로드할 수 있다. 위키백과
라이선스: MIT 라이선스

vue3 eslint
eslint rules

VSCode에서 확장프로그램 ESLint 도 함께 설치해야 한다.

ESLint 설치

npm install -D @babel/eslint-parser eslint eslint-plugin-vue

ESLint 설치하기

npm install -g eslint

ESLint 생성하기

eslint --init

.eslintrc.js파일 생성

module.exports = {
    "env": {
        "browser": true,
        "es2021": true
    },
    "extends": [
        // js
        "eslint:recommended",
        // vue
        // "plugin:vue/vue3-essential" // LV1
        "plugin:vue/vue3-strongly-recommended" // LV2
        // "plugin:vue/vue3-recommended" // LV3
    ],
    "overrides": [
        {
            "env": {
                "node": true
            },
            "files": [
                ".eslintrc.{js,cjs}"
            ],
            "parserOptions": {
                "sourceType": "script"
            }
        }
    ],
    "parserOptions": {
        parser: "@babel/eslint-parser",
        "ecmaVersion": "latest",
        "sourceType": "module"
    },
    "plugins": [
        "vue"
    ],
    "rules": {
        "vue/html-closing-bracket-newline": ["error", {
            "singleline": "never",
            "multiline": "never"
          }],
          "vue/html-self-closing": ["error", {
            "html": {
              "void": "always",
              "normal": "never",
              "component": "always"
            },
            "svg": "always",
            "math": "always"
          }]
        
    }
}

command + shift + p

Settings 검색 -> 기본 설정: 사용자 설정 열기(JSON)

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

저장 시 ESLint 설정에 맞게 수정되며 저장