エディタの設定

Create React Appには、正しく設定すれば編集エクスペリエンスを向上させる多くのツールが付属しています。生産性を最大限に高めるためのいくつかのヒントを以下に示します。

構文ハイライト

お気に入りのテキストエディタで構文ハイライトを設定するには、関連するBabelドキュメントページにアクセスして、指示に従ってください。最も人気のあるエディタの一部が網羅されています。

エディタでのLint出力の表示

注：この機能は、react-scripts@0.2.0以降で使用できます。

react-scripts@2.0.3以降で新規作成されたプロジェクトでは、すぐに動作します。

npm 3以降でのみ動作します。

Sublime Text、Atom、Visual Studio Codeなどの一部のエディタは、ESLintのプラグインを提供しています。

それらは、lintに必須ではありません。リンターの出力は、ターミナルとブラウザコンソールに表示されます。lintの結果をエディタに直接表示する場合は、ESLintプラグイン/拡張機能をインストールしてください。

ESLintの設定をカスタマイズした場合でも、これらの変更は**エディタの統合のみに影響します**。ターミナルとブラウザ内でのlint出力には影響しません。これは、Create React Appが意図的に一般的な間違いを見つける最小限のルールセットを提供しているためです。

プロジェクトのコーディングスタイルを適用する場合は、ESLintのスタイルルールではなく、Prettierの使用を検討してください。

デフォルトのESLint設定の拡張または置換

基本のESLint設定を拡張したり、必要に応じて完全に置き換えたりできます。

覚えておくべきことがいくつかあります。

基本設定の拡張を強くお勧めします。削除すると、発見が困難な問題が発生する可能性があります。
TypeScriptを使用する場合は、TypeScriptファイルのみに対象となるルールに`overrides`オブジェクトを提供する必要があります。
`"error"`に設定されているルールは、プロジェクトのビルドを停止することに注意してください。

以下の例では

基本設定は共有ESLint設定によって拡張され、
すべてのJavaScriptとTypeScriptファイルに適用される新しいルールが設定され、
TypeScriptファイルのみに対象となる新しいルールが設定されています。

{
  "eslintConfig": {
    "extends": ["react-app", "shared-config"],
    "rules": {
      "additional-rule": "warn"
    },
    "overrides": [
      {
        "files": ["**/*.ts?(x)"],
        "rules": {
          "additional-typescript-only-rule": "warn"
        }
      }
    ]
  }
}

エディタでのデバッグ

この機能は現在、Visual Studio CodeとWebStormのみでサポートされています。

Visual Studio CodeとWebStormは、Create React Appですぐにデバッグをサポートしています。これにより、開発者はエディタを離れることなくReactコードの記述とデバッグが可能になり、最も重要なことは、ツールを切り替える必要がないため、コンテキストの切り替えが最小限に抑えられ、継続的な開発ワークフローが可能になります。

Visual Studio Code

VS Codeの最新バージョンと、VS CodeのChromeデバッガー拡張機能をインストールする必要があります。

次に、以下のブロックを`launch.json`ファイルに追加し、アプリのルートディレクトリ内の`.vscode`フォルダに配置します。

{
  "version": "0.2.0",
  "configurations": [
    {
      "name": "Chrome",
      "type": "chrome",
      "request": "launch",
      "url": "http://localhost:3000",
      "webRoot": "${workspaceFolder}/src",
      "sourceMapPathOverrides": {
        "webpack:///src/*": "${webRoot}/*"
      }
    }
  ]
}

注：HOSTまたはPORT環境変数を調整した場合、URLが異なる場合があります。

npm startを実行してアプリを起動し、F5キーを押すか、緑色のデバッグアイコンをクリックしてVS Codeでデバッグを開始します。これで、コードの記述、ブレークポイントの設定、コードへの変更、新しく変更されたコードのデバッグをすべてエディタから行うことができます。

VS Codeデバッグで問題が発生した場合は、トラブルシューティングガイドを参照してください。

WebStorm

WebStormとJetBrains IDE Support Chrome拡張機能をインストールする必要があります。

WebStormメニューの`実行`で`構成の編集...`を選択します。次に`+`をクリックして`JavaScriptデバッグ`を選択します。URLフィールドに`http://localhost:3000`を貼り付けて、設定を保存します。

注：HOSTまたはPORT環境変数を調整した場合、URLが異なる場合があります。

npm startを実行してアプリを起動し、macOSでは^D、WindowsとLinuxではF9キーを押すか、緑色のデバッグアイコンをクリックしてWebStormでデバッグを開始します。

同じ方法で、IntelliJ IDEA Ultimate、PhpStorm、PyCharm Pro、RubyMineでアプリケーションをデバッグできます。

コードの自動フォーマット

Prettierは、JavaScript、CSS、JSONをサポートする、意見の強いコードフォーマッターです。Prettierを使用すると、記述したコードを自動的にフォーマットして、プロジェクト内でコードスタイルを確保できます。詳細についてはPrettierのGitHubページを参照し、このページで動作を確認してください。

gitでコミットするたびにコードをフォーマットするには、次の依存関係をインストールする必要があります。

npm install --save husky lint-staged prettier

または、`yarn`を使用することもできます。

yarn add husky lint-staged prettier

`husky`を使用すると、githooksをnpmスクリプトのように使用できます。
`lint-staged`を使用すると、gitのステージングされたファイルに対してスクリプトを実行できます。lint-stagedに関するブログ記事を参照して、詳細を確認してください。
`prettier`は、コミット前に実行するJavaScriptフォーマッターです。

これで、プロジェクトルートの`package.json`に数行追加することで、すべてのファイルが正しくフォーマットされていることを確認できます。

`package.json`セクションに次のフィールドを追加します。

+  "husky": {
+    "hooks": {
+      "pre-commit": "lint-staged"
+    }
+  }

次に、例として`package.json`に`lint-staged`フィールドを追加します。

  "dependencies": {
    // ...
  },
+ "lint-staged": {
+   "src/**/*.{js,jsx,ts,tsx,json,css,scss,md}": [
+     "prettier --write"
+   ]
+ },
  "scripts": {

コミットするたびに、Prettierが変更されたファイルを自動的にフォーマットします。また、`./node_modules/.bin/prettier --write "src/**/*.{js,jsx,ts,tsx,json,css,scss,md}"`を実行して、プロジェクト全体を最初にフォーマットすることもできます。

次に、お気に入りのエディタにPrettierを統合することをお勧めします。Prettier GitHubページのエディタ統合に関するセクションを参照してください。

構文ハイライト​

エディタでのLint出力の表示​

デフォルトのESLint設定の拡張または置換​

エディタでのデバッグ​

Visual Studio Code​

WebStorm​

コードの自動フォーマット​