Visual Studio CodeでCreate React AppとESLintを連携させる

Create React AppにおけるESLintの統合

Create React Appは、Reactアプリケーションを簡単に作成するためのツールです。ESLintは、JavaScriptコードの静的解析ツールであり、コード品質の向上に役立ちます。このチュートリアルでは、Create React AppでESLintをどのように統合するかを説明します。

前提知識

このチュートリアルを理解するには、以下の知識が必要です。

• Visual Studio Codeの使い方
• ESLintの使い方
• Create React Appの使い方

手順

1. ESLintとESLintプラグインをインストール

npm install --save-dev eslint eslint-plugin-react eslint-plugin-jsx eslint-plugin-import

1. ESLint設定ファイルを作成

npx eslint --init

1. .eslintrc.json ファイルを編集

1. Visual Studio CodeでESLint拡張機能をインストール

Visual Studio CodeでESLintを使用するには、ESLint拡張機能をインストールする必要があります。人気のある拡張機能には、ESLintとESLint (dbaeumer)があります。

Visual Studio CodeでESLintを有効にするには、> Code > Preferences > Settings に移動し、「eslint」を検索します。次に、editor.codeActions.onTriggerSuggest 設定を true に設定します。

動作確認

Visual Studio CodeでCreate React Appプロジェクトを開きます。コードにエラーがあると、エディターの行番号に赤い波線が表示されます。エラーの詳細については、ツールバーの「エラー」パネルを参照してください。

• 詳細については、ESLintのドキュメントを参照してください。
• ESLintの設定は、プロジェクトごとにカスタマイズできます。
• Create React Appは、ESLintだけでなく、PrettierやStylelintなどの他の静的解析ツールも統合できます。

この説明が、Create React AppでESLintを統合する方法を理解するのに役立つことを願っています。

• Create React Appは、継続的に更新されています。このチュートリアルに記載されている手順が古くなっている可能性があることに注意してください。
• このチュートリアルでは、Visual Studio Codeをエディターとして使用しています。他のエディターを使用している場合は、設定が異なる場合があります。

// src/App.js

import React from 'react';

const App = () => {
  return (
    <div className="App">
      <h1>Hello, world!</h1>
    </div>
  );
};

export default App;

このコードには、以下のエラーがあります。

• App コンポーネントには componentDidMount メソッドが定義されていません。
• App コンポーネントには defaultProps が定義されていません。

これらのエラーを修正するには、以下のコードのように変更します。

// src/App.js

import React from 'react';
import PropTypes from 'prop-types';

const App = ({ name }) => {
  return (
    <div className="App">
      <h1>Hello, {name}!</h1>
    </div>
  );
};

App.propTypes = {
  name: PropTypes.string.isRequired,
};

App.defaultProps = {
  name: 'World',
};

export default App;

このコードでは、以下の変更が行われています。

• App コンポーネントに defaultProps を追加して、name プロップのデフォルト値を "World" に設定します。
• App コンポーネントに propTypes を追加して、name プロップが必須の文字列であることを指定します。

これらの変更により、コードの品質が向上し、エラーがなくなります。

Create React AppでESLintを統合する他の方法

上記の手順で npm を使用してESLintとESLintプラグインをインストールしましたが、yarn を使用してインストールすることもできます。

yarn add --dev eslint eslint-plugin-react eslint-plugin-jsx eslint-plugin-import

npx を使用する

npx コマンドを使用して、ESLintとESLintプラグインをグローバルにインストールすることもできます。

npx install --global eslint eslint-plugin-react eslint-plugin-jsx eslint-plugin-import

この方法を使用すると、yarn や npm をプロジェクトにインストールする必要はありません。ただし、グローバルにインストールすると、すべてのプロジェクトで同じESLint設定が使用されることに注意してください。

Create React App スクリプトを使用する

Create React Appには、ESLintをプロジェクトに統合するためのスクリプトが用意されています。このスクリプトを使用するには、以下のコマンドを実行します。

npx create-react-app my-app --eslint

このコマンドを実行すると、Create React Appプロジェクトが作成され、ESLintが自動的に統合されます。