CircleCI VSCode拡張機能つかってみた

この記事は、[CircleCI Advent Calendar 2022 6日目](https://qiita.com/advent-calendar/2022/circleci)の記事です。

[CircleCIのVSCode拡張機能](https://marketplace.visualstudio.com/items?itemName=circleci.circleci)が発表されたため使用してみました！
CircleCIの様々な機能がVSCodeで見れて操作が完結します。

<blockquote class="twitter-tweet"><p lang="en" dir="ltr">🚀 The official CircleCI <a href="https://twitter.com/hashtag/VSCode?src=hash&amp;ref_src=twsrc%5Etfw">#VSCode</a> extension is now generally available to all users in the <a href="https://twitter.com/code?ref_src=twsrc%5Etfw">@code</a> Marketplace.<br><br>Learn how you can write config files and manage your pipelines without leaving your favorite IDE: <a href="https://t.co/d3ICZysdWK">https://t.co/d3ICZysdWK</a><br><br>[DEMO] See the Pipeline Manager in action 👇 <a href="https://t.co/PYkR4xz50Z">pic.twitter.com/PYkR4xz50Z</a></p>&mdash; CircleCI (@CircleCI) <a href="https://twitter.com/CircleCI/status/1597305495160852488?ref_src=twsrc%5Etfw">November 28, 2022</a></blockquote> <script async src="https://platform.twitter.com/widgets.js" charset="utf-8"></script>

# 機能
- **パイプラインマネージャー** : CircleCI のパイプライン、ワークフロー、ジョブを VSCodeで直接表示および管理できる。
- **コンフィグヘルパー** : VSCode内でCircleCI YAMLファイルの作成、編集、最適化を簡単に行うことができる。常にドキュメントを参照しなくて良くなる。

## 使用準備

1. [拡張機能](https://marketplace.visualstudio.com/items?itemName=circleci.circleci)をVSCodeにインストールします。VSCodeはversion1.67以上が必要

## パイプラインマネージャー

1. CircleCIアイコンをクリックすると開くパイプラインパネル上部の設定マーク:gear:で、すべての構成がある設定画面が開きます。
1. 各種設定
    1. Authenticationに、CircleCI画面よりユーザーアイコン → User Settings → Personal API Tokens → Create New Tokenボタン より発行したAPIキーを入力します。
    1. `.circleci/config.yaml`を含むプロジェクトフォルダを開くか、`Project`よりプロジェクトのレポジトリを手動で選択すると、最新のパイプラインが開きます。
    1. レポジトリのAuther、レポジトリのBranch、ワークフローのStatusesなどで視覚化して表示したいパイプラインの選択ができます。
    1. プッシュ通知を受けるイベントの選択ができます。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/331389/801e3af8-9489-3d55-e22a-0ae4a3575e5d.png)
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/331389/175366af-38ef-2c90-be4e-a1b1f99da1e0.png)
1. パイプラインパネル
    1. パイプラインパネルでは、最新のパイプライン、ジョブ、およびワークフローが一覧表示され、それらのステータスを監視して操作できます。![スクリーンショット 2022-12-05 23.08.19.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/331389/92a51d0f-6555-fafb-c128-890b1053a85a.png)
    1. 承認やジョブのキャンセルもできるようです。![pipelines-panel.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/331389/e0847856-607b-3ae1-4c2b-53857eafb722.png)

    1. 各イベントをクリックすると、詳細が見れました。YAMLのテストジョブで、結果を `store_test_results` `store_artifacts` で保存しておくと、パイプラインパネルからテスト結果が見れました！便利:open_mouth: ![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/331389/6b8618dc-1721-a86f-80e4-1705e7ff9e51.png)

    YAML例）

   ```yml
   - run: # テスト実行ジョブ
       name: run-api-tests
       working_directory: ./tests_api
       command: |
         export AWS_ACCESS_KEY_ID=${<< parameters.env-aws-access-key-id >>}
         export AWS_SECRET_ACCESS_KEY=${<< parameters.env-aws-secret-access-key >>}
         export AWS_DEFAULT_REGION=<< parameters.aws-region >>
         export SLS_WARNING_DISABLE=*
         export SLS_DEPRECATION_DISABLE=*
         . ./setup_test_env.sh << parameters.stage >>
         mkdir /tmp/test-results
         pytest -vv --junitxml=/tmp/test-results/junit.xml
   - store_test_results: # テスト結果保存
       path: /tmp/test-results 
   - store_artifacts: # アーティファクト保存
       path: /tmp/test-results 
   ``` 

## コンフィグヘルパー

CircleCI 構成ファイルの作成、編集、および操作をファイル内で支援してくれます。

早速新しいバージョンがあると教えてくれました。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/331389/8d660428-6f23-d663-8d6d-b2ad18065289.png)

カーソルを当てると構成の説明がポップアップされます。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/331389/cb865747-35db-c384-ad99-1d06aea8011d.png)

`Parameters`定義参照時など、スペルミスがあると警告してくれます。
今まで`circleci config validate`コマンドでチェックしていましたが、リアルタイムでエラーが出るので助かる。ただ、段落/階層のチェックには対応していなさそうなのでコマンドとの併用は必要な気がします。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/331389/857c1249-fef6-f068-4f81-d36b1ec393cc.png)

# 感想
CircleCIのVSCode拡張機能めちゃ便利！ダッシュボード開かなくて良い。
積極的につかっていきたいです:relieved:
@CircleCIJapan グッズください:santa_tone1: