More than 5 years have passed since last update.

WebStorm x ESLint 設定の覚書 (ES6, babel-eslint, Switch文インデントルール変更)

Last updated at 2018-05-16Posted at 2018-05-16

node.jsの開発は主にWebStormで開発をしていますが、ESLintを導入時にやったことを備忘します。

環境系

WebStorm 2016.3.2
eslint 4.19.3
babel-eslint 8.2.3

やったこと①: `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