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

13756 ワード
JavaScript webpack ESLint フロントエンド JavaScript テキストリンク

はじめに

　　はじめまして。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プロパティも変更する必要があります。

.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ルールは、rulesページで読めます）

.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のコメントを使用してエラーを排除できます」

// 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部分で下のようなコード追加します。

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

そして、テスト用のindex.jsを作リます

index.js
import _ from 'lodash';
const a = 1;
const b = 2;
alert(b);
console.log(b);

最後、npx webpack命令で、webpackをやると、下のような画面が見えます

終わりに

ただ簡単な紹介しましたが、文章を最後まで読んでいただきありがとうございました。
明日は18日目の @banetya の番です。
引き続き宜しくお願いいたします。