Above & Beyond

日々のアウトプット記録

VS Code Meetup でLTをしてきた。

昨日(2020年12月18日(金))は、「VS Code Meetup #8 - 忘年会だよ全員集合 ☆ LT祭り♪(懇親会もあるよ!)」でLTをしてきました。

f:id:kabukawa:20201219112039p:plain:w500

vscode.connpass.com

今はオンラインなので仕事終わってから準備するのも余裕があるし、登壇の敷居は随分下がっている気がします。


目次


VS Code Meetupとは

connpassのコミュニティ紹介によると「強力かつ軽量なオープンソースのコードエディター「Visual Studio Code」のミートアップ」。 その名のとおりですね。Visual Studioというのはマイクロソフト社の定番の統合開発環境ですが、その名を冠したエディタがVisual Studio Codeです。 WindowsMacLinuxで使うことができ、無料でダウンロードして使えます。

code.visualstudio.com

Windows 7, 8, 10

形式 プラットフォーム
User Installer 64 bit. 32 bit, ARM
System Installer 64 bit. 32 bit, ARM
.zip 64 bit. 32 bit, ARM

Linux

形式 プラットフォーム
.deb(Debian, Ubuntu) 64 bit, ARM, ARM 64
.rpm(Red Hat, Fedora, SUSE) 64 bit, ARM, ARM 64
.tar.gz 64 bit, ARM, ARM 64

Mac

形式 プラットフォーム
macOS 10.10+ 64 bit

プラットフォームはbitだけ書かれているものは Intel ですね。 今話題の Apple Silicon版は、12月15日にInsider版で提供され始めています。

www.itmedia.co.jp

一刻も早く使ってみたいという方はこちらから。 (正式版ではないので不具合がある可能性はあります。)

code.visualstudio.com


何故参加したか

元々参加はしたかったのですが、人気のエディタに関する勉強会ということでオフラインのときは参加申込みがすぐに埋まってしまうことや、仕事とぶつかったりして参加できずにいました。 今年に入ってオンラインになり、自分の仕事も落ち着いてきたのでやっと参加できるようになったという感じです。

なんでLTをすることになったかと言うと、先日参加した VS Code Conference Japanのときに、うっかり(?)こんなツイートをしたからです。

なんか気持ちが盛り上がって、登壇しても良いかも、みたいなところに「登壇しませんか?」と声をかけていただいたので、じゃぁやろうかな、みたいな。


内容

タイトル 発表者
現場で使うVS Code
github.com
kabukawa
(仮) Cloud Code と DevContainer をちゃんと使ってみた
[資料は公開されたら追記します]
iganari
Ansible でお世話になってる機能と拡張
www2.slideshare.net
横地
【仮】VS Code拡張機能を駆使してオンラインイベントを開催した話
[資料は公開されたら追記します]
@ka2ki_takahashi
VS Code 公式サイトの翻訳はいる? いらない?
[資料は公開されたら追記します]
Nori Suzuki
VSCodeに助けられた出版裏話
[資料は公開されたら追記します]
おだしょー
めちゃモテVS Code
[資料は公開されたら追記します]
dev.classmethod.jp
Ryuichi Kataoka
VS Code Conference Japan 2020 振り返り - アンケート結果編 - もっちゃん

資料はまだ公開されていないものが多いですが、一刻も早く振り返りたいという方にはアーカイブ動画が公開されていますので、こちらもどうぞ。


VS Code Meetup #8 - 忘年会だよ全員集合 ☆ LT祭り♪(懇親会もあるよ!)

伝えたかったこと

VS Codeというのは拡張機能の豊富さで「こんな事もできる」という面が強調されがちですが、それはベースがあってのことだと思ってます。 自分のような客先常駐しているような形態で仕事をしていると、拡張機能をあれこれ入れて使うというのが難しい現場もあります。 そういうときに、VS Codeは入れる意味がないのかといえばそんなことはなくて、すごく役に立つ機能をたくさん持っていると思います。 その役立つ機能を使えば、旧態依然とした現場を少しでも変えて、楽しく開発ができるようになる。 そんな風になったら良いな、という想いを持って今回の発表をしました。 もちろん、拡張機能を使えば更に色々なことができるようになるし、もっと開発が楽しくなる素敵なものだと思っています。 そういう面も含めて、エンジニアが普段一番使うであろうエディタという道具から、現場を変えていけると良いな。 そんなことを考えています。

とはいえ、5分(だいぶオーバーしましたが、、、)で伝えられることは多くはないですし、伝わったのかな、という自信もないです。 だから、もう少し継続的にこういう活動もしていかないとな、と気持ちを新たにしました。 (次回発表するとは言ってない)

懇親会

今回はオンラインの懇親会があったのですが、時間が結構押してしまい(俺の発表も一因なので反省)、懇親会前で退出しました。 oViceを使った懇親会だったようですが、次回は参加できると良いな。


まとめ

色々書きましたが、率直に言って楽しかったです。

ありがとうございました!

Windows Terminalをショートカットキーで起動したい

タイトルの通りなんですが、同じようなことを考えている人もいるような気がするので、メモとして残しておきます。

Windows Terminalとは

f:id:kabukawa:20201205002740p:plain

Windows ターミナルは、コマンド プロンプト、PowerShell、WSL などのコマンドライン ツールおよびシェルのユーザーのための、高速、効率的、強力な、生産性を向上させる最新のターミナル アプリケーションです。主な機能には、複数のタブ、ウィンドウ、Unicode および UTF-8 文字のサポート、GPU アクセラレータによるテキスト レンダリング エンジン、カスタマイズできるテーマ、スタイル、構成が含まれます。

Windows Terminalのインストール

Microsoft Storeから入手、インストールできます。無料です。

www.microsoft.com

ショートカットキーで起動

Windowsにはデスクトップにあるショートカットにショートカットキーを設定して、起動する機能があります。WindowsXPの頃には有ったので結構昔からある、由緒正しき機能です。ショートカットキーだけでアプリを起動できるので、キーボードから手を離さずに操作をしたい人には重宝するんですよね。

Windows Terminalのショートカットを作成する

但し、通常のWindowsアプリと違って、Microsoft Storeからインストールする場合はショートカットが作られないので、そのままだとショートカットキーを設定できません。 起動するためのアプリの実体(exe)がどこにあるのか、そもそもどこにインストールされているのかがわからないからです。

でも、Windows Terminalの場合はコマンドラインから起動できるように、パスが通っています。 なので、ショートカットを作るときもコマンドラインからと同様に設定すれば、自動的にフルパスで補完されてショートカットが作成できます。 Windows Terminalは wt で起動できるので、項目の場所の欄に wt とだけ入力して「次へ」ボタンをクリックすればOKです。

f:id:kabukawa:20201205002808p:plain

これでショートカットは作成できます。ショートカットのプロパティを見ると、こんな感じでちゃんとフルパスのexe名が設定されていることが分かります。

f:id:kabukawa:20201205003220p:plain

ショートカットキーを設定する

出来上がったショートカットにショートカットキーを割り当てるには、ショートカットのプロパティにある「ショートカットキー」の欄にフォーカスを移して、設定したいショートカットキーを実際に押すと、それが認識されます。以下の例だと、キーボードで Ctrl+Alt+T を押しているので、それが認識されてショートカットキーに表示されています。

f:id:kabukawa:20201205003923p:plain

これでショートカットキーで起動できるWIndows Terminalのショートカットが作成できました。

アイコン

ただ、これだけだと、ショートカットのアイコンがWindows Terminalとは判別できないものになっているので、これをWindows Terminalのものに変えたいところです。

f:id:kabukawa:20201205003937p:plain

アイコンがどこに含まれているのかはすぐには見つけられず、ちょっと困っていたのですが、ひらめきました。 Windows Terminalはオープンソースになっているので、そこを探せばアイコンはあるのではないかと。

github.com

上記URLにアイコンなどのリソースがあります。terminal.icoWindows Terminalのアプリで使われているアイコンのようなので、これをダウンロードして使います。 アイコンをダウンロードしたら、ショートカットのプロパティで「アイコンの変更」ボタンをクリックして、ダウンロードしたアイコンを指定すればアイコンがWindows Terminalのアプリで使われているものと同じになります。

f:id:kabukawa:20201205004639p:plain

完成形

これで完成です。

f:id:kabukawa:20201205004813p:plain

ショートカットキーでWindows Terminalを起動できるようになっていればOKです。 これで少しは快適なターミナルライフが送れそうですね!

VS Code Conference Japan に参加してきました

11/21(土) は「VS Code Conference Japan」に参加しました。

オンラインでの開催なので、全国どこからでも参加可能。ありがたいことです。 量が多いので、資料とか拡張機能へのポインタだけ、纏めておきます。

f:id:kabukawa:20201122122850p:plain

vscode.connpass.com


目次


セッションの資料

タイトルと資料 講演者
オープニング
職業「戸倉彩」
【初級 / Beginners】
はじめての VS Code and Codespaces
speakerdeck.com
Nori Suzuki
【初級 / Beginners】
AI/MLエンジニアに伝えたい
令和時代のVS Code使いこなし術!
speakerdeck.com
もっちゃん / mochan_tk
【初級 / Beginners】
アプリ開発&チーム管理で役立った拡張機能など
www.slideshare.net
makky12
【初級 / Beginners】
Fortran が拓く世界、VS Code が架ける橋
www.slideshare.net
degawa
【初級 / Beginners】
Visual Studio Code 拡張機能の活用
~適切に組み合わせてマイクロサービスアプリ開発
全プロセスを一つのツールで管理してみよう!
www.slideshare.net
Shotaro Suzuki
【中級 / Intermediate】
Remote Development with Podman
speakerdeck.com
Shion Tanaka / 田中司恩
【上級 / Advanced】
最強の Dev Container を考える
docs.google.com
Atsushi Morimoto(@74th)
【LT】EmacsおじさんのVS Code挑戦記
[資料は公開されしだい追加します]
nakayoshix
【LT】VS CodeSQL クライアントになる ~ DBにVS Codeで接続する
github.com
まっぴぃ
【LT】お気に入り拡張機能について
www.slideshare.net
shiro-kujira
【LT】この日のために拡張機能を開発してみた(仮)
docs.google.com
Colloid
【LT】お勧めされたので REST Client を使ってみた
www.slideshare.net
放浪軍師
クロージング VS Code Meetup Organizer

セッション内で紹介されていた拡張機能

だいたい拾えていると思いますが、拾えてなかったらコメントなどで教えてもらえれば追加します。

marketplace.visualstudio.com この拡張機能を使用すると、開いたマークダウンドキュメントから直接reveal.jsプレゼンテーションを表示できます。

marketplace.visualstudio.com 選択した行をバナーに変換します-figletを使用してヘッダーにコメントします。 (コメントタグで自動的にラップされます!)

marketplace.visualstudio.com Visual StudioCode用のシンプルなテキスト読み上げ拡張機能

marketplace.visualstudio.com Remote-Containers拡張機能を使用すると、Dockerコンテナーをフル機能の開発環境として使用できます。

marketplace.visualstudio.com コンテナー、リモートマシン、またはWSL内の任意のフォルダーを開き、VSCodeの全機能セットを利用できるようにする拡張パック。

marketplace.visualstudio.com GitHubのプルリクエストと発行プロバイダー

marketplace.visualstudio.com Jupyterノートブックのサポート、Intellisense、デバッグなどをサポートするインタラクティブなプログラミングとコンピューティング。

marketplace.visualstudio.com GitHub Gistを使用して、設定、スニペット、テーマ、ファイルアイコン、起動、キーバインドワークスペース拡張機能を複数のマシン間で同期します。

marketplace.visualstudio.com お気に入りのツールを使って、リアルタイムの共同開発ができます。

marketplace.visualstudio.com インタラクティブマップビューでARMテンプレートをグラフィカルに表示

marketplace.visualstudio.com Swagger Viewerを使用すると、Visual Studio Codeに入力するときに、Swagger2.0ファイルとOpenAPIファイルをプレビューして検証できます。

marketplace.visualstudio.com アマゾンウェブサービスを操作するための拡張機能

marketplace.visualstudio.com ESLint JavaScriptVSCodeに統合します。

marketplace.visualstudio.com prettierを使ったコードフォーマッタ

marketplace.visualstudio.com Grammarlyを使ったVisual Studio Codeの文法チェック。

marketplace.visualstudio.com ソースコードのスペルチェッカー

marketplace.visualstudio.com Visual Studio Codeに組み込まれたGit機能をスーパーチャージ - Git注釈とコード・レンズを使ってコード・オーサリングを一目で可視化したり、Gitリポジトリをシームレスにナビゲートして探索したり、強力な比較コマンドを使って価値ある洞察を得たり、その他にも多くのことが可能です。

marketplace.visualstudio.com リポジトリのGitグラフを表示し、グラフからGitアクションを実行します。

marketplace.visualstudio.com Visual StudioCodeワークスペース内でExcelスプレッドシートCSVファイルを表示します。

marketplace.visualstudio.com この非公式の拡張機能は、Draw.ioをVSCodeに統合します。

marketplace.visualstudio.com VSCode内で16進編集を許可します

marketplace.visualstudio.com VisualStudioCode用のRESTクライアント

marketplace.visualstudio.com 構文の強調表示やエラー検出など、最新のFortran言語のサポート。

marketplace.visualstudio.com FORTRAN言語サーバーへのVSCodeインターフェース

marketplace.visualstudio.com fortranブレークポイントサポートを追加

marketplace.visualstudio.com Fortranフォーマッター

marketplace.visualstudio.com VisualStudioCodeのCMake言語サポート

marketplace.visualstudio.com SSHを使用してリモートマシン上の任意のフォルダーを開き、VSCodeの全機能セットを利用します。

marketplace.visualstudio.com ガッターとホバーで画像のプレビューを表示します。

marketplace.visualstudio.com ES6構文のJavaScriptコードスニペット

marketplace.visualstudio.com VSCode用のVueツール

marketplace.visualstudio.com Visual StudioCodeの豊富なGo言語のサポート

marketplace.visualstudio.com SpringBootアプリケーションを開発するための拡張機能のコレクション

marketplace.visualstudio.com コンテナ化されたアプリケーションの作成、管理、およびデバッグを容易にします。

marketplace.visualstudio.com Kubernetesアプリケーションを開発、デプロイ、デバッグする

marketplace.visualstudio.com vscode用のKibanaコンソールのようなElasticsearchクライアント

marketplace.visualstudio.com YAML形式でスニペットを編集する

marketplace.visualstudio.com Microsoft SQL Server、Azure SQLデータベース、SQLデータウェアハウスをどこでも開発できます

marketplace.visualstudio.com Azureでグローバルに分散されたマルチモデルデータベースを作成、参照、更新します。

marketplace.visualstudio.com どこでもPostgresを開発する

marketplace.visualstudio.com vscode用のMySQLクライアント

github.com 退勤のときに音楽を流す

Twitterのタイムラインで紹介されていた拡張機能

marketplace.visualstudio.com VSCodeのMarpMarkdownで記述されたスライドデッキを作成します。 スライドデッキライターとしてVSCodeを強化します。

marketplace.visualstudio.com Visual StudioCodeの豊富なPlantUMLサポート。

marketplace.visualstudio.com 選択したテキストをすばやくbase64エンコード/デコードします。

marketplace.visualstudio.com 選択したテキストをすばやく変換できるVisualStudioCodeの拡張機能

marketplace.visualstudio.com vscodeに移植されたMarkdownPreviewEnhanced

marketplace.visualstudio.com クロージングブラケットにブラケットヘッダーを表示します。

marketplace.visualstudio.com Excelデータをコピーし、Markdownテーブル形式に変換します

marketplace.visualstudio.com VSCode上のPrometheus'.rulesおよびPrometheus2'.rules.ymlファイルの構文のハイライトとスニペット

marketplace.visualstudio.com OracleDatabaseおよびOracleAutonomousDatabaseを使用してSQLおよびPL / SQLを開発する

marketplace.visualstudio.com SQLiteデータベースを調べてクエリします。


ツイート

ハッシュタグ #vscodejp で絞ると当日の雰囲気などもつかめるかと思います。 (そのうち公式の方が纏められるんではないかと思いますので、検索URLだけ貼っておきます)

twitter.com

当日の模様

カンファレンス開催に先立ち、プレイベントも開催されています。 こちらの動画を見てから本編を見ると、どういう想いで開催されているのかといったことも分かって二度美味しいと思います!


VS Code Meetup #7 - VSCodeConJPプレイベント

Youtube Liveでの配信で、動画も公開されています。参加できなかった方もこちらから是非! (6時間くらいありますけど)


VS Code Conference Japan

こちらはマイクロソフトVS Code Teamからのメッセージの動画です。


konichiwa VS Code Day

興味を持ったら、こちらのチャンネル登録もどうぞ!

www.youtube.com

重大発表!

f:id:kabukawa:20201122122902j:plain


まとめ

で、自爆ツイートなんですが、こんなことを呟いたので、次回の勉強会でLTすることになりました。

お時間があればぜひこちらもよろしくお願いします!

vscode.connpass.com

ありがとうございました!