はじめに
2020/11/21(土)に、Visual Studio Code5周年記念として、「VS Code Conference Japan」というイベントがオンラインで開催されました。
この中で、「アプリ開発&チーム管理で役立った拡張機能など」という内容で30分セッションを行いましたので、その内容を含め、VS Code Conference Japanについて書きたいと思います。
※ちなみに、発表資料は↓になります。
URL:https://www2.slideshare.net/MasakiSuzuki3/ss-239362824
www2.slideshare.net
お礼
管理者の皆様、いろいろ手筈を整えていただき、ありがとうございました。
また、当日聴いてくださった皆さん、ありがとうございました。
セッションで紹介した拡張機能について
- セッションで紹介した拡張機能の概要+αを記載しています。(詳細は先述の発表資料を参照)
- 個々のURLは載せてませんが、VS Codeの拡張機能検索やブラウザで名前をそのまま検索すれば、(多分)出てきます。
開発環境編
Setting Sync
- 複数のPCでVS Code環境の同期を取れる。
- GitHubアカウント(正確にはアクセストークンとGist ID)さえあればOK。
- Gist IDはダウンロード時のみ必要
- やることは「設定のアップロード」と「設定のダウンロード」だけ。
ちなみに、「複数PCでのVS Code環境の同期」機能は、2020/07にVS Codeに標準で搭載された。
ただしまだプレビュー版なので、使用前に警告が出る。
Live Share
- VS Code上で複数人で同時にソースコードの編集が行える、Micorsoft製の拡張機能。
- ソースの同期だけではなく、チャット&音声通話も可能。
- withコロナ時代のリモートワーク全盛の今の時代、ものすごく真価を発揮している拡張機能では
ちなみにLive Shareを実際に動かした様子は、下記「VS Code Meetup#2 -Live Share編-」の動画を参照
https://www.youtube.com/watch?v=4wMlwWCeboQ
サーバーレスアプリ編
Azule Template Viewer
- AzureのARM(Azure Template Manager。AWSでいうCloudFormationのような、Infrastructure as Codeを実現するリソース)のテンプレートファイルの内容について、事前にデプロイ後の内容を確認できる。
- てか、マジでめっちゃ便利。
- マジでCloudFormationにも欲しい...
Rest Client
- HTTPリクエスト送信&レスポンス受信をVS Code上で行える。
- リスエスト定義&送信がめっちゃ簡単。(定義はスクショ参照。送信は[ctrl]+[alt]+[R]だけ)
- この手の機能の拡張機能で、一番有名なのではないか?
Swagger Viewer
- Swagger定義ファイルの内容をプレビューできる。
- 定義ファイルを変更したら、それがリアルタイムにプレビュー画面に反映されるのが良い。
- Swagger Editor( https://editor.swagger.io/ )と同等の機能を持つ。
AWS ToolKit
- AWSのいくつかのリソース(Lambda, S3, CloudWatchなど)について、参照・AWS上で実行・削除を実施できる。
- S3はアップロード&ダウンロードを行える。
- いちいちコンソールを開かないでよい。
- けど、編集ができないので、そこは今後の課題かな...
- でも、Step FunctionsのSteta Machineプレビュー機能は便利(これも変更がりリアルタイムで反映される)。あとS3アップロード&ダウンロード機能とか。
- セッションでも言ったけど、個人的にDynamoDBのCRUDができると、かなりいい感じではないかなと思う。
コーディング補助編
ESLint
- JavaScriptの静的検証ツール
- 構文エラーとか、設定したコーディングルールに反したコードを知らせてくれる。
Prettier
- コードフォーマッタ
- コードを整形し、可読性の高いコードにしてくれる。
- 一部静的検証も行ってくれる。
Grammarly
- もともとはドキュメントの文法チェッカー
- スペルが誤っている単語をお知らせしてくれる。
- 「unofficial」となっているが、使用には全く問題ない。(もともとMSが公式で出していたらしいが、無くなったため)
Code Spell Checker
- VS Code上でスペルチェックを行ってくれる。
- スペルが違う単語についてお知らせしてくれて、修正候補も表示してくれる。
- 「expectVarue」(正しくは「expectValue」)のような、複数の単語がつながった変数などのスペルミスも教えてくれる。
Gi編
GitLens
- ブランチ・ファイル・ファイル行単位で履歴を表示する
- ブランチ/タグ/過去コミット間での差分を表示する
- ソース内に変更者&コミットコメントを表示する
...など(他にもいろいろ)、「VS CodeでGit扱うなら、とりあえずこれは入れとけ」レベルで便利な拡張機能
Git Graph
- Gitリポジトリについて、ブランチ&変更履歴をツリー状に表示してくれる。
- Backlog Gitの「ネットワーク」みたいな感じ
- ツリー上から、Gitの各種操作(push/pull/checkoutなど)が可能
- これも非常に便利だし「とりあえずこれは入れとけ」レベルでおススメ
その他支援ツール編
Excel Viewer
- 名前の通り、ExcelをVS Code上で閲覧できる。(閲覧のみ。編集は不可)
- Excelだけではなく、CSVファイルも閲覧可能。
- というか、CSVビューワーとして非常に便利
- ソート&フィルタ機能が標準で使用できるのが非常に良い。
- データの調査&解析に向いている。
Draw.io Integration
- Draw.io(現Diagrams.net)のフローチャート作成機能をVS Code上で実行できる。
- 微妙に違う部分があるかもしれないが、使った限りはさほど気にならないレベル。
- 本家同様、AWS/Azureなどクラウド関連の図が豊富で、クラウド・サーバーレスのフロー図作成に便利。
Hex Editor
おまけ:諸事情で資料に載せられなかった拡張機能
Barcket Lens & Bracket Code Colorizer(2)
- どちらも、コード内の各種カッコについて、対応するカッコを教えてくれる拡張機能。
- Bracket Code Colorizer(2)は色で、Bracket Lensは文字列で教えてくれる。
- Bracket Code Colorizerは1と2があるが、基本的な機能は同じ。(2の方が性能が向上している、とのこと)
※左がBracket Lens, 右がBracket Code Colorizer2(なんかこのブログを書いているPCだと、同時使用ができなかった。たまたま?)
indent-rainbow
- 名前の通り、インデントを深さごとに色分けして、コードを読みやすくしてくれる。
- 色は設定可能
余談
- 最初は「サーバーレスアプリ開発で役立った拡張機能など」というタイトルを予定していましたが、構想を考えてるうちに「これ、ほとんど(Azule Template ViewerとAWS ToolKit以外)サーバーレス関係なくね?」と思い、運営さんにタイトルを変更してもらいました。(ありがとうございました)
- 実は10月後半からずっと体調不良が続いており、本格的に資料を作成できたのがイベントの2日前からでした。
- しかも、最初は10分くらいだとずっと思っていたので、イベント3日前のZoomリハーサルで30分と聞いたときは、マジで焦りました。
- そして「まあリモートだし、始業前とかにも時間あるから、そこで進めるか」と思った時に限って、前日は3週間に一度の出社日というタイミングの悪さ...
- 発表内容&このブログでも、AWS Toolkitがちょっと辛口だったかな?
- でも個人的にはAWS Toolkitには期待しているし、実際クラウドの中ではAWSが一番好きなので、期待を込めてという意味で
お知らせ
12月にQiitaさんで行われる「Advent Calendar 2020」において、2記事を担当することになりました。
担当するテーマは、サーバーレスとAWS です。
ちなみに、下記のタイトルで記事を書こうかな、と健闘中です。(確定ではない)
おわりに
ていうか、体調も戻ってきたし、そろそろブログも本格的に再開したいです。
Serverless Frameworkもいろいろ機能やプラグインが追加されましたし、いろいろ触って、いろいろ記事にしたいですね。本当に。
プラグインも自作したいですし。
それにAWSを始め、いろいろ技術が出てきたので、こんな時代でも仕事が絶えないように、時間の許す限りスキルアップしていきたいなと思ってます。
それではまた。