Webpackで作成したReactアプリにeslintを導入する

2023-03-122024-04-01

はじめに

今回はWebpackで作成したReactアプリにeslintを導入する手順について説明します。
開発サーバーを起動中に、ミスがあればエラーを表示してくれるのでとても便利です。

前提

WebpackでのReactの開発環境構築が完了しているのを前提としています。

手順

eslintのインストールと初期設定

yarn add -D eslint

上記のコマンドでeslintのインストールを行います。

yarn eslint --init

上記のコマンドでeslintの初期設定を行います。

いろいろ聞かれるので今回は上記の様に回答します。

{
    "env": {
        "browser": true,
        "es2021": true,
+        "node": true
    },
    "extends": [
        "eslint:recommended",
        "plugin:react/recommended"
    ],
    "overrides": [
    ],
    "parserOptions": {
        "ecmaVersion": "latest",
        "sourceType": "module"
    },
    "plugins": [
        "react"
    ],
    "rules": {
+        "quotes": "error"
    }
}

ルート直下にある「/.eslintrc.json」を上記の様に修正します。

これがないと不要なエラーが出てしまいます。

Webpackでeslintが起動する様に設定する

yarn add -D vite-plugin-checker

上記のコマンドでWebpack上でeslintを使う時に必要なライブラリをインストールします。

const HtmlWebpackPlugin = require('html-webpack-plugin');
+ const ESLintPlugin = require('eslint-webpack-plugin');
module.exports = {
    module: {
        rules: [
            {
                test: /\.(js|jsx)$/,
                loader: 'babel-loader',
                options: {
                    presets: ['es2015', 'react']
                }
            }
        ]
    },
    plugins: [
        new HtmlWebpackPlugin({
            template: './public/index.html'
        }),
+         new ESLintPlugin()
    ]
};

上記の様にルート直下にある「webpack.config.js」を修正します。