node.js의 개발은 주로 WebStorm에서 개발을 하고 있지만 ESLint를 도입할 때 했던 것을 비잊습니다.

환경계

WebStorm 2016.3.2

eslint 4.19.3

babel-eslint 8.2.3

1. : eslint --init 로 초기 설정, 해석 불가이었으므로 babel-eslint 를 도입

eslint --init 에서 적당하게 대답하여 npm scripts를 다음과 같이 지정.

package.json

..(略)..

  "scripts": {
    "lint": "eslint ./*.js ./lib/*.js"
  },

만일 npm run lint 로 걸면 ES6의 구문으로 쓰고 있었기 때문에 Parsing error: Unexpected token = 라고 에러가 나와 버려, 구문 분석을 할 수 없었으므로, 이하를 참고로 babel-eslint 의 설정을 했습니다.

ESLint에서 Parsing error: Unexpected token =이 되는 경우의 대처법

변경 후 .eslintrc.yml

eslintrc.yml

env:
  es6: true
  node: true
extends: 'eslint:recommended'
parserOptions:
  sourceType: module
rules:
  indent:
    - error
    - 4
  linebreak-style:
    - error
    - unix
  quotes:
    - error
    - single
  semi:
    - error
    - always
parser: babel-eslint

무슨 일 ② : WebStorm 설정

WebStorm상에 ESLint의 해석 결과가 나오도록 설정.
설정 화면의 ESLint 페이지에서 Enable로 둡니다.

했던 일③

Expected indentation of 4 spaces but found 8



Switch 문에서 들여 쓰기가 잘못되었습니다.
WebStorm 측의 들여쓰기 규칙을 조정했습니다.
Switch문 1행 직후의 case문 1행 사이에 공백을 넣지 않도록 지정.

참고 : JETBRAINS - JSLint and switch statements
Will unchecking Settings | Code Style | JavaScript | Wrapping and Braces | 'switch' statement | Indent 'case' branches option help?

디폴트에서는 스페이스 넣는 것으로 되어 있으므로, 체크를 해제합니다.

switch의 행 직후에 들여쓰기 스페이스 넣을까 넣지 않는지의 설정은 이하에서 실시.

◆BEFORE


◆AFTER


이제 Command+A로 전체를 선택하고 option+Command+L로 정형하면 ESLint측의 룰과 핏타가 됩니다. 쉽지만 이상입니다.