【2024年3月更新】クラウドエンジニア向け Visual Studio Code のおすすめプラグインまとめ

作成日: 2024/03/10, 更新日: 2024/03/10

Visual Studio Code とは、Microsoft が提供するオープンソースのコードエディタです。
昨今のクラウドエンジニアにとって、Visual Studio Code は IaC のコードを書く際に利用することが多いと思います。
本記事では、クラウドエンジニア向け Visual Studio Code のおすすめプラグインをまとめました。

この記事を読むべき人
全般
操作環境切り替え
Git
Markdown
Python
1. 1. Flake8
2. 2. Black Formatter
CloudFormation
Terraform
1. 1. HashiCorp Terraform
2. 2. tfsec

この記事を読むべき人

クラウドエンジニア（主に AWS, GCP, Azure）で Visual Studio Code（以下略: VSCode）を使用している人向けに、おすすめのプラグインを紹介します。
フロント、バックエンドエンジニアの方は、PHP、Java、Rubyなど、開発言語に特化したプラグインがあるので、そちらをご利用ください。

全般

1. Japanese Language Pack for Visual Studio Code

VS Marketplace リンク

VSCode を日本語化するためのプラグインです。
初期インストール時には英語表記になっているので、日本語化したい方はインストールしてください。

2. GitHub Copilot

VS Marketplace リンク

GitHub Copilot は、AI によるコード補完機能を提供するプラグインです。
関数名やコメントアウトでどのような処理をしたいかを記述すると、それに合わせたコードを提案してくれます。
30日間の無料トライアル期間がありますが、継続して利用するには月間 10 USD（月間 100 USD）の有料プランが必要です。
特に Python、JavaScript、TypeScript、Ruby、Go、C#、C++ に適していると公式ページに記載されていますが、Terraform、CloudFormation などのインフラコードでも活用できます。
GitHub Copilot があるかないかで開発速度が倍以上変わると実感しており、特におすすめのプラグインです。

プロジェクトで　GitHub Copilot の利用を禁止したい場合、以下の設定を基本設定に入れることで、プロジェクト内で GitHub Copilot を利用できないようにすることができます。


          {
              "github.copilot.enable": {
                  "*": false
              }
          }

3. Vscode Google Translate

VS Marketplace リンク

テキストを選択しショートカットーキー（デフォルトは Alt + Shift + T ）を押すと、Google 翻訳で翻訳結果を表示してくれます。
VSCode を離れずに翻訳することができるので、関数名を考えたい、コメントや Git のコミットメッセージを英訳したいときに便利です。

4. change-case

VS Marketplace リンク

選択したテキストをキャメルケース、スネークケース、パスカルケースなどに変換してくれるプラグインです。
文字のケースを変換したいテキストを選択し、コマンドパレット（Windows は Ctrl + Shift + P 、Mac は Command + Shift + P ）から以下のメニューを選択することで変換することができます。
- Change Case camel
- Change Case constant
- Change Case dot
- Change Case kebab
- Change Case lower
- Change Case lowerFirst
- Change Case no
- Change Case param
- Change Case pascal
- Change Case path
- Change Case sentence
- Change Case snake
- Change Case swap
- Change Case title
- Change Case upper
- Change Case upperFirst

5. Draw.io Integration

VS Marketplace リンク

Draw.io は無料で利用できる図版作成ツールです。
Web ブラウザでも draw.io からツールを利用することができますが、社内セキュリティルールなどの都合で顧客情報を Web 上に入力することができない場合、オフラインで利用できる VSCode のプラグインを利用することができます。
AWS、GCP、Azure のアーキテクチャ図を作成する際に活用できます。古いアイコンしかありませんが、コピー＆ペーストで画像を取り込んだり、XML ファイルをインポートすることで標準で用意されているアイコン以外のものも利用することができます。

6. Prettier - Code formatter

VS Marketplace リンク

Prettier（プリティア）は様々な言語に対応したコードフォーマッターです。
- 対応している言語は What is Prettier? · Prettier に記載されています。
言語に応じてフォーマッターはメジャーなものがいろいろありますが、とりあえずこれを入れておけばある程度の言語には対応しています。

操作環境切り替え

1. Remote - SSH

VS Marketplace リンク

SSH 接続を利用してリモートサーバーに接続するためのプラグインです。
接続したリモートサーバーのファイルを VSCode 上で編集することができます。
接続先の情報は ~/.ssh/config に記述することで、接続情報を一元管理することができます。

2. WSL（Windows向け）

VS Marketplace リンク

WSL（Windows Subsystem for Linux）を利用して、WSL 上で動作する VSCode を起動するためのプラグインです。
WSL を利用するユーザーにとっては必須のプラグインとなります。

3. Dev Containers

VS Marketplace リンク

Docker コンテナを利用して開発環境を構築するためのプラグインです。
僕自身はあんまり活用していないのですが、Dev Container のビルド時のファイルをチームのメンバーに共有することで、開発環境の統一を図ることができます。
ただし、コンテナを動作させる必要があるため、ある程度のスペックを持った PC が必要です。
インフラエンジニアにとってはあまり必要ないかもしれませんが、何か活用できることがあるかも？ということで一応おすすめとして紹介しています。

Git

1. Git History

VS Marketplace リンク

Git の履歴を確認することができるメジャーなプラグインです。
ブランチ、編集者、ファイル毎の履歴を表示したり、ブランチ、コミット間の履歴の比較を行うことができます。

2. Git History Diff

VS Marketplace リンク

Git の履歴を確認するためのプラグインは Git History の方が有名ですが、ブランチ間を比較するときにはこちらのほうが個人的には使いやすいためお勧めいたします。
Git History では、ブランチ間の比較を行う際にエディター状にすべてのファイルの差分が表示されますが、Git History Diff ではサイドバーにツリー構造で差分が表示されるため、どのファイルに差分があるのかが一目でわかります。

3. GitLens — Git supercharged

VS Marketplace リンク

GitLens も Git の履歴を確認するためのプラグインですが、Git History や Git History Diff とは異なり、コード上に直接表示されるため、コードを見ながら履歴を確認することができます。
画面がごちゃごちゃしているので活用できておりませんが、Git History などと同様にコミット間やブランチ間の差分を確認することができます。

Markdown

1. Markdown All in One

VS Marketplace リンク

Markdown に関する機能が詰め合わさったプラグインです。こちらのプラグインを入れることで以下機能が利用できます。
- ショートカットキー（太文字、斜体、取り消し線、プレビューなど）
- Table of Contents（目次）の自動生成
- リストの編集時に自動でインデントや連番を調整
- HTMLファイルへの変換
- テーブルのフォーマット
- 数式の利用
- テキストを選択してリンクを貼り付けると、自動的にリンクを生成してくれる

僕が入れている目的として、主に Linting や目次の自動生成を利用しています。それ以外の機能は他のプラグインの方が使いやすいため、それらのプラグインを利用しています。

2. Paste Image

VS Marketplace リンク

クリップボードにコピーした画像を VSCode 上でショートカットキー（Windows は Ctrl + Alt + V 、Mac は Command + Alt + V ）を押すことで Markdown ファイルなどに貼り付けることができるプラグインです。
貼り付けた画像は指定したディレクトリに保存され、そのパスが Markdown ファイルに記述されます。
僕は以下の設定を基本設定に入れることで、貼り付けたファイルと同じディレクトリに .images/ ディレクトリを作成し、その中に画像を保存するようにしています。


          {
              "pasteImage.basePath": "${currentFileDir}/.images",
              "pasteImage.path": "${currentFileDir}/.images",
              "pasteImage.insertPattern": "${imageSyntaxPrefix}.images/${imageFilePath}${imageSyntaxSuffix}"
          }

3. Markdown Table

VS Marketplace リンク

Markdown でテーブルを作成、整形するためのプラグインです。
色々なテーブル整形のプラグインを試しましたが、日本語のマルチバイト文字を含めたテーブルでもちゃんと整形してくれたので、こちらを利用しています。（フォントの相性もあるかもしれません）

4. Markdown PDF

VS Marketplace リンク

Markdown ファイルを PDF や HTML 、JPEG、PNGなどに変換するためのプラグインです。
Markdown All in One にも PDF 変換機能があるのですが、こちらのプラグインの方変換先として PDF などが選択できるため、こちらを利用しています。

Python

1. Flake8

VS Marketplace リンク

Python の Linter です。Python のコードを書く際に、コードの品質をチェックするために利用します。例えば、以下のようなチェックを行うことができます。
- コードの長さが 100 文字を超えていないか
- 未使用の変数がないか
- インポートされているモジュールが存在するか
- など

以下の設定を基本設定に入れることで Flake8 でチェックするルールをカスタマイズすることができます。
- プロジェクト内で統一したいときには、プロジェクトルートに .vscode/settings.json を作成し、以下の設定を記述することで統一することができます。


          {
              "flake8.args": [
                  "--ignore=S311,S410,W503",
                  "--max-line-length=170",
                  "--max-complexity=20"
              ]
          }

2. Black Formatter

VS Marketplace リンク

Python のコードをフォーマットするためのプラグインです。例えば、以下のようなフォーマットを行うことができます。
- シングルクォートをダブルクォートに変換
- インデントをスペース 4 つに変換
- 関数間の空行を2行に変換
- など

以下の設定を基本設定に入れることで、Python ファイルを保存する際に自動でフォーマットを行うことができます。


          {
              "[python]": {
                  "editor.insertSpaces": true,
                  "editor.detectIndentation": true,
                  "editor.tabSize": 4,
                  "editor.defaultFormatter": "ms-python.black-formatter",
                  "editor.formatOnSave": true
              }
          }

CloudFormation

1. YAML

VS Marketplace リンク

CloudFormation は JSON でも記述することができますが、YAML で記述することが多いため、YAML の Linting や入力補完を行うためのプラグインを紹介します。
このプラグインを入れることで、YAML ファイルを開いた際に、YAML の構文エラーを表示してくれます。
また、YAML ファイルを編集する際に、インデントやキーの入力補完を行ってくれます。
CloudFormmation の擬似関数はデフォルトで入ってないため、構文エラーが表示されてしまいます。以下の設定を基本設定に入れることで、構文エラー表示しないようにすることができます。


          [
              "yaml.customTags": [
                  "!And sequence",
                  "!Base64 scalar",
                  "!Cidr scalar",
                  "!Condition scalar",
                  "!Equals sequence",
                  "!FindInMap sequence",
                  "!GetAZs scalar",
                  "!GetAtt scalar",
                  "!GetAtt sequence",
                  "!If sequence",
                  "!ImportValue scalar",
                  "!Join sequence",
                  "!Not sequence",
                  "!Or sequence",
                  "!Ref scalar",
                  "!Select sequence",
                  "!Split sequence",
                  "!Sub scalar",
                  "!Sub sequence",
                  "!Transform mapping",
              ]
          ]

schemastore/src/api/json/catalog.json at master · SchemaStore/schemastore を見るとわかる通り、プラグインの初期設定では以下の CloudFormation のスキーマ設定が登録されています。


          [
              {
                "name": "AWS CloudFormation",
                "description": "AWS CloudFormation provides a common language for you to describe and provision all the infrastructure resources in your cloud environment",
                "fileMatch": [
                  "*.cf.json",
                  "*.cf.yml",
                  "*.cf.yaml",
                  "cloudformation.json",
                  "cloudformation.yml",
                  "cloudformation.yaml"
                ],
                "url": "https://raw.githubusercontent.com/awslabs/goformation/master/schema/cloudformation.schema.json"
              }
          ]

このファイル名の形式やスキーマの参照先となるURLを変更したい場合、基本設定に以下のような定義入れることで、CloudFormation のスキーマ設定を変更することができます。
- 以下のスキーマの参照先となる URL は CloudFront の東京リージョンのものを指してます。デフォルトのものとどちらの参照先が良いのかはよくわかりません。。。


          {
            "yaml.schemas": {
                  "https://d33vqc0rt9ld30.cloudfront.net/latest/gzip/CloudFormationResourceSpecification.json": [
                      "*.cf.yaml",
                      "*.cf.yml",
                      "cloud*formation/*.yaml",
                      "cloud*formation/*.yml"
                  ]
              }
          }

2. CloudFormation Linter

VS Marketplace リンク

CloudFormation の Linter です。前述した YAML プラグインとは異なり、CloudFormation ならではの構文エラーを表示してくれます。例えば、以下のようなチェックを行うことができます。
- リソース名が重複していないか
- リソースのプロパティが正しいか
- リソース間の依存関係が正しいか
- など

チェックできるルールはメインの cfn-lint/docs/rules.md · aws-cloudformation/cfn-lint に記載されています。

以下の設定を基本設定に入れることで、特定のルールを無視することができます。


          {
              "cfnLint.ignoreRules": [
                  "W3011"
              ]
          }

3. Cfn-Nag Linter

VS Marketplace リンク

CloudFormation の Linter です。CloudFormation Linter とは異なり、セキュリティに関するチェックを行うことができます。例えば、以下のようなチェックを行うことができます。
- IAM ポリシーにワイルドカードが含まれていないか
- S3 バケットのサーバーアクセスログが有効か
- セキュリティグループのインバウンドルールで 0.0.0.0/0 が指定されていないか
- など

チェックできるルールは cdk-nag/RULES.md at main · cdklabs/cdk-nag に記載されています。

以下の設定を基本設定に入れることで、特定のルールを無視することができます。CFn-Nag では直接 settings.json に無視するルールを記述することができないため、 .cfn-nag-blacklist.yml など適当な名前のYAMLファイルを作成し、無視するルールを記述することで無視することができます。この例では .vscode ディレクトリに .cfn-nag-blacklist.yml を作成し、以下の設定を記述しています。d


          {
              "cfnNagLint.blacklistPath": ".vscode/.cfn-nag-blacklist.yml"
          }

.cfn-nag-blacklist.yml の中身は以下のように記述することで、特定のルールを無視することができます。ここで無視するルールを定義してしまうとすべてのプロジェクトで無視されてしまうため、全てのリソースに共通するルールのみ無視する必要があります。


          ---
          RulesToSuppress:
            # S3 Bucket should have access logging configured
            - id: W35
              reason: アクセスログの設定は不要
            # Resource found with an explicit name, this disallows updates that require replacement of this resource
            - id: W28
              reason: IAMロール名は動的ではなく固定で設定
            # CloudWatchLogs LogGroup should specify a KMS Key Id to encrypt the log data
            - id: W84
              reason: カスタマー管理キーの暗号化は利用しない

Terraform

1. HashiCorp Terraform

VS Marketplace リンク

Terraform に関連する機能が詰め合わさったプラグインです。こちらのプラグインを入れることで、以下機能が利用できます。
- プロバイダー、リソース名、データソース、属性、変数名などの入力補完
- 構文エラーチェック
- Terraform のコードのフォーマット（ terraform fmt の実行）
- Terraform Cloud との連携
- Terraform Module、Provider のエクスプローラー
- コマンドパレットから terraform init や terraform plan などのコマンドを実行

2. tfsec

VS Marketplace リンク

Terraform の Linter です。Terraform のコードを書く際に、セキュリティに関するチェックを行うために利用します。例えば、以下のようなチェックを行うことができます。
- IAM ポリシーにワイルドカードが含まれていないか
- S3 バケットの暗号化が有効か
- セキュリティグループのアウトバウンド/インバウンドルールで 0.0.0.0/0 が指定されていないか
- など

チェックできるルールは enable-access-logging - tfsec に記載されています。