WebStormでAirbnbのJavascript style guideベースのESLintを使う

# 概要

以下に関するメモです

- WebStormのESLint連携機能を使う方法（WebStormのJSCS連携機能は使わない)
- ESLintはAirbnbのJavaScript Style Guideをベースにします
- WebStormのコードフォーマッターもこれにあわせ変更します

## 環境

- WebStorm 2019.3
- ES6
- Webpack4
- Babel7

# WebStormでESLint対応する

## WebStormのESLintサポートを有効にする

**File > Settings**で設定画面を開き
**Languages&Frameworks > JavaScript > Code Quality Tools > ESLint**　と進み**Automatic ESLint configuration**を選択する

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/170905/6d36e496-5c97-99a3-b6b2-4420f040495a.png)

これで、プロジェクトにある**.eslintrc**や**.eslintignore**をよみにいってESLintが使えるようになる。
以下のようにエディタ上で違反箇所が<font color=red>赤</font>になって確認できるようになる。カーソルをあてれば、詳細や自動修正の候補が出るので便利。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/170905/0d4ac815-04b5-2752-8a7f-a82460c1c7e6.png)


## WebStormのコードフォーマッターをESLint用にしつける

WebStormのコードフォーマッターで自動フォーマットするときに、Airbnbスタイルガイドにそったフォーマットをするようにする。

### しつけ、その1 改行コードは**LF**にすべし「**linebreak-style**」

●AirbnbスタイルになるようにWebStormを設定する

**File > Settings**で設定画面を開き
**Editor > Code Style**で **General** タブを選択する

- **Line separator**の値を"**Unix and macOS(\n)**"にする

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/170905/35af6388-7c5f-e640-367f-32e1b19c3c0b.png)

※新規ファイルの場合は↑でOK。既存ファイルの改行コードを変更するときは、エディタ右下に**CRLF**などと書いてあるのでそれをクリックして、**LF**に変更すればOK


![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/170905/6758bf5c-c27d-6714-4bfa-ada62dcad01f.png)


### しつけ、その2　インデント「**indent**」

●WebStormのデフォルトフォーマットだとこんなエラーになる

<font color=red>Expected indentation of 2 spaces but found 4</font>


●AirbnbスタイルになるようにWebStormを設定する

**File > Settings**で設定画面を開き
**Editor > Code Style > JavaScript ** で**Tabs and Indents**タブを選択

- **Use tab character**のチェックを外す
- **Tab size**を**2**にする
- **Indent**を**2**にする
- **Continuation indent**を**2**にする

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/170905/e347096d-9cbb-4061-da5f-6a3ece36ca56.png)

### しつけ、その3 関数の括弧()の前あけろ「**space-before-function-paren**」

●Airbnbスタイルに嫌がられる書き方

```javascript
function test ()
```

→<font color=red>Unexpected space before function parentheses</font>

●Airbnbスタイルに好まれる書き方

```javascript
function test()
```

●AirbnbスタイルになるようにWebStormを設定する

**File > Settings**で設定画面を開き
**Editor > Code Style > JavaScript**で**Spaces**タブを選択する

- **Before Parentheses/In function expression**のチェックを外す

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/170905/3a042be8-0ada-2112-1640-99210a6f9c8a.png)


### しつけ、その4 中括弧{}の内側にスペースいれろ「**object-curly-spacing**」

●Airbnbスタイルに嫌がられる書き方

```javascript
export {default} from './my-lib';
```

→<font color=red>A space is required after '{'</font>  

→<font color=red>A space is required after '}'</font>

●Airbnbスタイルに好まれる書き方

```javascript
export { default } from './my-lib';
```

●AirbnbスタイルになるようにWebStormを設定する

**File > Settings**で設定画面を開き
**Editor > Code Style > JavaScript**で**Spaces**タブを選択する

- **Object literal braces**にチェックを入れる
- **ES6 import/export braces**にチェックを入れる

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/170905/fb7640f2-d2e5-924b-64ca-fe6094d4eef5.png)

# 参考

## ESLintに必要なパッケージをインストールする

WebStormの設定にいくまえに、npmプロジェクトでESLint(Airbnbスタイル)を使えるようにする

- ESLintをインストールする

```shell
npm install --save-dev eslint eslint-loader
```

- Babelで使えるコード(ES6,ES7で書いたコードなど)でESLintがつかえるよう、**babel-eslint**をインストールする。

```
npm install --save-dev babel-eslint
```

ここまでで、ESLintが使えるようになるが、
Airbnbのスタイルガイドに対応させるため、もう一手間以下を実行する。

```
npx install-peerdeps --dev eslint-config-airbnb-base
```

## .eslintrc を作る

```
{
  "parser": "babel-eslint",
  "extends": ["airbnb-base"],
  "root": true,
  "env": {
    "browser": true,
    "node": true
  },
  "rules": {
    "class-methods-use-this":"off"
  }
}
```

# まとめ＆いつもありがとう静的解析さん

- ES6,Babel7,Webpack4という環境でAirbnbスタイルのESLintをWebStormと連携する方法について説明しました
- 新しい設定があれば、適宜追加していきます
- lint,QAC,Coverity,Fortifyそして、なんとかLint。静的解析レポートは新しい知識を得るきっかけになります。何年たっても。