Web IDE

フラグ: セルフマネージドGitLabでは、デフォルトでこの機能が利用可能です。この機能を隠すには、管理者がvscode_web_ideという機能フラグを無効にします。GitLab.comでは、この機能は利用可能です。

Web IDEは、コミットステージを備えた高度なエディターです。Web IDEを使って、GitLab UIから直接複数のファイルに変更を加えることができます。より基本的な実装については、Web Editorをご覧ください。

Web IDE をリモート開発環境と組み合わせるには、リモート開発をご覧ください。

Web IDE を使用します。

GitLab UIからWeb IDEを開くには:

  1. 左のサイドバーで「検索」または「移動」を選択してあなたのプロジェクトを検索します。
  2. . キーボードショートカットを使用します。

からWeb IDEを開くこともできます:

  • ファイル
  • リポジトリファイルリスト
  • マージリクエスト

ファイルまたはリポジトリのファイルリストから

ファイルまたはリポジトリファイルリストから Web IDE を開くには、次の手順に従います:

  • 右上の [編集] > [Web IDE で開く] を選択します。

マージリクエストから

マージリクエストから Web IDE を開くには、次の手順に従います:

  1. マージリクエストに移動してください。
  2. 右上の [コード] > [Web IDE で開く] を選択します。

Web IDE は新しいファイルと変更されたファイルを別々のタブで開き、変更内容を元のソースと並べて表示します。読み込み時間を最適化するため、上位 10 ファイル(変更された行数)だけが自動的に開かれます。

ファイル ツリーでは、マージ リクエスト内の新規または変更されたファイルは、ファイル名の横にアイコンが表示されます。ファイルの変更点を表示するには、ファイル名を右クリックし、[マージ リクエスト ベースと比較]を選択します。

Web IDE でファイルを開く

ファイル名で開くには

  1. コマンド+Pを押します。
  2. ファイル名を入力してください。

fuzzy_finder_v15_7

ファイルを横断検索

Web IDE を使用して、開いているフォルダ内のすべてのファイルを検索できます。

ファイルを横断して検索するには

  1. Shift+Command+Fを押します。
  2. 検索語を入力してください。

Web IDE では、開いたファイルの一部の結果のみが表示されます。

変更されたファイルの一覧を表示

Web IDE で変更したファイルの一覧を表示します:

  • 左側のアクティビティ バーで [ソース管理] を選択するか、Control+Shift+Gを押します。

CHANGESSTAGED CHANGESMERGE CHANGES が表示されます。詳細については、VS Code のドキュメントを参照してください。

新規ファイルのアップロード

Web IDE で新しいファイルをアップロードするには、以下の手順に従います:

  1. 左側のアクティビティバーでエクスプローラを選択し、ファイルをアップロードするディレクトリに移動します。
  2. オプション。新しいディレクトリの場合は、ディレクトリを作成するパスに移動し、次のいずれかを実行します:
    • パスを右クリックし、「新規フォルダ…」を選択します。/ でネストされたパスを作成できます(例えば、parentdir/subdir1/subdir2 )。
    • エクスプローラ・パネルの右上で、「新規フォルダ」({folder-new})を選択します。
  3. 新しいディレクトリの名前を入力し、Enter を押します。
  4. パスを右クリックし、アップロード…を選択します。
  5. アップロードしたいファイルを選択し、「開く」を選択します。一度に複数のファイルをアップロードできます。

新しいファイルがアップロードされ、自動的にリポジトリに追加されます。

ブランチの切り替え

Web IDE はデフォルトで現在選択されているブランチを使用します。Web IDE でブランチを切り替えるには、以下の手順に従います:

  1. ステータスバーの左下で、現在のブランチ名を選択します。
  2. 検索ボックスにブランチ名を入力します。
  3. ドロップダウンリストからブランチを選択します。

ブランチの作成

Web IDE で現在のブランチからブランチを作成します:

  1. ステータスバーの左下で、現在のブランチ名を選択します。
  2. ドロップダウンリストで、新しいブランチを作成… を選択します。
  3. ブランチ名を入力します。
  4. Enterを押します。

リポジトリへの書き込み権限がない場合、新しいブランチを作成…は表示されません。

変更をコミット

Web IDE で変更をコミットします:

  1. 左側のアクティビティ バーで [ソース管理] を選択するか、Control+Shift+Gを押します。
  2. コミットメッセージを入力します。
  3. コミット&プッシュを選択します。
  4. 現在のブランチにコミットするか、新しいブランチを作成します。

マージリクエストの作成

Web IDE でマージリクエストを作成します:

  1. 変更をコミットします。
  2. 右下隅のポップアップ通知で、マージリクエストを作成を選択します。マージリクエストを作成するための新しいウィンドウが開きます。

見逃した通知にアクセスするには、通知へのアクセスを参照してください。

コマンドパレットを使用します。

Web IDE では、コマンドパレットから多くのコマンドにアクセスできます。Web IDE でコマンドパレットを開いてコマンドを実行するには、次の手順に従います:

  1. Shift+Command+Pを押します。
  2. 検索ボックスにコマンド名を入力します。
  3. ドロップダウンリストから、コマンドを選択します。

設定の編集

設定エディタを使用して、ユーザーおよびワークスペース設定を表示および変更できます。Web IDE で設定エディタを開くには、次の手順に従います:

  • 上部のメニュー バーで、[ファイル] > [環境設定] > [設定] を選択するか、Command+, を押します。

設定エディタで、変更したい設定を検索できます。

キーボードショートカットの編集

キーボードショートカットエディタを使用すると、使用可能なすべてのコマンドのデフォルトのキーバインドを表示および変更できます。Web IDE でキーボードショートカットエディタを開くには、以下の手順に従います:

  • 上部メニュー バーで、[ファイル] > [環境設定] > [キーボード ショートカット] を選択するか、Command+K を押してからCommand+Sを押します。

キーボードショートカットエディタで、検索できます:

  • 変更したいキーバインド
  • キーバインドを追加または削除したいコマンド

キーバインドはキーボードレイアウトに基づいています。キーボードレイアウトを変更すると、既存のキーバインドも自動的に更新されます。

テーマの変更

Web IDEでは様々なテーマを選ぶことができます。Web IDEのデフォルトのテーマはGitLab Darkです。

Web IDEのテーマを変更するには:

  1. 上部メニューバーで、[ファイル] > [環境設定] > [テーマ] > [カラーテーマ] を選択するか、Command+K を押してから、Command+Tを押します。
  2. ドロップダウンリストから、矢印キーでテーマをプレビューします。
  3. テーマを選択します。

アクティブなカラーテーマはユーザー設定に保存されます。

アクセス通知

Web IDE でアクションを実行すると、右下隅に通知が表示されます。見逃した通知にアクセスするには

  1. ステータス バーの右下にあるベル({notifications}) を選択すると、通知の一覧が表示されます。
  2. アクセスしたい通知を選択します。

Web IDE 用の対話型 Web 端末

caution
この機能はベータ版であり、予告なく変更される場合があります。

Web IDE でリモート開発サーバーをセットアップすると、インタラクティブな Web ターミナルを使用して次のことができます:

  • サーバー上のリモート Shell にアクセスします。
  • サーバーのファイルシステムにアクセスし、リモートでコマンドを実行します。

対話型ウェブターミナルを使用してRunnerと対話することはできません。ただし、ターミナルを使用して依存関係をインストールしたり、コードをコンパイルしてデバッグしたりすることはできます。

対話型 Web ターミナルをサポートするワークスペースの設定については、リモート開発を参照してください。

トラブルシューティング

Web IDE を使用していると、次のようなイシューに遭遇することがあります。

Web IDE での文字オフセット

Web IDE で文字を入力すると、4 文字のオフセットが発生することがあります。このイシューを解決するには、次のいずれかを実行してください:

  • 設定に"editor.disableMonospaceOptimizations": true を追加します。
  • "editor.font" の設定を変更します。

詳細はVS Code issue 80170 を参照してください。