- Web IDE を使用します。
- Web IDE でファイルを開く
- ファイルを横断検索
- 変更されたファイルの一覧を表示
- 新規ファイルのアップロード
- ブランチの切り替え
- ブランチの作成
- 変更をコミット
- マージリクエストの作成
- コマンドパレットを使用します。
- 設定の編集
- キーボードショートカットの編集
- テーマの変更
- アクセス通知
- Web IDE 用の対話型 Web 端末
- トラブルシューティング
Web IDE
- GitLab 15.7 で
vscode_web_ideというフラグで導入されました。デフォルトでは無効になっています。- GitLab15.7でGitLab.comで有効に。
- GitLab 15.11でセルフマネージドで有効化。
フラグ: セルフマネージドGitLabでは、デフォルトでこの機能が利用可能です。この機能を隠すには、管理者がvscode_web_ideという機能フラグを無効にします。GitLab.comでは、この機能は利用可能です。
Web IDEは、コミットステージを備えた高度なエディターです。Web IDEを使って、GitLab UIから直接複数のファイルに変更を加えることができます。より基本的な実装については、Web Editorをご覧ください。
Web IDE をリモート開発環境と組み合わせるには、リモート開発をご覧ください。
Web IDE を使用します。
GitLab UIからWeb IDEを開くには：
- 左のサイドバーで「検索」または「移動」を選択してあなたのプロジェクトを検索します。
- . キーボードショートカットを使用します。
からWeb IDEを開くこともできます：
- ファイル
- リポジトリファイルリスト
- マージリクエスト
ファイルまたはリポジトリのファイルリストから
ファイルまたはリポジトリファイルリストから Web IDE を開くには、次の手順に従います：
- 右上の [編集] > [Web IDE で開く] を選択します。
マージリクエストから
マージリクエストから Web IDE を開くには、次の手順に従います：
- マージリクエストに移動してください。
- 右上の [コード] > [Web IDE で開く] を選択します。
Web IDE は新しいファイルと変更されたファイルを別々のタブで開き、変更内容を元のソースと並べて表示します。読み込み時間を最適化するため、上位 10 ファイル（変更された行数）だけが自動的に開かれます。
ファイル ツリーでは、マージ リクエスト内の新規または変更されたファイルは、ファイル名の横にアイコンが表示されます。ファイルの変更点を表示するには、ファイル名を右クリックし、［マージ リクエスト ベースと比較］を選択します。
Web IDE でファイルを開く
ファイル名で開くには
- コマンド+Pを押します。
- ファイル名を入力してください。
ファイルを横断検索
Web IDE を使用して、開いているフォルダ内のすべてのファイルを検索できます。
ファイルを横断して検索するには
- Shift+Command+Fを押します。
- 検索語を入力してください。
Web IDE では、開いたファイルの一部の結果のみが表示されます。
変更されたファイルの一覧を表示
Web IDE で変更したファイルの一覧を表示します：
- 左側のアクティビティ バーで [ソース管理] を選択するか、Control+Shift+Gを押します。
CHANGES、STAGED CHANGES 、MERGE CHANGES が表示されます。詳細については、VS Code のドキュメントを参照してください。
新規ファイルのアップロード
Web IDE で新しいファイルをアップロードするには、以下の手順に従います：
- 左側のアクティビティバーでエクスプローラを選択し、ファイルをアップロードするディレクトリに移動します。
- オプション。新しいディレクトリの場合は、ディレクトリを作成するパスに移動し、次のいずれかを実行します：
- パスを右クリックし、「新規フォルダ…」を選択します。
/でネストされたパスを作成できます（例えば、parentdir/subdir1/subdir2）。 - エクスプローラ・パネルの右上で、「新規フォルダ…」（{folder-new}）を選択します。
- パスを右クリックし、「新規フォルダ…」を選択します。
- 新しいディレクトリの名前を入力し、Enter を押します。
- パスを右クリックし、アップロード…を選択します。
- アップロードしたいファイルを選択し、「開く」を選択します。一度に複数のファイルをアップロードできます。
新しいファイルがアップロードされ、自動的にリポジトリに追加されます。
ブランチの切り替え
Web IDE はデフォルトで現在選択されているブランチを使用します。Web IDE でブランチを切り替えるには、以下の手順に従います：
- ステータスバーの左下で、現在のブランチ名を選択します。
- 検索ボックスにブランチ名を入力します。
- ドロップダウンリストからブランチを選択します。
ブランチの作成
Web IDE で現在のブランチからブランチを作成します：
- ステータスバーの左下で、現在のブランチ名を選択します。
- ドロップダウンリストで、新しいブランチを作成… を選択します。
- ブランチ名を入力します。
- Enterを押します。
リポジトリへの書き込み権限がない場合、新しいブランチを作成…は表示されません。
変更をコミット
Web IDE で変更をコミットします：
- 左側のアクティビティ バーで [ソース管理] を選択するか、Control+Shift+Gを押します。
- コミットメッセージを入力します。
- コミット＆プッシュを選択します。
- 現在のブランチにコミットするか、新しいブランチを作成します。
マージリクエストの作成
Web IDE でマージリクエストを作成します：
見逃した通知にアクセスするには、通知へのアクセスを参照してください。
コマンドパレットを使用します。
Web IDE では、コマンドパレットから多くのコマンドにアクセスできます。Web IDE でコマンドパレットを開いてコマンドを実行するには、次の手順に従います：
- Shift+Command+Pを押します。
- 検索ボックスにコマンド名を入力します。
- ドロップダウンリストから、コマンドを選択します。
設定の編集
設定エディタを使用して、ユーザーおよびワークスペース設定を表示および変更できます。Web IDE で設定エディタを開くには、次の手順に従います：
- 上部のメニュー バーで、[ファイル] > [環境設定] > [設定] を選択するか、Command+, を押します。
設定エディタで、変更したい設定を検索できます。
キーボードショートカットの編集
キーボードショートカットエディタを使用すると、使用可能なすべてのコマンドのデフォルトのキーバインドを表示および変更できます。Web IDE でキーボードショートカットエディタを開くには、以下の手順に従います：
- 上部メニュー バーで、[ファイル] > [環境設定] > [キーボード ショートカット] を選択するか、Command+K を押してからCommand+Sを押します。
キーボードショートカットエディタで、検索できます：
- 変更したいキーバインド
- キーバインドを追加または削除したいコマンド
キーバインドはキーボードレイアウトに基づいています。キーボードレイアウトを変更すると、既存のキーバインドも自動的に更新されます。
テーマの変更
Web IDEでは様々なテーマを選ぶことができます。Web IDEのデフォルトのテーマはGitLab Darkです。
Web IDEのテーマを変更するには：
- 上部メニューバーで、[ファイル] > [環境設定] > [テーマ] > [カラーテーマ] を選択するか、Command+K を押してから、Command+Tを押します。
- ドロップダウンリストから、矢印キーでテーマをプレビューします。
- テーマを選択します。
アクティブなカラーテーマはユーザー設定に保存されます。
アクセス通知
Web IDE でアクションを実行すると、右下隅に通知が表示されます。見逃した通知にアクセスするには
- ステータス バーの右下にあるベル({notifications}) を選択すると、通知の一覧が表示されます。
- アクセスしたい通知を選択します。
Web IDE 用の対話型 Web 端末
Web IDE でリモート開発サーバーをセットアップすると、インタラクティブな Web ターミナルを使用して次のことができます：
- サーバー上のリモート Shell にアクセスします。
- サーバーのファイルシステムにアクセスし、リモートでコマンドを実行します。
対話型ウェブターミナルを使用してRunnerと対話することはできません。ただし、ターミナルを使用して依存関係をインストールしたり、コードをコンパイルしてデバッグしたりすることはできます。
対話型 Web ターミナルをサポートするワークスペースの設定については、リモート開発を参照してください。
トラブルシューティング
Web IDE を使用していると、次のようなイシューに遭遇することがあります。
Web IDE での文字オフセット
Web IDE で文字を入力すると、4 文字のオフセットが発生することがあります。このイシューを解決するには、次のいずれかを実行してください：
- 設定に
"editor.disableMonospaceOptimizations": trueを追加します。 -
"editor.font"の設定を変更します。
詳細はVS Code issue 80170 を参照してください。