Visual Studio CodeでCreate React AppとESLintを連携させる
Create React AppにおけるESLintの統合
Create React Appは、Reactアプリケーションを簡単に作成するためのツールです。ESLintは、JavaScriptコードの静的解析ツールであり、コード品質の向上に役立ちます。このチュートリアルでは、Create React AppでESLintをどのように統合するかを説明します。
前提知識
このチュートリアルを理解するには、以下の知識が必要です。
- Create React Appの使い方
- ESLintの使い方
- Visual Studio Codeの使い方
手順
- ESLintとESLintプラグインをインストール
npm install --save-dev eslint eslint-plugin-react eslint-plugin-jsx eslint-plugin-import
- ESLint設定ファイルを作成
npx eslint --init
.eslintrc.jsonファイルを編集
- 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プロジェクトを開きます。コードにエラーがあると、エディターの行番号に赤い波線が表示されます。エラーの詳細については、ツールバーの「エラー」パネルを参照してください。
補足
- Create React Appは、ESLintだけでなく、PrettierやStylelintなどの他の静的解析ツールも統合できます。
- ESLintの設定は、プロジェクトごとにカスタマイズできます。
- 詳細については、ESLintのドキュメントを参照してください。
- このチュートリアルでは、Visual Studio Codeをエディターとして使用しています。他のエディターを使用している場合は、設定が異なる場合があります。
- Create React Appは、継続的に更新されています。このチュートリアルに記載されている手順が古くなっている可能性があることに注意してください。
// src/App.js
import React from 'react';
const App = () => {
return (
<div className="App">
<h1>Hello, world!</h1>
</div>
);
};
export default App;
このコードには、以下のエラーがあります。
AppコンポーネントにはpropTypesが定義されていません。AppコンポーネントにはcomponentDidMountメソッドが定義されていません。
これらのエラーを修正するには、以下のコードのように変更します。
// 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コンポーネントにpropTypesを追加して、nameプロップが必須の文字列であることを指定します。AppコンポーネントにdefaultPropsを追加して、nameプロップのデフォルト値を"World"に設定します。
これらの変更により、コードの品質が向上し、エラーがなくなります。
注:
- このサンプルコードは、説明目的のみで使用されています。実際のアプリケーションでは、より複雑なコードを使用する可能性があります。
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には、ESLintをプロジェクトに統合するためのスクリプトが用意されています。このスクリプトを使用するには、以下のコマンドを実行します。
npx create-react-app my-app --eslint
このコマンドを実行すると、Create React Appプロジェクトが作成され、ESLintが自動的に統合されます。
手動で設定ファイルを編集する
javascript reactjs visual-studio-code
