One place for hosting & domains

      Visual

      Visual Studio CodeでPrettierを使用してコードをフォーマットする方法


      はじめに

      コーディングスタイルを整えるのは骨の折れる作業ですが、最新の開発ツールを使用すれば、チームのコードベースの一貫性を自動的に保てます。

      この記事では、Prettier をセットアップして、Visual Studio Code(VS Code)のコードを自動でフォーマットします。 

      デモ用にサンプルコードをフォーマットします。

      const name = "James";
      
      const person ={first: name
      }
      
      console.log(person);
      
      const sayHelloLinting = (fName) => {
      console.log(`Hello linting, ${fName}`)
      }
      
      sayHelloLinting('James');
      

      コードフォーマットを見慣れていれば、誤りがいくつかあるのに気付くでしょう。

      • 一重引用符と二重引用符が混在しています。
      • person オブジェクトの1つ目のプロパティは、行内に収める必要があります。
      • 関数内のコンソールステートメントは、インデントする必要があります。
      • アロー関数のパラメータを囲むオプションのカッコが思い通りでないかもしれません。

      前提条件

      このチュートリアルでは、Visual Studio Code をダウンロードしてインストールします。

      Visual Studio Code でPrettier を使用するには、拡張機能をインストールします。これを行うには、VS CodeのExtension panelでPrettier - Code Formatterを検索します。Prettierを初めてインストールする場合、ここで表示されるuninstallボタンの代わりにinstallボタンが表示されます。

      Prettier extension readme

      ステップ1 — Format Documentコマンドの使用

      Prettier拡張機能をインストールしたら、それを利用してコードをフォーマットできます。まず、Format Documentコマンドを試してみましょう。このコマンドは、コードの空白、行の折り返し、引用符を一貫したフォーマットに整えます。

      コマンドパレットを開くには、macOS ならCOMMAND + SHIFT + Pキーを、 WindowsならCTRL + SHIFT + Pキー を押します。

      コマンドパレットで、formatを検索し、Format Documentを選択します。

      Command palette opened with results for format

      フォーマットの選択を求められます。Configureボタンをクリックして進みます。

      Prompt for selecting a default formatter

      次に、Prettier – Code Formatterを選択します。

      Selecting Prettier

      注:default formatterの選択プロンプトが表示されなければ、Settingsにて手動で変更できます。Editor: Default Formatterebsenp.prettier-vscodeに設定します。

      コードの書式が、空白、行の折り返し、引用符の整合性に関してフォーマットされました。

      const name="James";
      
      const person = { first: name };
      
      console.log(person);
      
      const sayHelloLinting = (fname) => {
        console.log(`Hello linting, ${fName}`);
      }
      
      sayHelloLinting('James');
      

      CSSファイルでも同様に機能します。インデント、波括弧、改行位置、セミコロンで一貫性に欠箇所が、きれいに整ったコードになります。例えば:

      body {color: red;
      }
      h1 {
        color: purple;
      font-size: 24px
      }
      

      次のように再フォーマットされます。

      body {
        color: red;
      }
      h1 {
        color: purple;
        font-size: 24px;
      }
      

      このコマンドを詳しく見たので、自動で実行するように実装する方法を見てみましょう。

      ステップ2 — 保存時にコードをフォーマットする

      これまではコードのフォーマットを手動で実行してきました。このプロセスを自動化するには、保存時にファイルを自動でフォーマットする設定をVS Code で選択します。また、これによりコードは、未フォーマットのバージョンコントロールとはみなされなくなります。

      この設定を変更するには、macOS ではCOMMAND + (プラス)キー、Windows ではCTRL + (プラス)キーを押して、Settingsメニューを開きます。メニューが開いたら、Editor: Format On Saveを検索し、そのオプションにチェックが入っていることを確認します。

      Editor: Format On Save checked

      この設定が完了したら、いつものようにコードを作成すれば、ファイルを保存する際に自動でフォーマットされます。

      ステップ3 — Prettierの設定変更

      Prettierは、デフォルトで多くのことを行いますが、設定をカスタマイズすることもできます。

      Settings メニューを開きます。次に、Prettier を検索します。これにより、変更可能な設定がすべて表示されます。

      Configuration Settings for Prettier

      最も一般的な設定をいくつか以下に示します。

      • Single Quote – Single QuoteかDouble Quoteを選択します。
      • Semi – 行末にセミコロンを付けるかどうか選択します。
      • Tab Width – Tabスペース1個あたりの半角スペースの数を指定します。

      VS Code で組み込み設定メニューを使用するデメリットは、チームの開発者間での一貫性が確保されないことです。

      ステップ4 — Prettier設定ファイルを作成する

      自分のVS Code を設定変更しても、他の誰かのマシンはまったく異なる設定になっているかもしれません。プロジェクト用の設定ファイルを作成すれば、チーム全体で一貫性のあるフォーマットが確立できます。

      次のいずれかの拡張子を持つ.prettierrc.extension という新しいファイルを作成します。

      JSONを使用した簡単な設定ファイルの例を以下に示します。

      {
        "trailingComma": "es5",
        "tabWidth": 4,
        "semi": false,
        "singleQuote": true
      }
      

      設定ファイルの詳細については、Prettier Docsを参照してください。このようなファイルを作成し、プロジェクトに取り込むことで、チームメンバー全員が同じフォーマットルールに従って作業できます。

      まとめ

      コードに一貫性を持たせることは、良いことです。複数のコラボレーターとの共同作業において特に有効です。一連の設定について共通認識を持っておくと、読みやすく理解しやすいコーディングに役立ちます。コードインデントのような些細な問題と格闘する代わりに、やり甲斐のある技術的課題の解決に時間が充てられます。

      Prettier は、コードフォーマットに一貫性を与え、そのプロセスを自動化します。



      Source link

      Visual Studio Code で Git統合を使用する方法


      はじめに

      Visual Studio Code(VS Code)は、Web開発で最も人気のあるエディターのひとつになっています。このような人気を博した理由は、多くの組み込み機能によります。Gitなどのソース管理統合もそのひとつです。VS Code でGitの機能を活用すると、ワークフローがより効率的で堅牢になります。

      このチュートリアルでは、GitのVS Code でのソース管理統合について学習します。

      前提条件

      このチュートリアルには、次が必要です。

      • Gitをインストールしたマシン。Gitのインストールについては、チュートリアルGit入門を参照してください。
      • Visual Studio Code最新バージョンをインストールしたマシン。

      ステップ1 — Source Controlタブを理解する

      ソース管理統合を利用するために先ず、Git リポジトリとしてプロジェクトを初期化します。

      Visual Studio Code を開き、組み込みターミナルにアクセスします。これを開くには、Linux、macOS、Windows でショートカットCTRL + `キーを押します。

      端末に新しいプロジェクトのディレクトリを作成し、そのディレクトリに移動します。

      • mkdir git_test
      • cd git_test

      次に、Gitレポジトリを作成します。

      Visual Studio Code でこれを行うには、左パネルのSource Controlタブ(分かれ道のように見えるアイコン) を開きます。

      Source Control icon

      次に、Open Folder を選択します。

      Screenshot depicting Open Folder button

      カレントディレクトリでファイルエクスプローラーが開きます。好みのプロジェクトディレクトリを選択し、Open をクリックします。

      次に、Initialize Repository を選択します。

      Screenshot depicting Initialize Repository button

      今ファイルシステムを確認すれば、.git ディレクトリがあるのがわかります。これを行うには、ターミナルでプロジェクトディレクトリに移動して、ディレクトリの中身をすべて表示します。

      生成された.git ディレクトリが表示されます。

      Output

      repo が初期化されたので、index.html というファイルを追加します。

      その後、Source Control panelU字付きの新しいファイルが現れます。Uは、 untracked file(追跡対象外のファイル)の略で、 新しいファイル、変更されたファイル、 まだリポジトリにまだ追加されていないファイルのいずれかを意味します。

      Screenshot of an untracked file with the letter U indicator

      一覧のindex.htmlファイル横のプラスアイコン()をクリックし、リポジトリでそのファイルを追跡します。

      リポジトリに追加されると、ファイルの横にある文字がAに変化します。*A *はリポジトリに追加された新しいファイルを表します。

      変更をコミットするには、Source Control panelの上部にある入力ボックスにコミットメッセージを入力します。次に、チェックアイコンをクリックしてコミットを実行します。

      Screenshot of an added file with the letter A indicator and commit message

      その後、保留中の変更がなくなったのがわかります。

      次に、index.html ファイルに内容を少し加えます。

      !キー、続けてTabキーを押すと、Emmetショートカットを使用してVS CodeのHTML5のスケルトン(雛形)を生成できます。そのまま進み、<body>にヘディング<h1>などを追加し、保存します。

      Source Control panelで、ファイルが変更されたのがわかります。ファイル名の横にmodified(修正済)を表すM字インジケーターが表示されます。

      M字インジケーターが付いた修正済ファイルのスクリーンショット

      練習として、この変更もコミットに進めます。

      Source Control panelとのやりとりに慣れたので、ガターインジケーターの解釈に進みます。

      ステップ2 — ガターインジケーター

      このステップでは、VS codeで「ガター」と呼ばれるものを見てみましょう。ガター とは、行番号の右側の細い 領域を指します。

      コード折りたたみ機能を使用したことがあれば、ガター に最大化アイコンと最小化アイコンがあります。

      はじめに、<h1> タグ内の内容を変更するなど、index.html ファイルに少し変更を加えてみましょう。その後、変更した行のガターに青の縦線が表示されるのがわかります。青の縦線は、コードの修正行を表します。

      今度は、コードの行を削除してみます。index.html ファイルの<body> セクションからどれか1行を削除します。ガター に赤の三角が表示されるのがわかります。赤の三角は、削除された行またはグループ行を表します。

      最後に、<body> セクションの下部に新しいコード行を追加すると、緑の縦線が表示されます。緑の縦線は、コードの新規行を表します。

      この例では、修正行、削除された行、新規行のガターインジケーターを示します。

      Screenshot with examples of the three types of gutter indicators

      ステップ3 — ファイルの差分を確認する(diff)

      VS Codeには、ファイルにdiff を実行する機能もあります。通常、これを行うには、別のdiffツールをダウンロードする必要があるので、この組み込み機能は作業効率を上げます。

      diff を表示するには、Source Control panelを開き、変更されたファイルをダブルクリックします。ここではindex.html ファイルをダブルクリックします。典型的なdiff ビューが表示されます。左側が変更前のバージョン、右側が現行バージョンになります。

      この例では、現行バージョンで行が追加されたことを示しています。

      Screenshot with example of a split-screen view of a diff

      ステップ4 — ブランチの作業

      下部バーに移動すると、ブランチを作成して切り替えることができます。エディターの下部左側に、Source Controlアイコン(分かれ道のように見えるもの)と、大抵の場合masterまたは現在の作業ブランチ名が表示されています。

      VS Code の下部に表示されるブランチインジケーター:master

      ブランチを作成するには、そのブランチ 名をクリックします。ポップアップメニューが開き、新しいブランチが作成できます。

      新しいブランチの作成プロンプト

      testという新しいブランチの作成に進みます。

      ここで、index.html ファイルを変更します。これは新しいテストブランチですなどのテキストを追加して、新しいテストブランチにいることを表します。

      これらの変更をテストブランチにコミットします。次に、左下のブランチ名をもう一度クリックして、masterブランチに戻ります。

      masterブランチに切り替えると、テストブランチにコミットされたテキストこれは新しいテストブランチですが消えているのがわかります。

      ステップ5 — リモートリポジトリの使用

      このチュートリアルでは詳細に触れませんが、Source Control panelを介して、リモートリポジトリにアクセスして作業できます。リモートリポジトリを使用して作業した経験があれば、pull 、 sync 、 publish 、 stashなどの見慣れたコマンドがあるのがわかります。

      ステップ6 — 便利な拡張機能のインストール

      VS CodeにはGit用の多くの組み込み機能があるだけでなく、機能を高める人気の拡張機能もいくつか追加できます。

      Git Blame

      この拡張機能は、選択した行のGit Blame 情報をステータスバーで表示できます。

      脅迫的な響きがありますが、心配無用です。Git Blame拡張機能は誰かの気を悪くさせるというより、実用性を高めるものです。コード変更について誰かを「blame」(非難する)というアイディアは、辱めることが目的ではなく、任意のコード部分について正しい質問相手を見つけることを目的としています。

      スクリーンショットでわかるように、この拡張機能は、作業中のコードのカレント行に関して、ちょっとしたメッセージを下部ツールバーに表示します。

      Git Blame in the bottom toolbar

      Git History

      VS Code の内蔵機能を使用して、作業ファイルの変更確認、diffs の実行やブランチの管理ができますが、Git履歴については詳細情報が得られません。Git History拡張機能はこの問題を解決します。

      下のイメージで見るように、この拡張機能を使用すると、ファイルの履歴、変更者、ブランチなどを完全に確認できます。下記のGit Historyウインドウをアクティブにするには、ファイルを右クリックしてGit: View File Historyを選択します。

      Git History 拡張機能の表示結果

      さらに、ブランチとコミットを比較したり、コミットからブランチを作成したり、他にもさまざまなことができます。

      Git Lens

      GitLensは、Visual Studio Code に組み込まれたGit 機能をパワーアップしたものです。コードの作者はGit blameの注釈やCode Lensを介してひと目でわかるように視覚化され、Gitリポジトリへの移動や探索はシームレスに実行でき、強力な比較コマンドにより有益な見識が得られ、他にもさまざまなことができます。

      Git Lens拡張機能はコミュニティで一番人気があり、最強でもあります。ほとんどの場合、先の2つの拡張機能の代用として使用できます。

      「blame」情報については、作業中のカレント行の右側に、ちょっとしたメッセージが表示されます。そこには変更者、変更日時、関連するコミットメッセージが記されます。このメッセージ上にカーソルを置くと、コード変更そのものやタイムスタンプ他、追加情報がいくつかポップアップします。

      Git Lens の Git Blame 機能

      Git History情報について、この拡張機能は多くの機能を備えています。多数のオプションに簡単にアクセスして、ファイル履歴を表示したり、diffで前のバージョンとの差分を比較したり、任意の改訂版を開いたりできます。これらのオプションを開くには、カレント行のコード編集者名、編集後の経過日数が記された下部ステータスバーのテキスト部分をクリックます。

      次のウィンドウが開きます。

      Git Lens の Git History機能

      この拡張機能は機能が満載なので、すべてを把握するには時間がかかります。

      まとめ

      このチュートリアルでは、VS Code でのソース管理統合の使用方法を説明しました。VS Codeは、かつて別途ツールのダウンロードが必要だった多くの機能を処理できます。



      Source link

      Verwenden der Git-Integration in Visual Studio Code


      Einführung

      Visual Studio Code (VS-Code) hat sich zu einem der beliebtesten Editoren für die Webentwicklung entwickelt. Dank seiner vielen integrierten Funktionen wie der Integration der Quellcodeverwaltung, insbesondere mit Git, hat er eine solche Popularität erlangt. Die Nutzung der Leistungsfähigkeit von Git innerhalb von VS-Code kann Ihren Workflow effizienter und robuster machen.

      In diesem Tutorial erkunden Sie die Verwendung der Quellcodeverwaltungs-Integration in VS-Code mit Git.

      Voraussetzungen

      Um dieses Tutorial zu absolvieren, benötigen Sie Folgendes:

      Schritt 1 — Vertrautmachen mit der Registerkarte Quellcodeverwaltung

      Was Sie zuerst tun müssen, um die Vorteile der Quellcodeverwaltung-Integration zu nutzen, ist die Initialisierung eines Projekts als Git-Repository.

      Öffnen Sie Visual Studio Code und greifen Sie auf das integrierte Terminal zu. Sie können dies durch Verwendung der Tastenkombination STRG+` unter Linux, macOS oder Windows öffnen.

      Erstellen Sie in Ihrem Terminal ein Verzeichnis für ein neues Projekt und wechseln Sie in dieses Verzeichnis:

      • mkdir git_test
      • cd git_test

      Erstellen Sie dann Git-Repository:

      Eine weitere Möglichkeit, dies mit Visual Studio Code zu bewerkstelligen, ist das Öffnen der Registerkarte Quellcodeverwaltung (das Symbol sieht aus wie eine Straßenverzweigung) im linken Bereich:

      Symbol für Quellcodeverwaltung

      Wählen Sie als Nächstes Open Folder (Ordner öffnen):

      Screenshot mit der Schaltfläche „Ordner öffnen“

      Dadurch wird Ihr Datei-Explorer für das aktuelle Verzeichnis geöffnet. Wählen Sie das bevorzugte Projektverzeichnis und klicken Sie auf Open (Öffnen).

      Wählen Sie dann Initialize Repository (Repository initialisieren):

      Screenshot, der die Schaltfläche „Repository initialisieren“ zeigt

      Wenn Sie nun Ihr Dateisystem überprüfen, sehen Sie, dass es ein Verzeichnis .git enthält. Verwenden Sie dazu das Terminal, um zu Ihrem Projektverzeichnis zu navigieren und alle Inhalte aufzulisten:

      Sie sehen das erstellte Verzeichnis .git:

      Output

      Nachdem das Repository nun initialisiert wurde, fügen Sie eine Datei namens index.html hinzu.

      Nachdem Sie dies getan haben, sehen Sie im Fenster Source Control (Quellcodeverwaltung), dass Ihre neue Datei mit dem Buchstaben U daneben angezeigt wird. U steht für unverfolgte Datei, d. h. eine Datei, die neu ist oder geändert wurde, aber dem Repository noch nicht hinzugefügt wurde:

      Screenshot einer unverfolgten Datei mit dem Buchstaben U-Indikator

      Sie können jetzt auf das Plus-Symbol (+) neben der Auflistung der Datei index.html klicken, um die Datei nach dem Repository zu verfolgen.

      Sobald die Datei hinzugefügt wurde, ändert sich der Buchstabe neben der Datei an eine A. A steht für eine neue Datei, die dem Repository hinzugefügt wurde.

      Um Ihre Änderungen zu übergeben, geben Sie eine Übergabe-Nachricht in das Eingabefeld oben im Fenster Source Control (Quellcodeverwaltung) ein. Klicken Sie dann auf das Prüfsymbol, um die Übergabe auszuführen.

      Screenshot einer hinzugefügten Datei mit dem Buchstabe-A-Indikator und der Übergabenachricht

      Danach werden Sie feststellen, dass keine Änderungen ausstehen.

      Fügen Sie als Nächstes Ihrer Datei index.html etwas Inhalt hinzu.

      Sie können eine Emmet-Verknüpfung verwenden, um ein HTML5-Skelett in VS-Code zu generieren, indem Sie die Taste ! drücken, gefolgt von der Taste Tab. Fahren Sie fort und fügen Sie dem <body> etwas wie eine Überschrift <h1> hinzu, und speichern Sie anschließend.

      Im Fenster Quellcodeverwaltung sehen Sie, dass Ihre Datei geändert wurde. Daneben wird der Buchstabe M angezeigt, der für eine modifizierte Datei steht:

      Screenshot der geänderten Datei mit dem Buchstabe-M-Indikator

      Zur Übung sollten Sie auch diese Änderung übergeben.

      Nachdem Sie nun mit der Bedienung des Quellcodeverwaltungsfensters vertraut sind, fahren Sie mit der Interpretation der „Gutter“-Indikatoren fort.

      Schritt 2 — Interpretation der Gutter-Indikatoren

      In diesem Schritt werfen Sie einen Blick auf das sogenannte „Gutter“ in VS-Code. Das Gutter ist der schmale Bereich rechts neben der Zeilennummer.

      Wenn Sie zuvor Code-Folding verwendet haben, befinden sich die Symbole für Maximieren und Minimieren im Gutter.

      Beginnen wir damit, eine kleine an Ihrer Datei index.html vorzunehmen, beispielsweise eine Änderung des Inhalts innerhalb des Tags <h1>. Danach werden Sie eine blaue vertikale Markierung im Gutter der Zeile, die Sie geändert haben, bemerken. Die vertikale blaue Markierung bedeutet, dass die entsprechende Codezeile geändert wurde.

      Versuchen Sie nun, eine Codezeile zu löschen. Sie können eine der Zeilen im Abschnitt <body> Ihrer Datei index.html löschen. Beachten Sie, dass im Gutter nun ein rotes Dreieck vorhanden ist. Das rote Dreieck kennzeichnet eine Zeile oder eine Gruppe von Zeilen, die gelöscht.

      Fügen Sie schließlich am Ende Ihres Abschnitts <body> eine neue Codezeile hinzu und beachten Sie den grünen Balken. Der vertikale grüne Balken steht für eine hinzugefügte Codezeile.

      Dieses Beispiel zeigt Gutter-Indikatoren für eine geänderte Zeile, eine entfernte Zeile und eine neue Zeile:

      Screenshot mit Beispielen der drei Arten von Gutter-Indikatoren

      Schritt 3 — Vergleichen von Dateien

      VS-Code bietet auch die Möglichkeit, einen Vergleich mit einer Datei auszuführen. Normalerweise müssten Sie dafür ein separates Diff-Tool herunterladen, sodass diese integrierte Funktion Ihnen dabei helfen kann, effizienter zu arbeiten.

      Um einen Vergleich anzuzeigen, öffnen Sie das Quellcodeverwaltungsfenster und doppelklicken Sie auf eine geänderte Datei. Doppelklicken Sie in diesem Fall auf die Datei index.html. Sie werden zu einer typischen Diff-Ansicht mit der aktuellen Version der Datei auf der linken und der zuvor übergebenen Version der Datei auf der rechten Seite gebracht.

      Dieses Beispiel zeigt, dass in der aktuellen Version eine Zeile hinzugefügt wurde:

      Screenshot mit einem Beispiel einer geteilten Bildschirmanzeige eines Vergleichs

      Schritt 4 — Arbeiten mit Zweigen

      In der unteren Leiste haben Sie die Möglichkeit, Zweige zu erstellen und zu wechseln. Wenn Sie einen Blick auf die unterste linke Ecke des Editors werfen, sollten Sie das Quellcodeverwaltungs-Symbol sehen (dasjenige, das wie eine Weggabelung aussieht), gefolgt höchstwahrscheinlich von master oder dem Namen des aktuellen Arbeitszweigs.

      Zweigindikator in der unteren Leiste von VS-Code mit der Anzeige „master“

      Um einen Zweig zu erstellen, klicken Sie auf diesen Zweignamen. Es sollte sich ein Menü öffnen, das Ihnen die Möglichkeit gibt, einen neuen Zweig zu erstellen:

      Eingabeaufforderung zur Erstellung eines neuen Zweigs

      Fahren Sie fort und erstellen Sie einen neuen Zweig namens test.

      Nehmen Sie nun eine Änderung an Ihrer Datei index.html vor, die anzeigt, dass Sie sich in dem neuen Zweig test befinden, indem Sie beispielsweise den Text „this is the new test branch“ (Dies ist der neue Testzweig) hinzufügen.

      Übergeben Sie diese Änderungen an den Zweig test. Klicken Sie dann erneut auf den Zweignamen unten links, um wieder zu dem Zweig master zu wechseln.

      Nach dem Wechsel zum Zweig master werden Sie feststellen, dass der Text this is the new test branch (Dies ist der neue Testzweig), der dem Zeig test übergeben wurde, nicht mehr vorhanden ist.

      Schritt 5 — Arbeiten mit Remote-Repositorys

      In diesem Tutorial wird nicht im Detail darauf eingegangen, aber über das Quellcodeverwaltungsfenster haben Sie Zugriff auf die Arbeit mit Remote-Repositorys. Wenn Sie schon mit einem Remote-Repository gearbeitet haben, werden Ihnen vertraute Befehle wie pull, sync, publish, stash usw. auffallen.

      Schritt 6 — Installieren nützlicher Erweiterungen

      VS-Code enthält nicht nur viele integrierte Funktionen für Git, es gibt auch einige sehr beliebte Erweiterungen, um zusätzliche Funktionalität hinzuzufügen.

      Git Blame

      Diese Erweiterung bietet die Möglichkeit, Git Blame-Informationen in der Statusleiste für die aktuell ausgewählte Zeile anzuzeigen.

      Dies kann einschüchternd klingen, aber keine Sorge, bei der Erweiterung „Git Blame“ geht es viel mehr um Praktikabilität als darum, jemandem ein schlechtes Gewissen einzureden. Bei der Idee, jemandem „ein schlechtes Gewissen“ für eine Code-Änderung einzureden geht es weniger darum, diese Person zu beschämen, als vielmehr darum, die richtige Person zu finden, der man Fragen zu bestimmten Teilen des Codes stellen kann.

      Wie Sie auf dem Screenshot sehen können, bietet diese Erweiterung in der unteren Symbolleiste eine subtile, auf die aktuelle Codezeile, die Sie gerade bearbeiten, bezogene Nachricht, die erklärt, wer die Änderung vorgenommen hat und wann sie vorgenommen wurde.

      Git Blame in der unteren Symbolleiste

      Git History

      Obwohl Sie mit den integrierten Funktionen in VS-Code aktuelle Änderungen anzeigen, Vergleiche durchführen und Zweige verwalten können, bietet es keinen detaillierten Einblick in Ihren Git-Verlauf. Die Erweiterung Git History löst dieses Problem.

      Wie Sie in der nachstehenden Abbildung sehen können, ermöglicht diese Erweiterung Ihnen, den Verlauf einer Datei, eines bestimmten Autors, eines Zweigs usw. sorgfältig zu untersuchen. Um das nachstehende Fenster „Git History“ zu aktivieren, klicken Sie mit der rechten Maustaste auf eine Datei und wählen Sie Git: View File History:

      Ergebnisse der Erweiterung „Git History“

      Zusätzlich können Sie Zweige und Übergaben vergleichen, Zweige aus Übergaben erstellen und vieles mehr.

      Git Lens

      Git Lens erweitert die in Visual Studio Code integrierten Git-Funktionen. Es hilft Ihnen, die Code-Autorenschaft auf einen Blick mittels Git Blame-Annotationen und Code Lens zu visualisieren, nahtlos durch Git-Repositorys zu navigieren und diese zu erkunden, wertvolle Erkenntnisse über leistungsstarke Vergleichsbefehle zu gewinnen und vieles mehr.

      Die Erweiterung „Git Lens“ ist eine der beliebtesten in der Gemeinschaft und ist auch die leistungsstärkste. In den meisten Fällen kann sie mit ihrer Funktionalität jede der beiden vorherigen Erweiterungen ersetzen.

      Für „Blame“-Informationen erscheint rechts neben der Zeile, an der Sie gerade arbeiten, eine subtile Nachricht, die Sie darüber informiert, werde die Änderung vorgenommen hat, wann sie vorgenommen wurde und die zugehörige Übergabemeldung. Es gibt einige zusätzliche Informationen, die angezeigt werden, wenn Sie mit der Maus über diese Nachricht fahren, wie die Code-Änderung selbst, der Zeitstempel und mehr.

      Git Blame-Funktionalität in Git Lens

      Für Git-Verlaufsinformationen bietet diese Erweiterung eine Vielzahl von Funktionen. Sie haben einfachen Zugriff auf zahlreiche Optionen, darunter die Anzeige des Dateiverlaufs, die Durchführung von Vergleichen mit vorherigen Versionen, das Öffnen einer bestimmten Revision und vieles mehr. Um diese Optionen zu öffnen, können Sie auf den Text in der unteren Statusleiste klicken, der den Autor enthält, der die Codezeile bearbeitet hat und wie lange es her ist, dass sie bearbeitet wurde.

      Dadurch wird das folgende Fenster geöffnet:

      Git History-Funktionalität in Git Lens

      Diese Erweiterung ist vollgepackt mit Funktionalität und es wird eine Weile dauern, bis Sie alles, was sie zu bieten hat, aufgenommen haben.

      Zusammenfassung

      In diesem Tutorial haben Sie erkundet, wie die Integration der Quellcodeverwaltung mit VS-Code verwendet wird. VS-Code kann mit vielen Funktionen umgehen, für die zuvor ein separates Tool heruntergeladen werden musste.



      Source link