はじめに
この記事は、自分自身のmac bookでVisual Studio Codeを利用した開発環境のセットアップのための備忘録です。
私は、主にpython、AWS CloudFormation、Terraformを利用しているので、その辺りの開発のためのセットアップ手順になります。
VSCodeの日本語化
拡張機能で Japanese Language Pack for Visual Studio Codeをインストールし再起動して反映する
- 左の
Extensions Marketplaceを選択し、Japaneseで検索する installボタンからインストールする- 拡張のインストール完了後に、VSCodeを再起動するとメニューが日本語表示に変更される
Settings Syncの有効化
説明
VSCodeの設定のバックアップと複数端末でのVSCode設定の共有を行う機能です。
同期のために、GitHubアカウントまたはMicrosoftのアカウントが必要です。
ここではGitHubアカウントを利用します。
- 公式ドキュメントの説明: Settings Sync in Visual Studio Code
手順
- 左下の設定アイコン(歯車アイコン)のメニューから
バックアップと同期の設定を選択 - 上部中央のpannelに出ている
サインインボタンからGitHubでサインインを選びサインインする
拡張機能
拡張機能のセットアップ
| Category | Extension Name | 提供元 | 説明 |
|---|---|---|---|
| common | YAML | Red Hat | YAML支援機能 |
| Code Spell Checker | Street Side Software | スペルチェッカー | |
| Markdown Preview Enhanced | Markdown Preview Enhanced ported to vscode | Markdownのプレビュー。スタイルを編集したかも(要確認) | |
| Markdown Preview Github Styling | Matt Bierner | MarkdownのプレビューをGitHubスタイルで表示。いらないのかも？ | |
| Draw.io Integration | Henning Dieterichs | VSC内でDraw.ioを編集する拡張 | |
| python | Python | Microsoft | Python用拡張機能 |
| Pylance | Microsoft | Python拡張機能の言語サーバ | |
| IaC | HashiCorp Terraform | HashiCorp | TerraformのHLCのSyntaxハイライトとautocompletion機能 |
| CloudFormation Linter | kddejong | CloudFormationテンプレートの解析ツール | |
| Container | Docker | Microsoft | Docker開発支援 |
CloudFormation Linterの前提コマンドセットアップ
CloudFormation Linterは、前提としてcfn-lintをインストールする必要があるため、以下の手順でインストールする。
- コマンドラインで以下のコマンドを実行し
cfn-lintをインストールする
pip3 install cfn-lint
- 以下のコマンドで実行確認
cfn-lint --version
- (オプション)もし実行できない場合は
~/.zshrcに以下の内容を追記してpython3のパスを追加する
# Add Path PATH="${PATH}:/Users/n/Library/Python/3.9/bin"
Terraform ExtensionのFormattingのための前提セットアップ
Terraform ExtensionでFormattingを行うためには、ローカルに`terraform`コマンドが必要そうです。そのため以下リンク先からterraformをインストールします。
developer.hashicorp.com
設定
自動フォーマット
保存時のフォーマッタの自動実行設定
- 設定
- 右下の設定(歯車アイコン)から
設定を選び、以下のキーワードでフィルタリングしてチェック(true)にする。
- 右下の設定(歯車アイコン)から
- 設定:
Format On Save:true
terraformの自動フォーマット実行
terraform編集中のファイル保存時のフォーマッタ(terraform fmtコマンド)を実行する設定。
- 設定
shift+command+pでコマンドパレットを開く- "open user setting"と入力し、
>open user settings (JSON)を実行する - 開かれた
settings.jsonに以下のJSONブロックを追加する
"[terraform]": { "editor.defaultFormatter": "hashicorp.terraform", "editor.formatOnSave": true, "editor.formatOnSaveMode": "file" }, "[terraform-vars]": { "editor.defaultFormatter": "hashicorp.terraform", "editor.formatOnSave": true, "editor.formatOnSaveMode": "file" }
- 参考ドキュメント
- HashiCorp Terraform - Visual Studio Marketplaceの
Formattingの節を参照
- HashiCorp Terraform - Visual Studio Marketplaceの
CloudFormationの構文チェック用のカスタム設定追加
下記設置を追加します
- CloudFormation仕様の追加
- CloudFormationのカスタムタグ定義の追加
設定(1) CloudFormation仕様の追加
VSCodeの設定ファイル(Macの場合: $HOME/Library/Application Support/Code/User/settings.json)*1に、CloudFormationのリソース仕様を追加します。この設定でをすると、拡張子がcf.yamlのファイル、cfn/、cloudformation配下のYAMLファイルがCloudFormation用のYAMLとして指定したソース仕様にしたがってチェックされます。
- コマンドパレット(⇧⌘P)を開いて
>open user settings (JSON)を実行する - 下記定義を追加する
"yaml.schemas": { "https://d33vqc0rt9ld30.cloudfront.net/latest/gzip/CloudFormationResourceSpecification.json": [ "*.cf.yaml", "*.cf.yml", "cfn/*.yaml", "cfn/*.yml", "cloudformation/*.yaml", "cloudformation/*.yml" ] },
設定(2) CloudFormationのカスタムタグ定義の追加
デフォルトのままだと!Sub, !RefなどのCloudFormation固有のスキーマがYAMLの構文エラーとなるため、これら固有スキーマを追加します。内容はこちらのIssueのAndyJPhillipsさんのコメント内容を流用しています。
"yaml.customTags": [ "!And sequence", "!Equals sequence", "!If sequence", "!Not sequence", "!Or sequence", "!Base64", "!Cidr sequence", "!FindInMap sequence", "!GetAtt", "!GetAZs", "!ImportValue", "!Join sequence", "!Select sequence", "!Split sequence", "!Sub", "!Ref" ]
(参考)setting.json全体の内容
設定(1)&(2)をすると、既存の設定に、下記設定が追加された形になります。
{ <既存の設定> "yaml.schemas": { "https://d33vqc0rt9ld30.cloudfront.net/latest/gzip/CloudFormationResourceSpecification.json": [ "*.cf.yaml", "*.cf.yml", "cfn/*.yaml", "cfn/*.yml", "cloudformation/*.yaml", "cloudformation/*.yml" ] }, "yaml.customTags": [ "!And sequence", "!Equals sequence", "!If sequence", "!Not sequence", "!Or sequence", "!Base64", "!Cidr sequence", "!FindInMap sequence", "!GetAtt", "!GetAZs", "!ImportValue", "!Join sequence", "!Select sequence", "!Split sequence", "!Sub", "!Ref" ] }
