無料でビルドを開始
CircleCI.comアカデミーブログコミュニティサポート

VS Code 拡張機能の概要

1+ year ago1 min read
クラウド
このページの内容

CircleCI の VS Code 拡張機能を使用すると、VS Code から直接 CircleCI パイプラインを管理できます。

はじめに

この VS Code 拡張機能には以下が含まれています。

  • パイプラインマネージャー: IDE (統合開発環境) 内でパイプラインを確認、管理できます。 これにより、VS Code とブラウザーを行き来することなく、パイプラインの問題を把握して即座に対応可能です。

  • コンフィグヘルパー: コンフィグファイルの操作、作成、編集に役立つ支援機能を IDE 上で利用できます。

VS Code 拡張機能をインストールする

この拡張機能のインストールとセットアップ手順については、 VS Code Marketplace のページを参照するか、VS Code の [Extensions (拡張機能)] タブで CircleCI 拡張機能を検索してください。

パイプラインパネル

パイプラインパネルでは、見やすいインターフェースでパイプラインを管理できます。 このパネルには、プロジェクトで最近実行されたパイプライン、ワークフロー、ジョブが一覧表示されます。それぞれの状態を確認するだけでなく、操作することも可能です。

Screenshot of side panel with pipeline information

各オブジェクトにカーソルを合わせると、所定のイベントをトリガーできます。

パイプライン

パイプラインパネルのツリーの最上位には パイプラインが表示されており、展開するとワークフローが表示されます。 パイプラインにカーソルを合わせると、以下の操作を行えます。

  • お使いのデフォルト Web ブラウザーで CircleCI Web アプリを開き、パイプラインの詳細を確認する

ワークフロー

各パイプラインには ワークフローがネストされており、展開するとジョブが表示されます。 ワークフローにカーソルを合わせると、以下の操作を行えます。

  • お使いのデフォルト Web ブラウザーで CircleCI Web アプリを開き、ワークフローの詳細を確認する

  • ワークフローを最初から再実行して、ワークフロー全体をやり直す

  • ワークフローを失敗状態から再実行して、ワークフロー内の失敗したジョブのみをやり直す

ジョブ

各ワークフローには ジョブがネストされており、展開するとテストとアーティファクトが表示されます。 ジョブにカーソルを合わせると、以下の操作を行えます。

  • ジョブを承認する (ジョブが保留中の場合のみ)

  • ジョブをキャンセルする (ジョブが実行中の場合のみ)

  • SSH 接続でジョブを再実行する (詳しくは「 SSH での再実行」セクションを参照)

  • ジョブの詳細を確認する

    ジョブの詳細が表示されたサイドパネルのスクリーンショット

また、ジョブを展開すると以下の操作を行えます。

  • テストを読み込む (テストのメタデータを取得するように設定している場合): CircleCI でフレーキー (実行結果が不安定) と判定されたテストには、[FLAKY] マークが表示されます。

  • アーティファクトを読み込む (ジョブでアーティファクトが作成されている場合): 読み込んだアーティファクトは、クリックしてダウンロードできます。

SSH での再実行

以下の 2 通りの方法で、VS Code から直接 SSH 接続してジョブを再実行できます。

  • ジョブの詳細ページを開き、右上にある SSH ボタンをクリックする

    Screenshot of side Panel with job details
  • パイプラインパネルのジョブにカーソルを合わせ、ジョブ名の隣に表示される [SSH] ボタンをクリックする

    Screenshot of side Panel with rerun otpions

どちらの操作でも、以下の 2 つのオプションが表示されます。

  • ターミナルで SSH セッションを開始する

  • VS Code のリモートウィンドウで SSH セッションを開始する

    VS Code のリモートウィンドウを使用するには、VS Code 公式の Remote - SSH 拡張機能が必要です。 VS Code 内でリモート環境に SSH 接続する方法については、 VS Code のドキュメント (英語) をご覧ください。

SSH でジョブを再実行するには、初めにお使いの GitHub または Bitbucket の SSH キーへのパスを設定する必要があります。 初めて SSH で再実行しようとすると、必要な SSH キーへのパスを選択するよう求められます。 この手順をスキップした場合、または設定した SSH キーへのパスを変更する場合は、CircleCI VS Code 拡張機能の設定の [SSH] セクションで設定できます。

また、再実行対象のジョブで並列実行機能を使用している場合は、SSH 接続する並列実行を選択できます。

通知

パイプラインパネルのワークフローの状態の変化について知らせる通知を設定できます。

Screenshot of a notification pop-up for a failed workflow

パイプラインパネルでフォローしていないワークフローについては、状態変化の通知は利用できません。 たとえば、拡張機能で現在のブランチしかフォローしていない場合、他のブランチの状態変化の通知は受けられません。

ステータスバー

ステータスバーでは、CircleCI 拡張機能、プロジェクト、最近実行されたワークフローの状態をひと目で確認できます。

Screenshot of the status bar

ステータスバーに表示される状態は以下のとおりです。

  • [Not logged in (未ログイン)]: ステータスバーをクリックすると、CircleCI へのログインページが開きます。

  • [No project (プロジェクトなし)]: ステータスバーをクリックすると、プロジェクトを選択する設定ページが開きます。

  • [Success (成功)]/[On hold (保留)]/[Failed (失敗)] (およびその他のワークフローの状態): パイプラインパネルの一番上にある (直近に実行された) パイプラインの状態を示します。 ステータスバーをクリックすると、パイプラインパネルの対応するワークフローがハイライトされます。

コンフィグヘルパー

VS Code 拡張機能には、CircleCI コンフィグファイルの編集を状況に応じて支援する以下の機能も用意されています。

  • "宣言へ移動" と "参照へ移動" コマンドによるファイル内ナビゲーション: ジョブ名または Executor のパラメーターにカーソルを合わせると、それらの宣言内容やファイル内での参照箇所を確認できます。 また、Orb に宣言されているコマンドやパラメーターの内容も確認可能です。

    Screenshot showing the definition available on hover
  • 特定のキーにカーソルを合わせると表示されるコンテキストヘルプと使い方のヒント: VS Code とブラウザーを行き来することなく、ドキュメントを参照しながらコンフィグファイルを編集できます。 カーソルを合わせると CircleCI 公式ドキュメントへのリンクも表示されるため、すぐにアクセスできます。

    Screenshot showing the contextual information on hover
  • 構文検証: 入力ミス、パラメーターの不適切な使用、不完全な宣言、型の間違い、無効なマシンバージョン、廃止済みのマシンバージョンなどを検出できます。

    Screenshot showing the synthax highlightning when an error is identified
  • 使い方に関する警告: CircleCI をフル活用するうえでの妨げとなる廃止済みのパラメーター、未使用のジョブや Executor、不足しているプロパティを検出できます。

    Screenshot showing code highlightning to warn on an unused job
  • 自動補完機能: デフォルトのキーおよびパラメーターだけでなく、ユーザー定義の変数も自動的に補完されます。

    Screenshot showing two suggestions to autocomplete the line of code

コンフィグファイル検証用のコマンド

コンフィグヘルパーには、パイプラインを実行することなく YAML コンフィグファイルを静的に検証できる 2 つのコマンドも用意されています。

  • 現在のコンフィグファイルを検証する

    CircleCI CLI の circleci config validate コマンドに相当し、コンフィグファイルの形式に誤りがないかどうかを静的に検証します。 このコマンドで検証されるのはファイルの構造エラーと構文エラーだけであり、セマンティックエラー ("このジョブは存在しない" など) は検証されないことに注意してください。

  • 組織のポリシーに照らして現在のコンフィグファイルを検証する

    CircleCI CLI の circleci policy decide コマンドに相当し、設定済みの組織ポリシーにコンフィグファイルが準拠しているかどうかを検証します。

どちらのコマンドも、次の方法で実行できます。

  • VS Code のコマンドパレットを開く

  • 開いている .circleci/config.yml ファイル内の任意の場所を右クリックする。

  • .circleci/config.yml を開いた状態で、エディター右上にある [CircleCI] ボタンをクリックする。 他に編集しているファイルがある場合、このボタンは表示されません。

オープンソースの言語サーバー

コンフィグヘルパーは CircleCI YAML ファイル専用の言語サーバーをベースとしており、この言語サーバーはオープンソースです。 プロジェクトのリポジトリ ( circleci-yaml-language-server) にて言語サーバーのソースコードを公開しており、投稿やイシューも受け付けています。

また、Language Server Protocol に対応したエディターであれば、この言語サーバーを統合可能です。プラグインを作成することで、お気に入りのエディターでコンフィグヘルパーを利用できます。


Suggest an edit to this page

Make a contribution
Learn how to contribute