コードをもっと読みやすく！Visual Studio CodeでReact JSXコードの書式設定を変更する方法

Visual Studio Code で React JSX コードの書式設定を変更する方法

デフォルトの書式設定エンジンを使用する

Visual Studio Code のデフォルトの書式設定エンジンを使用して、React JSX コードの書式設定を変更するには、次の手順に従います。

1. コードを保存します。 コードを保存すると、Visual Studio Code は自動的にコードをフォーマットします。
2. ショートカットキーを使用します。 以下のショートカットキーを使用して、コードをいつでも手動でフォーマットできます。
   • Windows/Linux
     Ctrl + Shift + P または Cmd + Shift + P (Mac) を押してコマンドパレットを開き、「フォーマットドキュメント」と入力します。
   • Mac
     Cmd + Shift + I

Prettier 拡張機能を使用する

Prettier は、React JSX コードを含む様々なプログラミング言語のコードをフォーマットするためのより高度なオプションを提供する人気のある拡張機能です。 Prettier を使用するには、次の手順に従います。

Prettier を構成すると、コードを保存するたびに Prettier が自動的にコードをフォーマットします。

書式設定の例

以下の例は、デフォルトの書式設定エンジンと Prettier を使用してフォーマットされた React JSX コードを示しています。

デフォルトの書式設定エンジン

function App() {
  return (
    <div>
      <h1>Hello, World!</h1>
    </div>
  );
}

Prettier

function App() {
  return (
    <div>
      <h1>Hello, World!</h1>
    </div>
  );
}

Prettier は、コードをより簡潔で読みやすくするために、空白とインデントを自動的に調整します。

import React from 'react';

function Greeting(props) {
  return (
    <div>
      <h1>Hello, {props.name}!</h1>
      <p>Welcome to React JSX.</p>
    </div>
  );
}

export default Greeting;

import React from 'react';

function Greeting(props) {
  return (
    <div>
      <h1>Hello, {props.name}!</h1>
      <p>Welcome to React JSX.</p>
    </div>
  );
}

export default Greeting;

この例では、Greeting という名前の React コンポーネントを定義しています。 このコンポーネントは、name というプロパティを受け取り、その名前を使用して挨拶を表示します。

追加の例

• ボタン
• フォーム
• 画像
• 表
• リスト

Visual Studio Code には、コード設定を編集するための GUI 設定エディタが組み込まれています。 このエディタを使用して、editor.formatOnSave 設定を有効にして、ファイルを保存するたびにコードを自動的にフォーマットするように設定できます。

設定エディタを開くには、以下の手順に従います。

1. コードウィンドウで、Ctrl + , (Windows/Linux) または Cmd + , (Mac) を押します。
2. フォーマット タブを選択します。
3. 保存時にフォーマット チェックボックスをオンにします。

ESLint 拡張機能を使用する

ESLint は、JavaScript および JSX コードの静的解析ツールです。 コードのスタイルと品質を向上させるために使用できます。 ESLint を使用して、React JSX コードの書式設定を強制することもできます。

ESLint 拡張機能をインストールするには、以下の手順に従います。

1. ESLint 拡張機能を構成します。 詳細については、ESLint のドキュメントを参照してください。

ESLint を構成すると、ESLint ルール違反がコードエディターに表示されます。 これらの違反を修正して、コードのスタイルと品質を向上させることができます。

React JSX コードの書式設定を変更するために使用できる他のツールがいくつかあります。 以下にその例をいくつか示します。

• Prettier (https://prettier.io/)