[VueJS] Vue eslint 적용하기

VueJS 를 위한 eslint 적용하게 된 계기

항상 side project를 하거나, 개인적으로 프로젝트를 만들 때에는 eslint를 붙여서 작업해놓고 정작 회사에서는 사용을 안하고 있었다. 세팅이 어렵거나 하진 않지만, 붙이고 나서 다시 손보아야 할 기존 소스들에 대한 시간 소요가 귀찮아서였다.. 그러다 이번에 또 새로운 UI 개발자의 합류 소식에 붙여야 겠다는 생각이 들어서 하루 날잡아 환경 설정을 해두었다. 처음 붙였을 때, eslint로 인한 error가 1700 개나 나와 한숨 밖에 안 나왔지만…이 참에 삽질을 하면서 느낀 점과 개인적으로 필요했다고 느끼는 eslint option에 대해서 정리를 하게되는 계기가 되었다.

일단 지금 회사에서 진행하고 있는 프로젝트에서는 이 전에 설명했던 Laravel-mix를 사용하고 있다. 혹시 Laravel-mix의 사용법에 대해 보고 싶다면 (여기)[http://blog.martinwork.co.kr/nodejs/2017/11/25/what-is-laravel-mix.html] 를 클릭하면 된다.

사실 eslint를 적용하게 된 가장 큰 계기는 Vue 템플릿 작성의 standard 한 규칙을 최대한 지키고 싶어서였다. 스타일 가이드도 나와있고 하지만 사실 그러한 스타일 가이드를 처음부터 끝까지 다 본적도 없었거니와, 외운다는 것도 쉽지 않아보였다.

VueJS를 위한 eslint 적용하기

일단 먼저 vue에서 공식으로 지원하는 ESlint플러그인을 이용하여 설정을 하였다. 일단 requirements로는 eslint의 버전이 3.18.0 이상이다. 자세한 내용운 (eslint-plugin-vue github)[https://github.com/vuejs/eslint-plugin-vue] 에 가면 볼 수 있다.

먼저 해당 플로그인을 설치한다.

$ npm install --save-dev eslint eslint-plugin-vue

그 후, 최상의 root에 .eslintrc.js 파일을 설정해준 후, github에서 나오는 것처럼 안의 내용을 넣어주었다.

module.exports = {
    root: true,
    extends: [
        'standard',
        'plugin:vue/essential'
    ],
    parserOptions: {
        parser: 'babel-eslint',
        ecmaVersion: 2017,
        sourceType: 'module'
    },
    plugins: [
        'html',
        'standard',
        'vue'
    ],
    env: {
        browser: true
    },
    rules: {
    }
}

일단 이렇게 기본 셋팅을 넣어줬다. 그 후, 입맛에 맞게 몇 가지 custom 규칙을 넣었다.

module.exports = {
    root: true,
    extends: [
        'standard',
        'plugin:vue/essential'
    ],
    parserOptions: {
        parser: 'babel-eslint',
        ecmaVersion: 2017,
        sourceType: 'module'
    },
    plugins: [
        'html',
        'standard',
        'vue'
    ],
    env: {
        browser: true
    },
    rules: {
        'generator-star-spacing': 'off',
        'indent': [ 'error', 4 ],
        'brace-style': [ 'error', '1tbs' ],
        'semi': [ 'error', 'always' ],
        'no-console': 'error',
        'comma-dangle': [ 'error', {
            'arrays': 'never',
            'objects': 'always-multiline',
            'imports': 'never',
            'exports': 'never',
            'functions': 'never'
        }],
        'no-multiple-empty-lines': [ 'error', { 'max': 2, 'maxBOF': 1 }],
        'no-undef': 'error',
        'space-in-parens': ['error', 'never'],
        'no-debugger': process.env.NODE_ENV === 'production' ? 2 : 0,
        'space-before-function-paren': [
            'error',
            'always'
        ],
        'quotes': ['error', 'single'],
        'space-before-blocks': [
            'error',
            'always'
        ],
        'no-empty': 'error',
        'no-duplicate-imports': 'error'
    }
}

이렇게 셋팅 후, laravel-mix의 rule에다가 아래의 규칙을 추가해주었다.

{
    enforce: 'pre',
    test: /\.(js|vue)$/,
    include: [ path.resolve(__dirname, 'resources/assets/js') ],
    exclude: [/(node_modules|bootstrap.js)/, path.resolve(__dirname, 'resources/assets/js/app.js')],
    loader: 'eslint-loader'
},

Comments