Vue eslint 적용하기

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'
},
Thanks for your reading, this article is provided by Martin If reproduced, please indicate the source:Martin(https://github.com/martinYounghoonKim
초보자의 Docker 사용기
Vue의 Lifecycle