Help us understand the problem. What is going on with this article?

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

More than 1 year has passed since last update.

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にしておく。
スクリーンショット 2018-05-16 18.05.14.png

やったこと③

Expected indentation of 4 spaces but found 8

スクリーンショット 2018-05-16 17.40.17.png

的な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
スクリーンショット 2018-05-16 17.33.50.png

◆AFTER
スクリーンショット 2018-05-16 17.33.59.png

これで、「Command+A」で全体選択してから、「option+Command+L」 で整形したらESLint側のルールとピタッとなります。簡単ですが以上です。

Why do not you register as a user and use Qiita more conveniently?
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away
Comments
Sign up for free and join this conversation.
If you already have a Qiita account
Why do not you register as a user and use Qiita more conveniently?
You need to log in to use this function. Qiita can be used more conveniently after logging in.
You seem to be reading articles frequently this month. Qiita can be used more conveniently after logging in.
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away