# install eslint

[ Vue eslint 공식문서 ]

1. npm i -D eslint eslint-plugin-vue babel-eslint 설치

2. root 위치에 .eslintrc.js 파일 생성

module.exports = {
    //browser & node의 환경에서 코드를 검사할것인지 설정
    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에서 권장하는 기본적인 코드규칙
        'eslint:recommended'
    ],
    parserOptions: {
        //babel을 통하여 JavaScript 호환하여 코드 검사하기에 해당하는 패키지 도움을 위해 명시 
        parser: 'babel-eslint'
    },
    rules: {
        // extends에서 제공하는 그대로의 규칙을 사용할경우 rules영역은 생략가능
        //코드의 새로운 줄바꿈을 하지 않음(never) 설정
        "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"
        }]
    }
}

# eslint-plugin-vue

eslint plugin 을 참고하여 eslint 규칙을 준수하고 수정하여 작업한다.

3. settings.json 설정에 추가

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

## #  vscode에서 eslint설정에 맞지 않은 상태의 코드의경우 저장시 eslint에 맞게 바뀜