( VUE ) ESLint 설치

# 에스린트 설치

( Vue eslint 공식 문서 )

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

2. 루트 위치에 .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-플러그인-뷰

eslint 플러그인을 참조하여 eslint 규칙을 준수하고 수정하여 작업합니다.

settings.json 설정에 추가

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

## # vscode에서 eslint 설정이 일치하지 않는 상태의 코드는 저장시 eslint에 맞게 변경됨