Sublime Text で JSX コードをフォーマット： プラグイン、オンラインツール、手動フォーマットのメリットとデメリット
Sublime Text で JSX コードをフォーマットする方法
ReactJS を使用する場合、JSX コードを適切にフォーマットすることが重要です。フォーマットすることで、コードが読みやすく、理解しやすくなり、メンテナンスしやすくなります。
Sublime Text は、人気の高いテキストエディタであり、JSX コードを含む様々な種類のコードを編集するために使用できます。Sublime Text には、JSX コードを自動的にフォーマットするプラグインがいくつかあります。
JSX フォーマッターのインストール
Sublime Text で JSX コードをフォーマットするには、まず JSX フォーマッタープラグインをインストールする必要があります。最も人気のある JSX フォーマッタープラグインのいくつかは次のとおりです。
- Prettier
Prettier は、JavaScript、React、Vue、CSS など、様々な種類のコードをフォーマットするための汎用フォーマッターです。Prettier をインストールするには、次のコマンドを実行します。
npm install --global prettier
- ESLint
ESLint は、JavaScript および JSX コードの静的解析ツールです。ESLint には、コードのフォーマットを自動化するためのルールが含まれています。ESLint をインストールするには、次のコマンドを実行します。
npm install --global eslint
- JSXfmt
JSXfmt は、JSX コード専用のフォーマッターです。JSXfmt をインストールするには、次のコマンドを実行します。
npm install --global jsfmt
JSX コードのフォーマット
JSX フォーマッタープラグインをインストールしたら、Sublime Text で JSX コードをフォーマットできます。これを行うには、次のいずれかの方法を使用できます。
- 右クリックメニューを使用する
JSX コードを含むファイルを右クリックし、[Format JSX] または [ESLint Fix] などのオプションを選択します。 - キーバインドを使用する
ほとんどの JSX フォーマッタープラグインには、コードをフォーマットするためのキーバインドが設定されています。キーバインドを確認するには、プラグインの設定を参照してください。
特定のフォーマッターの設定
ほとんどの JSX フォーマッタープラグインには、フォーマット方法をカスタマイズできる設定があります。これらの設定は、Sublime Text の メニューを使用して変更できます。
- コードを保存するたびに JSX コードを自動的にフォーマットするように設定できます。これを行うには、プラグインの設定を変更する必要があります。
import React from 'react';
function Greeting(props) {
return (
<div className="greeting">
<h1>Hello, {props.name}!</h1>
<p>Welcome to ReactJS.</p>
</div>
);
}
export default Greeting;
このコードは、次の出力を生成します。
<div class="greeting">
<h1>Hello, John Doe!</h1>
<p>Welcome to ReactJS.</p>
</div>
説明
このコードは、Greeting という名前の React コンポーネントを定義します。このコンポーネントは、name というプロパティを受け取ります。コンポーネントは、div 要素と h1 および p サブ要素を含む JSX を返します。
フォーマット
Sublime Text の JSX フォーマッタープラグインを使用すると、このコードを次のようにフォーマットできます。
import React from 'react';
function Greeting(props) {
return (
<div className="greeting">
<h1>Hello, {props.name}!</h1>
<p>Welcome to ReactJS.</p>
</div>
);
}
export default Greeting;
フォーマットされたコードは、読みやすく、理解しやすくなっています。各行は適切にインデントされ、要素は適切に閉じられています。
Babel は、JavaScript コードを古いブラウザで動作するようにトランスパイルするためのツールです。Babel には、JSX コードをフォーマットする機能も含まれています。
Babel を使用して JSX コードをフォーマットするには、次の手順を実行します。
- Sublime Text で、
ViewメニューからSyntaxを選択し、Open all with current extension as...を選択します。 Babelを選択し、JavaScript (Babel)を選択します。- コードを保存します。
Babel は、JSX コードを自動的にフォーマットします。
ESLint を使用する
ESLint は、JavaScript および JSX コードの静的解析ツールです。ESLint には、コードのフォーマットを自動化するためのルールが含まれています。
- Sublime Text で、
Package Controlを開いてESLintをインストールします。 .eslintrc.jsonファイルを作成します。
{
"parser": "babel-eslint",
"plugins": ["react"],
"extends": ["eslint:recommended", "plugin:react/recommended"],
"rules": {
"react/jsx-indent": ["error", 2],
"react/jsx-closing-bracket-location": ["error", "after-props"],
"react/jsx-tag-spacing": ["error", { "before": "always", "after": "never" }]
}
}
オンラインフォーマッターを使用する
オンラインフォーマッターを使用して、Sublime Text で JSX コードをフォーマットすることもできます。
人気のあるオンラインフォーマッターには次のものがあります。
オンラインフォーマッターを使用するには、次の手順を実行します。
- オンラインフォーマッターに移動します。
- コードを貼り付けます。
- [Format] ボタンをクリックします。
フォーマットされたコードが生成されます。
手動でフォーマットする
JSX コードを手動でフォーマットすることもできます。これを行うには、次のガイドラインに従ってください。
- 適切なスペースと改行を使用します。
- 要素を適切に閉じます。
- 各行を適切にインデントします。
Sublime Text で JSX コードをフォーマットする方法はいくつかあります。自分に合った方法を選択してください。
sublimetext reactjs
