Webpack + ESLintでプロジェクトのコードスタイルを守る

## はじめに
　　はじめまして。Zealsでフロントエンドエンジニアとして働いている王です。
　　チームのプロジェクト開発では、普段新機能の開発よりコードのメンテナンスに費やされる時間の割合は大きいです。 したがって、チームのコードスタイルに準拠したコードを記述することが重要であり、これにより基本的なエラーやバグを回避できるだけでなく、コードの可読性も確保できます。
　　コードバージョン管理システム（SVN、GITなど）の場合、コードの一貫性がないコードは問題を引き起こします。一貫性のあるコードの場合にも、バージョン管理システムは異なるコードスタイルのため`diff`としてマークされ、コードの確認ができなくなります...
　　今回は、ESLintと組み合わせたWebpackを使って、コードベースのJavaScriptのコードスタイルをチェックする方法を簡単に紹介します。

## ESlint設定

### 1.ESlintのインストール
　　プロジェクトでESLintを使用するには、最初に`npm install -D eslint`コマンドを使って、CLIツールをインストールします。
　　「airbnb」、「google」、「standard」などのコードスタイルのルールを使いたい場合は、下のコマンドでインストールできます。
  　　**airbnb**: `npm install --save-dev eslint-config-airbnb`
  　　**google**: `npm install --save-dev eslint-config-google`
  　　**standard**: `npm install --save-dev eslint-config-standard`
　　次に、ESLint設定ファイルを作成する必要があります.`npx eslint --init`コマンドを使って、`.eslintrc.json`ファイルを作成します。この時点に、ターミナルでいくつかの質問に答えて、最後にコードスタイルを選択する必要がありますが、これらの質問は実際の状況に応じて答えます。

### 2.ESlintのセットアップ
　　ESLintをインストールしたら、生成された `.eslintrc.json`ファイルを設定する必要があります。もし既存のルール（「airbnb」、「google」、「standard」など）がインストールしったら、 `.eslintrc.json`設定ファイルの` extends`プロパティも変更する必要があります。

```json:.eslintrc.json
{
    "env": {
        "browser": true,
        "es6": true
    },
    "extends": [
        "plugin:react/recommended", 
        "airbnb"  // airbnbのコードスタイルのルールをインストールした
    ],
    "globals": {
        "Atomics": "readonly",
        "SharedArrayBuffer": "readonly"
    },
    "parserOptions": {
        "ecmaFeatures": {
            "jsx": true
        },
        "ecmaVersion": 2018,
        "sourceType": "module"
    },
    "plugins": [
        "react",
    ],
    "rules": {
    }
}
```
そして、チームのニーズに応じて、`.eslintrc.json`設定ファイルで`rules`プロパティのルールを作成します。
（すべてのESLintルールは、<a href="https://eslint.org/docs/rules/">rules</a>ページで読めます）

```json:.eslintrc.json
{
    "env": {
        "browser": true,
        "es6": true
    },
    "extends": [
        "plugin:react/recommended",
        "airbnb"
    ],
    "globals": {
        "Atomics": "readonly",
        "SharedArrayBuffer": "readonly"
    },
    "parserOptions": {
        "ecmaFeatures": {
            "jsx": true
        },
        "ecmaVersion": 2018,
        "sourceType": "module"
    },
    "plugins": [
        "react",
    ],
    "rules": { // `rules`プロパティのルールを作成する
        "no-console": 2,
        "no-debugger": 2,
        "no-alert": 2,
        "no-unused-vars": 2,
        "no-undef": 2, 
        "no-dupe-args": 2,
        "no-duplicate-case": 2,
        "no-unreachable": 2,
        ...
    }
}
```
**「注意：`rules`の違反は止むを得ない場合に、ESLintのコメントを使用してエラーを排除できます」**

```js
// eslint-disable-next-line
alert('alertを使わなければならない'); // eslint-disable-line
console.log('console.logを使わなければならない'); // eslint-disable-line
```

*ESLintの設定はこれで終わりです。*

## ESLintとWebpackの組み合わせ
まず、下のコメントで`eslint-loader`と`eslint-formatter-friendly`ライブラリをインストールします。`eslint-formatter-friendly`ライブラリはターミナルでのエラーログを読みやすくすることができます。

```
npm install -D eslint-loader
npm i -D eslint-formatter-friendly
```
次に、プロジェクトの`webpack.config.js`の`module.rules`部分で下のようなコード追加します。

```js:webpack.config.js
...
module: {
    rules: [
        ...
        {
            test: /\.(js|jsx)$/,
            loader: 'eslint-loader',
            enforce: 'pre', // まずコードスタイルをチェックする、その後、Babelが動ける
            include: [path.resolve(__dirname, 'src')],
            options: {
                formatter: formatter // エラーログのスタイルを設置する
            }
        }
    ]
}
```
そして、テスト用の`index.js`を作リます

```js:index.js
import _ from 'lodash';
const a = 1;
const b = 2;
alert(b);
console.log(b);
```
最後、`npx webpack`命令で、webpackをやると、下のような画面が見えます
<img width="891" alt="error-log.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/180341/f1cc9941-9ed1-e6ce-eff6-7cc60a1d1e8c.png">
## 終わりに
ただ簡単な紹介しましたが、文章を最後まで読んでいただきありがとうございました。
明日は18日目の @banetya の番です。
引き続き宜しくお願いいたします。