ESLint를 간단하게 설정

ESLint 설정은 다소 어렵습니다.

Vue.js 및 JavaScript 개발 환경에서
최소한의 것을 간단하게 설정하는 방법을 소개합니다.

今回使用するJS Concept: 

 - Standard JS

今回使用するpackages:

 - ESlint
 - husky
 - lint-staged

1.package.json에 다음을 추가합니다.

˜/package.json

{
  "scripts": {
    "lint": "eslint src"
  },
  "husky": {
    "hooks": {
      "pre-commit": "lint-staged"
    }
  },
  "lint-staged": {
    "*.{js,vue}": [ 
      "eslint --fix",
      "git add"
    ]
  },
  "devDependencies": {
    "babel-eslint": "^10.0.3",
    "eslint": "^6.5.1",
    "eslint-config-standard": "^14.1.0",
    "eslint-plugin-import": "^2.18.2",
    "eslint-plugin-node": "^10.0.0",
    "eslint-plugin-promise": "^4.2.1",
    "eslint-plugin-standard": "^4.0.1",
    "eslint-plugin-vue": "^5.2.3",
    "vue-eslint-parser": "^6.0.4"
  }
}

2.eslint 구성 파일을 만듭니다.

˜/.eslintrc.js

module.exports = {
    root: true,
    parser: 'vue-eslint-parser',
    parserOptions: {
        ecmaVersion: 2018,
        parser: 'babel-eslint',
        sourceType: 'module'
    },
    extends: ['standard'],
    plugins: [
        'vue'
    ],
    rules: {
        'vue/html-indent': ['error', 2] // 2 spaces for html indent
    }
}

3. npm install을 실행합니다. (yarn user는 yarn)

command-line

$ npm install

4. Editor에서 설정을 추가합니다.

JetBrains계의 경우

Preference -> Search: ESlint에서 Manual ESLint configuration 선택
ESlint package와 Configuration file을 다음과 같이 설정합니다.

VSCode의 경우

ESLint 용 extension이 있으므로 추가합니다.
htps : // 기주 b. 코 m / 미 c 로소 ft / vs 코데에 s t

설정은 이상입니다.

eslint를 실행합니다.

command-line

$ eslint --fix FILE_PATH

이상입니다.
심플한 설정으로 시작하여 커스터마이즈 해 나가면 점점 이해가 깊어져 재미 있습니다!