一般に VS Code として知られる Visual Studio Code は、最もよく使用されるコード エディターの 1 つです。 VS Code には、Node.js、JavaScript、TypeScript のサポートが組み込まれています。 ただし、さまざまな拡張機能を使用して、他のほとんどの言語やランタイムにアクセスできるようにすることができます。
Microsoft は、この無料でオープンソースのコード エディターを開発した会社です。
VS Code は、これらの機能により人気があります。
- Intellisense: VS Code は、コードのオートコンプリートと構文の強調表示を提供します。
- クロスプラットフォーム: このコード エディターは、Linux、Windows、および macOS オペレーティング システムで使用できます。
- さまざまな拡張機能の可用性: さまざまな拡張機能の可用性により、VS Code を統合開発環境 (IDE) に変換することもできます。
- 多言語サポート: このツールは、VS Code 拡張機能を介してほぼすべてのプログラミング言語で使用できます。
- 統合ターミナル: VS Code の組み込みターミナルにより、開発者はコード エディターから直接 Git コマンドを実行できます。 したがって、このエディターから変更をコミット、プッシュ、およびプルできます。
VS Code での自動フォーマット
前提条件
- VS Code: このコード エディターは無料でダウンロードできます。 マシンにインストールしていない場合は、オペレーティング システムに応じて、公式サイトからダウンロードしてください。
- 使用する言語を選択する: 言語ごとに異なるフォーマッターがあるため、使用する言語を決定する必要があります。
- フォーマッタ: VS Code は、コードの書式設定に拡張機能を使用します。 この記事では Prettier を使用します。 ただし、使用している言語に適した任意のフォーマッターを自由に使用できます。
自動フォーマットは、特定のルールとガイドラインに基づいて、コード エディター上のコードのブロック/行またはファイルを自動的にフォーマットする機能です。 この機能は、インデント、改行、および間隔に関するフォーマット規則を指定する構成ファイルに基づいています。
自動フォーマット機能が有効になっている場合、これらすべてのルールは、コードベースのすべてのファイルに適用されます。
ただし、特定のコード ブロックを目立たせたい場合は、そのコード ブロックのオートフォーマットを無効にすることもできます。 これを実現するには、適用するルールを指定するコメント ブロックでコードをラップします。
VS コードでコードを自動フォーマットする利点
- 時間の節約: コードの記述と書式設定には時間がかかる場合があります。 自動書式設定により時間が節約されるため、書き込みプロセスと構文により集中できます。
- 一貫性: ソース コードがクライアント側に表示されなくても、ある程度の一貫性はあるはずです。 自動書式設定は、特に複数の貢献者がいる大規模なプロジェクトの場合に便利です。
- ベスト プラクティスの順守: 自動書式設定機能は、一貫したインデント、間隔、および命名規則を適用するのに便利です。
- コードを読みやすくする: 整形式のコードは、コード レビュー中に簡単に理解できます。 組織に加わった新しい開発者は、整形式のコードを簡単に理解できます。
VS コードで自動フォーマットを有効にしてカスタマイズする方法
次の手順に従って、自動フォーマットを有効にします。
Prettier を VS Code にインストールしたら、自動フォーマット機能を有効にできます。
自動フォーマットを有効にする方法を示すために、ログイン ページの単純な HTML ファイルを使用します。
次のコードを使用します。
<!DOCTYPE html> <html> <head> <title>Login Form</title> </head> <body style> <h2 style="text-align: center; margin-top: 50px;">Login </h2> <form action="" method="POST" style="max-width: 250px; margin: 0 auto; background-color: white; padding: 20px; border-radius: 5px; box-shadow: 0px 0px 10px 0px rgba(0,0,0,0.2);"> <label for="email" style="display: block; margin-bottom: 10px;">Enter Email</label> <input type="email" id="email" name="email" required style="width: 100%; padding: 10px; border-radius: 3px; border: 1px solid #ccc;"><br><br> <label for="password" style="display: block; margin-bottom: 10px;">Enter Password</label> <input type="password" id="password" name="password" required style="width: 100%; padding: 10px; border-radius: 3px; border: 1px solid #ccc;"><br><br> <input type="submit" value="Login" style="background-color: #af4c9e; color: white; padding: 10px 20px; border: none; border-radius: 3px; cursor: pointer;"> </form> </body> </html>
上記のコードは機能しますが、期待どおりにインデントされていないため、読んで理解するのは困難です。 Prettier を使用してコードを自動フォーマットします。
次の手順を実行します。
3. 検索バーに Formatter と入力し、Editor:Default Formatter タブで Prettier を選択します。
4. Editor: Format on Save を見つけて、ボックスにチェックを入れます。
5. HTML ファイルを保存し、HTML ドキュメントの入力を選択し、右クリックして Format Document を選択します。
6. ドキュメントがフォーマットされているかどうかを確認します。 この拡張機能は、VS Code に記述した他のすべてのコードを自動的にフォーマットします。
6. Prettier 構成設定の調整: Prettier は、デフォルトで多くのことを実行するように設定されています。 ただし、ニーズに合わせてカスタマイズすることはできます。 VS Code の[設定]に移動し、Prettier を検索して、好みに合わせて設定を調整します。
7. Prettier 構成ファイルを作成します。チームで作業している場合、マシンで構成した設定が他の設定と異なる場合があります。 Prettier 構成ファイルを使用すると、プロジェクトのコード スタイルが一貫したものになります。 プロジェクト設定を構成するには、拡張子が .json の .prettierrc ファイルを作成します。 デモンストレーションのために、このコードを JSON ファイルに追加できます。
{
"trailingComma": "es5",
"tabWidth": 4,
"semi": false,
"singleQuote": true
}
上記のコード ブロックは、末尾のカンマ、タブ幅、セミコロンの使用、および単一引用符と二重引用符のどちらを使用するかという 4 つのことを指定します。 この場合;
- 末尾のコンマは、コードが es5 にトランスパイルされるときにのみ追加されます。
- タブ幅 (各タブのスペース数) は 4 に設定されています。
- Semi は、コードのステートメントの最後にセミコロンを追加する必要があるかどうかを示します。 false に設定しました。これは、セミコロンが追加されないことを意味します。
- コードでは、一重引用符または二重引用符のいずれかを使用できます。 このプロジェクトには一重引用符を使用する必要があることを指定しました。
Prettier のドキュメントを参照して、一貫した構成設定を作成する方法を理解してください。
VS Code での自動フォーマットのベスト プラクティス
適切なフォーマットを使用する
この記事ではデモンストレーション目的で Prettier を使用しましたが、すべての言語に適用できるわけではありません。 VS Code には何百もの書式設定拡張機能が存在し、ニーズに合ったものを決定するのはあなた次第です。 たとえば、Prettier や Beautify などのフォーマッターは、HTML や CSS に適しています。 一方、Black または Python 拡張機能を使用して、Python コードをフォーマットできます。
一貫したコード スタイルを使用する
これまで見てきたように、フォーマッタの設定をカスタマイズできます。 チームとして作業している場合は、一貫したコード スタイルを作成するために同じ構成を使用していることを確認してください。 最善の方法は、.prettierrc.extension ファイルを作成して、プロジェクトのすべての構成を含めることです。
リンターを使用する
リンターを使用して、コード内のスタイル違反、構文エラー、およびプログラミング ミスをチェックできます。 リンターと自動フォーマットを組み合わせると、コードを読みやすくデバッグするための時間と労力を大幅に節約できます。
キーボード ショートカットを利用する
VS Code には、書式設定の時間を節約するための何百ものショートカットがあります。 これらのコマンドを覚えやすいものにカスタマイズすることもできます。
コミットする前にコードを確認してください
linting と auto-formatting がコードの問題を解決するかもしれませんが。 commit コマンドを入力する前に、コードを確認する必要があります。
コードフォーマットのショートカット
VS Code は、Windows、Mac、および Ubuntu などの Linux ベースのシステムで使用できるマルチプラットフォーム コード エディターです。 次のショートカットを使用して、ドキュメント全体またはコードの特定の強調表示された領域をフォーマットできます。
ウィンドウズ
- Shift + Alt + F の組み合わせは、ドキュメント全体をフォーマットします。
- Ctrl + K、Ctrl + F の組み合わせは、選択したコードのセクションをフォーマットします。 たとえば、div.
マックOS
- Shift + Option + F の組み合わせは、ドキュメント全体をフォーマットします。
- Ctrl + K、Ctrl + F の組み合わせは、選択したコードのセクションをフォーマットします。 たとえば、div.
Ubuntu
- Ctrl + Shift + I の組み合わせは、ドキュメント全体をフォーマットします。
- Ctrl + K、Ctrl + F の組み合わせは、選択したコードのセクションをフォーマットします。 たとえば、div.
ただし、VS Code をさまざまなショートカットでカスタマイズした場合、これらのショートカットの一部が失敗する可能性があることに注意してください。
これらの手順を使用して、VS Code のショートカットを確認できます。
- VS Code を開き、左上隅の[ファイル]項目をクリックします。
- [設定]までスクロールします
- [キーボード ショートカット]をクリックして、使用できるすべてのショートカットを表示します。
結論
自動フォーマットを有効にすると、時間を大幅に節約できます。 拡張子の選択は、使用している言語によって異なります。 プロジェクトで使用するプログラミング言語に応じて、複数のコード フォーマッタをインストールできます。
コードに選択したフォーマッタのドキュメントを常に確認してください。 これにより、サポートされている言語と、それを最大限に活用する方法を確実に理解できます。
開発者が使用すべき最高の VS Code 拡張機能に関する記事をご覧ください。
