↩ テクノロジー 開発 非公開: 時間と労力を節約するために VS Code で自動フォーマットする方法 [2023]

時間と労力を節約するために VS Code で自動フォーマットする方法 [2023]

Visual Studio Code (通称 VS 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 コードでの自動フォーマット
VS コードでの自動フォーマット

前提条件

  • VS Code: このコード エディターは無料でダウンロードできます。マシンにインストールされていない場合は、オペレーティング システムに応じて 公式サイト からダウンロードしてください 。
  • 使用する言語を選択します: 言語ごとに異なるフォーマッタがあるため、使用する言語を決定する必要があります。
  • フォーマッタ: VS Code はコードのフォーマットに拡張機能を使用します。この記事では Prettier を使用します。ただし、使用している言語に合ったフォーマッタを自由に使用できます。

自動フォーマットは、特定のルールとガイドラインに基づいて、コード エディター上のコードのブロック/行、またはファイルを自動的にフォーマットする機能です。この機能は、インデント、改行、スペースに関する書式設定ルールを指定する構成ファイルに基づいています。

自動フォーマット機能が有効になっている場合、コードベースを作成するときに、これらすべてのルールがコードベース内のすべてのファイルに適用されます。

ただし、特定のコード ブロックを他のコード ブロックより目立たせる場合は、そのコード ブロックの自動フォーマットを無効にすることもできます。これを実現するには、適用するルールを指定するコメント ブロックでコード部分をラップします。

VS コードでコードを自動フォーマットする利点

  • 時間の節約: コードの作成と書式設定には時間がかかる場合があります。自動フォーマットにより時間を節約できるため、作成プロセスと構文により集中できます。
  • 一貫性: ソース コードがクライアント側に表示されない場合でも、ある程度の一貫性が必要です。自動フォーマットは、特に複数の寄稿者がいる大規模なプロジェクトの場合に便利です。
  • ベスト プラクティスの順守: 自動フォーマット機能は、一貫したインデント、間隔、および命名規則を強制するのに役立ちます。
  • コードを読みやすくするために: 整形式のコードは、コード レビュー中に理解しやすくなります。組織に加わった新しい開発者は、適切にフォーマットされたコードを簡単に理解できるようになります。

VS コードで自動フォーマットを有効にしてカスタマイズする方法

自動フォーマットを有効にするには、次の手順に従います。

  1. VS Code で自動フォーマットを有効にするには、拡張機能の形式でフォーマッタが必要です。 VS Code のメニューに extensions アイコンがあります。
  2. Prettier 拡張機能をインストールします。もっとかわいいものを探してください。同じ名前を共有する拡張機能が多数見つかります。最初のもの (開発者: Prettier) をクリックし、「インストール」をクリックします。
より美しく
より美しく

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 を使用してコードを自動フォーマットします。

次の手順を実行します。

  1. HTML (index.html) ファイルを作成し、上記のコードを追加します。
  2. VS Code の左下部分にある Settings を見つけます。
設定
設定

3. 検索バーに Formatter と入力し、 Editor:Default Formatter タブで Prettier を選択します。

フォーマッタ
フォーマッタ

4. Editor: Format on Save 見つけて、ボックスにチェックを入れます。

フォーマット
フォーマット

5. HTML ファイルを保存し、HTML ドキュメントの入力を選択し、右クリックして Format Document を選択します。

6. 文書がフォーマットされているかどうかを確認します。この拡張機能は、VS Code に作成した他のすべてのコードを自動的にフォーマットします。

6. Prettier 構成設定の調整 : Prettier はデフォルトで多くのことを実行するように設定されています。ただし、ニーズに合わせてカスタマイズすることもできます。 VS Code の [ Settings に移動し、 Prettier を検索して、好みに合わせて設定を調整します。

画像-54
画像-54

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 には、書式設定の時間を節約するための何百ものショートカットがあります。これらのコマンドを思い出に残るものにカスタマイズすることもできます。

コミットする前にコードを確認してください

たとえ、lint や自動フォーマットによってコードの問題が修正される可能性もあります。 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 を開き、左上隅にある File 項目をクリックします。
  • Preferences までスクロールします
  • Keyboard Shortcuts をクリックすると、使用できるすべてのショートカットが表示されます。

結論

自動フォーマットを有効にすると、時間を大幅に節約できます。拡張子の選択は、使用している言語によって異なります。プロジェクトに使用するプログラミング言語に応じて、複数のコード フォーマッタをインストールできます。

コードに選択したフォーマッタのドキュメントを必ず確認してください。これにより、サポートされている言語とそれを最大限に活用する方法を理解できるようになります。

開発者が使用すべき最高の VS Code 拡張機能に関する記事をご覧ください。

「時間と労力を節約するために VS Code で自動フォーマットする方法 [2023]」についてわかりやすく解説！絶対に観るべきベスト2動画

STOP Creating New Files This! But Do THIS in VS Code!!!
https://www.youtube-nocookie.com/shorts/VqOVb76IyI4
【VSCODE】インストール＆初期設定方法｜プログラミング学習初心者向けのおすすめ拡張機能を一挙公開！2023年最新版
https://www.youtube-nocookie.com/watch?v=pbXdyvXamPo&pp=ygVk5pmC6ZaT44Go5Yq05Yqb44KS56-A57SE44GZ44KL44Gf44KB44GrIFZTIENvZGUg44Gn6Ieq5YuV44OV44Kp44O844Oe44OD44OI44GZ44KL5pa55rOVIFsyMDIzXSZobD1KQQ%3D%3D

Visual Studio Code (通称 VS 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 コードでの自動フォーマット
VS コードでの自動フォーマット

前提条件

  • VS Code: このコード エディターは無料でダウンロードできます。マシンにインストールされていない場合は、オペレーティング システムに応じて 公式サイト からダウンロードしてください 。
  • 使用する言語を選択します: 言語ごとに異なるフォーマッタがあるため、使用する言語を決定する必要があります。
  • フォーマッタ: VS Code はコードのフォーマットに拡張機能を使用します。この記事では Prettier を使用します。ただし、使用している言語に合ったフォーマッタを自由に使用できます。

自動フォーマットは、特定のルールとガイドラインに基づいて、コード エディター上のコードのブロック/行、またはファイルを自動的にフォーマットする機能です。この機能は、インデント、改行、スペースに関する書式設定ルールを指定する構成ファイルに基づいています。

自動フォーマット機能が有効になっている場合、コードベースを作成するときに、これらすべてのルールがコードベース内のすべてのファイルに適用されます。

ただし、特定のコード ブロックを他のコード ブロックより目立たせる場合は、そのコード ブロックの自動フォーマットを無効にすることもできます。これを実現するには、適用するルールを指定するコメント ブロックでコード部分をラップします。

VS コードでコードを自動フォーマットする利点

  • 時間の節約: コードの作成と書式設定には時間がかかる場合があります。自動フォーマットにより時間を節約できるため、作成プロセスと構文により集中できます。
  • 一貫性: ソース コードがクライアント側に表示されない場合でも、ある程度の一貫性が必要です。自動フォーマットは、特に複数の寄稿者がいる大規模なプロジェクトの場合に便利です。
  • ベスト プラクティスの順守: 自動フォーマット機能は、一貫したインデント、間隔、および命名規則を強制するのに役立ちます。
  • コードを読みやすくするために: 整形式のコードは、コード レビュー中に理解しやすくなります。組織に加わった新しい開発者は、適切にフォーマットされたコードを簡単に理解できるようになります。

VS コードで自動フォーマットを有効にしてカスタマイズする方法

自動フォーマットを有効にするには、次の手順に従います。

  1. VS Code で自動フォーマットを有効にするには、拡張機能の形式でフォーマッタが必要です。 VS Code のメニューに extensions アイコンがあります。
  2. Prettier 拡張機能をインストールします。もっとかわいいものを探してください。同じ名前を共有する拡張機能が多数見つかります。最初のもの (開発者: Prettier) をクリックし、「インストール」をクリックします。
より美しく
より美しく

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 を使用してコードを自動フォーマットします。

次の手順を実行します。

  1. HTML (index.html) ファイルを作成し、上記のコードを追加します。
  2. VS Code の左下部分にある Settings を見つけます。
設定
設定

3. 検索バーに Formatter と入力し、 Editor:Default Formatter タブで Prettier を選択します。

フォーマッタ
フォーマッタ

4. Editor: Format on Save 見つけて、ボックスにチェックを入れます。

フォーマット
フォーマット

5. HTML ファイルを保存し、HTML ドキュメントの入力を選択し、右クリックして Format Document を選択します。

6. 文書がフォーマットされているかどうかを確認します。この拡張機能は、VS Code に作成した他のすべてのコードを自動的にフォーマットします。

6. Prettier 構成設定の調整 : Prettier はデフォルトで多くのことを実行するように設定されています。ただし、ニーズに合わせてカスタマイズすることもできます。 VS Code の [ Settings に移動し、 Prettier を検索して、好みに合わせて設定を調整します。

画像-54
画像-54

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 には、書式設定の時間を節約するための何百ものショートカットがあります。これらのコマンドを思い出に残るものにカスタマイズすることもできます。

コミットする前にコードを確認してください

たとえ、lint や自動フォーマットによってコードの問題が修正される可能性もあります。 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 を開き、左上隅にある File 項目をクリックします。
  • Preferences までスクロールします
  • Keyboard Shortcuts をクリックすると、使用できるすべてのショートカットが表示されます。

結論

自動フォーマットを有効にすると、時間を大幅に節約できます。拡張子の選択は、使用している言語によって異なります。プロジェクトに使用するプログラミング言語に応じて、複数のコード フォーマッタをインストールできます。

コードに選択したフォーマッタのドキュメントを必ず確認してください。これにより、サポートされている言語とそれを最大限に活用する方法を理解できるようになります。

開発者が使用すべき最高の VS Code 拡張機能に関する記事をご覧ください。

「時間と労力を節約するために VS Code で自動フォーマットする方法 [2023]」についてわかりやすく解説！絶対に観るべきベスト2動画

STOP Creating New Files This! But Do THIS in VS Code!!!
https://www.youtube-nocookie.com/shorts/VqOVb76IyI4
【VSCODE】インストール＆初期設定方法｜プログラミング学習初心者向けのおすすめ拡張機能を一挙公開！2023年最新版
https://www.youtube-nocookie.com/watch?v=pbXdyvXamPo&pp=ygVk5pmC6ZaT44Go5Yq05Yqb44KS56-A57SE44GZ44KL44Gf44KB44GrIFZTIENvZGUg44Gn6Ieq5YuV44OV44Kp44O844Oe44OD44OI44GZ44KL5pa55rOVIFsyMDIzXSZobD1KQQ%3D%3D

最新記事一覧

関連記事一覧