VSCodeでコードを自動的にフォーマットする方法

2022/06/08

コーディングの学習を考えている場合、またはすでに毎日作成している場合は、VisualStudioCodeのような信頼性の高いコードエディターが必須です。コードを書くときは、人々が読みやすいようにフォーマットについて考える必要があります。

インデントと行間隔に関するこれらの特定のルールはすべて重要ですが、作業に集中しているときはそれらを忘れがちです。

そのため、VS Codeでは、途中で役立つ自動フォーマット拡張機能を使用できます。自動フォーマット拡張機能の中には、複数のプログラミング言語をフォーマットできるものもあれば、特殊な拡張機能を統合する必要があるものもあります。

HTMLを自動的にフォーマットする方法

ハイパーテキストマークアップ言語またはHTMLは、Webページの作成と表示に使用されるコーディング言語です。Web開発者とソフトウェアエンジニアは毎日HTMLを使用しており、自動フォーマットツールの恩恵を受けることができます。

VS Codeエディターがお好みの場合は、人気のあるコードフォーマッターであるPrettierを見つけて、自動フォーマット機能をオンにする方法を次に示します。

コンピューターでVisualStudioCodeを開きます。

画面左側の[拡張機能]タブをクリックします。それは4つのブロックの形で提示されます。

検索ボックスに「Prettiercodeformatter」と入力します。

複数の検索結果が表示されますが、他の人や会社ではなく、Prettierによって作成されたものを選択してください。

「インストール」ボタンをクリックすると、拡張機能が数秒以内にダウンロードされます。

Prettierフォーマッターをインストールすることで、自動フォーマット機能をオンにして、コードを書くときに一貫したスタイルを確保できます。

VSCodeで新しいHTMLファイルを開くか作成します。

画面左下の「設定」に移動します。

検索ボックスに「フォーマット」と入力し、「ユーザー」タブをクリックします。

[デフォルトの書式設定]オプションをクリックして、リストから[きれい]を選択します。

[エディタ：保存時にフォーマット]オプションが表示されるまで、少し下にスクロールします。

このオプションの横にあるチェックボックスをオンにします。

ファイルに戻り、設定が機能するかどうかを確認します。

Prettierは、HTMLファイルを保存するときに自動的にフォーマットする必要があります。

自動JSON形式

JavaScriptオブジェクト表記またはJSONは、言語に依存しないデータ交換形式として分類されます。モバイルアプリケーションとコンピュータープログラムは、JSONファイルを使用してサーバーからデータを読み取り、画面に表示します。

Visual Studio Code EditorでJSONファイルを作成するときは、フォーマットにも注意する必要があります。良いニュースは、VSCodeでPrettierformatter拡張機能を使用して、JSONファイル全体で一貫したスタイルを確保できることです。

JSONファイルの自動フォーマット機能を有効にするために必要なことはこれだけです。

VS Codeを起動し、ウィンドウの左側にある[AssignedExtensions]タブに移動します。

検索フィールドで「Prettiercodeformatter」を検索します。

通常、最初の結果はクリックしたい結果です。ただし、確かに、開発者として「Prettier」と書かれているものを選択してください。

「インストール」をクリックし、フォーマッターがロードされるまで数秒待ちます。

Prettierフォーマッタをインストールしたら、以下の手順に従って自動フォーマット機能が有効になっていることを確認してください。

新しいJSONファイルを作成するか、まだフォーマットされていないファイルを開きます。
左下の「設定」をクリックします。

「フォーマット」を見つけます。

[デフォルトの形式]セクションをクリックします。ドロップダウンリストから[もっと美しい]を選択します。

下にスクロールして、[エディター：保存時にフォーマット]オプションが表示されたら停止します。

このオプションの横にあるチェックボックスをオンにします。

自動フォーマット機能が機能していることを確認してください。

それで全部です。VS Code EditorのPrettier拡張機能は、自動フォーマットを簡素化します。

自動Pythonフォーマット

Pythonは、最近最も人気のあるプログラミング言語の1つであり、Web開発者やプログラミング愛好家によって広く使用されています。ソフトウェアやWebサイトの設計と構築、データの分析、タスクの自動化などに使用されます。

VS Codeを使用してPythonファイルを編集している場合は、正しいフォーマッターを使用する必要があります。Prettierは多くのプログラミング言語で動作しますが、Pythonとは互換性がありません。

幸い、VSCodeはソリューションを提供します。VS Codeで最高のPythonフォーマッターの1つはBlackであり、ファイルを自動的に保存するたびにコードをフォーマットするために使用できます。ただし、Blackを使用する前に、VSCode用のMicrosoftPython拡張機能をダウンロードする必要があります。