Progate VSCode Extension Hackathon

Transcript

1. VSCode Extension Hackathon !! 2日間でVSCodeを最強カスタマイズしよう！
2. 下準備 開発のために必要なものをインストールしよう Step: 0
3. VSCode Extension 開発するために必要なものを入れる • VSCode ◦ https://code.visualstudio.com/download からインストールしてください • Node.js ◦ JavaScript の実行環境 ◦ brew install node でインストールできます 参考 ◦ node -v が実行できればOK • NPM ◦ JavaScript のパッケージマネージャ ◦ nodeをインストールした際に同時に入ってきます ◦ npm -v が実行できればOK • Yeoman ◦ プロジェクトテンプレート作成ツール ◦ npm install -g yo でインストールできます ◦ yo --version が実行できればOK • Generator-Code ◦ VSCode Extensionの雛形 ◦ npm install -g generator-code でインストールできます 実際に必要なのは VSCode, Node.js, Generator-Code ですが、これらのインストールのために npm や Yo を入れています
4. まずは動かす 開発の流れを知ろう！ Step: 1
5. テンプレートからプロジェクトを作成 • 対話的にプロジェクトの設定を行う ◦ mkdir ~/progate-2days-event && cd ~/progate-2days-event ◦ yo code progate-cli-extension ← progate-cli-extensionの部分は変えてもOK ▪ ? What type of extension do you want to create? New Extension (TypeScript) ▪ What's the name of your extension? → (progate-cli-extension) となってるので Enter ▪ ? What's the identifier of your extension? → (progate-cli-extension) となってるので Enter ▪ ? What's the description of your extension? → progate cli extension ▪ ? Initialize a git repository? Yes ▪ bundlerは好きなもので良いが、今は unbundled で構わない ▪ package manager には npm を選択 ◦ progate-cli-extension ディレクトリが作成されていれば OK ◦ code ./progate-cli-extension でディレクトリを開くと開発用extensionのインストールをお勧めされる 入れると便利なので入れておこう！
6. デバッグモードで実行する • VSCode は、開発中の extension を実際に導入して動作確認できます • 「実行とデバッグ」 → Run Extension の横の▷を押すだけで extension が導入さ れたウィンドウが新規に立ち上がります • まずは実行してみましょう a. コマンドパレットを開きます (⌘+Shift+p, Ctrl+Shift+p) b. >hello と入力します（> はすでに入力されているかも） c. Hello World がみつかるので、Enterを押すとhello worldコマンドを実行できます 1. 実行とデバッグを選択 2. Run Extension の▶をクリック
7. プロジェクトの中身（ 1） package.json https://code.visualstudio.com/api/references/extension-manifest に全ての詳細が書いてあるので、参考にしてください VSCode 上で VSCode の拡張を開発することはかなり支援されています。package.json 上でカーソルを当てると詳しい説明が出ます どのバージョンのVSCodeで動作を保証するか 何のイベントが発生したら、このextensionをアクティベートするか https://code.visualstudio.com/api/references/activation-events 例えば、Pythonの構文を解析するextensionは、Pythonファイルが開かれるまではア クティベートされる必要がない VSCodeのどの部分にextensionを出していくか https://code.visualstudio.com/api/references/contribution-points commands はVSCodeのコマンドパレットに表示されるようになる extension のエントリーポイント TypeScriptの場合、JavaScriptにトランスパイルされた後のコードを指定するため、 拡張子は .ts ではなく .js になり、ディレクトリも out/ に変わる
8. プロジェクトの中身（ 1） package.json https://code.visualstudio.com/api/references/extension-manifest に全ての詳細が書いてあるので、参考にしてください VSCode 上で VSCode の拡張を開発することはかなり支援されています。package.json 上でカーソルを当てると詳しい説明が出ます 1.90.0 以上 2 未満のVSCodeで動作することを期待している 何も指定されていないので、アクティベートされないように見える... 実際は、VSCode 1.74.0 から、”contributes”: {“commands”} が設定されていると 自動で onCommand であると認識するようになった コマンドパレットにHello Worldというタイトルで、progate-cli-extension.helloWorldと いうIDのコマンドを表示する progate-cli-extension.helloWorldコマンド自体はTypeScriptの方で定義する extensionを実行するためには、main.ts をトランスパイルする必要があるように見え るが、Run Extension を押した際に自動でやってくれる
9. プロジェクトの中身（ 2） extension.ts https://code.visualstudio.com/api/references/extension-manifest に全ての詳細が書いてあるので、参考にしてください package.json に記述された activationEvent が発生すると activate が呼ばれる package.json に記述された contributions.commands と対応する部分 contributions.commands にはコマンドのIDとタイトルのみを記載したが、 ここではコマンドIDと、その実装の紐付けを行っている 拡張が deactivate されたときに、コマンドが破棄されるようになります VSCode が用意してくれているAPIを呼び出してメッセージを表示している https://code.visualstudio.com/api/references/vscode-api 根気よく英語を読もう！！！！
10. 問題: コードを変更して動作を確かめてみましょう • Hello World を実行した際に出されるメッセージを「 Hello Progate」に 変えてみましょう • コマンドIDを progate-cli-extension.helloWorld から progate-cli-extension.helloProgate に変えて動作確認してみましょう ◦ どの部分を変更すれば、 IDの変更ができるでしょうか
11. Progate Submit コマンド の実装 実際に開発してみよう Step: 2
12. このステップでやりたいこと • progate submit をコマンドパレットから実行したい ◦ スクショの「Hello World」の代わりに、「progate submit」みたいなやつを出したい ◦ これを実行すると、いま開いているディレクトリで progate submit を実行するイメージ
13. Progate Submit UI Extension の仕様を決める • progate submit をコマンドパレットから実行する ◦ progate submit を実行すると、シェルが立ち上がり progate-cli の progate submit が 呼び出される • progate submit を特定の状況からしか実行できなくする ◦ progate submit は .progate ディレクトリが存在しない状況ではエラーになる ◦ .progate が存在している時だけ、コマンドパレットに progate submit を表示したい • progate submit をショートカットキー経由で呼び出す ◦ ただし、.progate が存在しない時は、ショートカットも無効になる 他にも「こんなのあったらいいな！」があれば盛り込んでみよう！
14. Progate Submit UI Extension の仕様を決める • progate submit をコマンドパレットから実行する ◦ progate submit を実行すると、シェルが立ち上がり progate-cli の progate submit が 呼び出される • progate submit を特定の状況からしか実行できなくする ◦ progate submit は .progate ディレクトリが存在しない状況ではエラーになる ◦ .progate が存在している時だけ、コマンドパレットに progate submit を表示したい • progate submit をショートカットキー経由で呼び出す ◦ ただし、.progate が存在しない時は、ショートカットも無効になる 他にも「こんなのあったらいいな！」があれば盛り込んでみよう！ 一度に色々作らず まず動くのに必要な部分だけ作ろう！
15. Progate Submit をコマンドパレットから実行する 以下についてはもう知っている • コマンドをコマンドパレットから呼び出す方法 • コマンドにTypeScriptの関数を登録する方法 新しく知る必要があるのは以下の通り • TypeScriptの関数の中でシェルコマンドを実行する方法 • 実行とデバッグで立ち上がる新規ウィンドウを、 Pathの問題が入っているディレクトリに設定する 方法 やり方は複数あるので、これが正解というものはないです！
16. Progate Submit を特定の状況からしか実行できなくする 必要なのは以下の事柄 • コマンドを特定の状況でのみ実行可能にする方法の調査 • .progate ディレクトリが存在する時、という条件を指定する方法の調査 • 実際にデバッグで条件が満たされているか確認する方法 どこから調べればいいかわからない！という時は • ドキュメントのメニューからそれっぽい場所を探してみる • ChatGPT に質問してみて、良さげな単語を拾って ドキュメントで 再検索する LLMは非常に優秀なツールだけど、まだまだ古い情報やハルシネーションが多い。最終的には公式ドキュメントを確認する癖を必ずつけよう！
17. ハッカソンタイム ドキュメントを見ながら好きなものを開発しよう Step: 3
18. 作りたいものを決める • 手元で好きな言語で機能を作成し、 shell経由でVSCode Extensionから それらを呼び出すことができる → 理論上どんな機能でも作成できる（配布の難易度は上がる） • こんなのあったら便利だなぁ、テンション上がるなぁ ... というもので OK 例えば... • 変更結果から、 commit messageやPRの名前を自動で決めてくれる機能 • .progate/task.textproto を読み取ってテストを自動で行う機能 • 30分おきに「休憩したら？」とサジェストしてくれる機能
19. 公開しよう 自分の作ったものを全世界公開！最初のハードルは高いけど乗り越えると見えるものがある！ Step: 4
20. 公開の手順 • https://code.visualstudio.com/api/working-with-extensions/publishing-extens ion に丁寧な説明があります • npm install -g @vscode/vsce • Azure DevOpsでPersonal Access Tokenを事前に発行する必要があります ◦ GitHub AccountさえあればMicrosoftに連携できるので大丈夫です ◦ OrganizationとPublisherを作成する必要があります ◦ https://qiita.com/yusu79/items/44520c4c67864b0bb3e9 に詳しいです • vscode package をするとパッケージにでき、 vsce publish で公開できます