Vue eslint 적용하기

Vue eslint 적용하기

  • 2018-02-03

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

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

일단 지금 회사에서 진행하고 있는 프로젝트에서는 이 전에 설명했던 Laravel-mix를 사용하고 있다.

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

VueJS를 위한 eslint 적용하기

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

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

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

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

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
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 규칙을 넣었다.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
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에다가 아래의 규칙을 추가해주었다.

1
2
3
4
5
6
7
{
    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'
},
현재 이커머스회사에서 frontend 개발자로 업무를 진행하고 있는 Martin 입니다. 글을 읽으시고 궁금한 점은 댓글 혹은 메일(hoons0131@gmail.com)로 연락해주시면 빠른 회신 드리도록 하겠습니다. 이 외에도 네트워킹에 대해서는 언제나 환영입니다.：Martin（https://github.com/martinYounghoonKim）
초보자의 Docker 사용기
Vue의 Lifecycle