Extension編)VSCodeTweetこんにちは、前回、前々回に引き続き、VSCodeの拡張機能開発についてまとめました。シンタックスハイライト、コードスニペットに続き、今回はJavaScriptでの拡張機能開発編です!今まではノンプログラミングで実装してきましたが、今回からはJavaScriptで実際にロジックを実装するところまで検証しました。新規プロジェクトを作成します。(JavaScript)」を選択します。JavaScript,TypeScriptが選択できますが、今回は筆者の都合上、JavaScriptで開発します。()作成する拡張機能の名前を入力します。今回は「truefly-ex」と入力してみます。truefly-ex拡張機能の識別子を決めます。デフォルトだと名前を識別子にしてくれるので、そのままEnterで進めます。extension?拡張機能の説明を入力します。今回は空欄で、そのままEnterで進めます。(y/N)yを選択します。(Y/n)Gitリポジトリを作成するか問われます。作っておいて損はないので「y」と入力してみます。yarnパッケージ管理ツールを選択します。今回はnpmを選択します。以上、「truefly-ex」というディレクトリが作成され、中に拡張機能の雛形が作成されたので確認してみます。必要なパッケージのインストールされています。VSCodeで新規ウインドウを開き、作成されたフォルダを開いてみます。以下のように雛形となるファイル群が作成されていれば準備完了です!コマンド実行する拡張機能package.jsonを見てみましょう。雛形で作ったプロジェクトでは拡張機能コマンドが定義されているのがわかります。World"というコマンドですね。実際のロジックは、extension.jsに記載されています。デフォルトで作成されたファイルの、コメント部分だけ抜粋しました。deactivate}activate()、deactivate()が、拡張機能がアクティブ、非アクティブ化されたときに呼び出される関数です。vscode.commands.registerCommand()でコマンドを登録しています。この状態でデバッグ実行してみましょう。Worldを実行します。画面右下にメッセージが出れば成功です。truefly-ex!');の箇所が無事実行されました。有効化している間常に機能する拡張機能package.jsonでアクティブイベントを設定しています。ここを"*"に書き換えると、拡張機能が有効になった時に処理が走ります。合わせてextension.jsも編集してみます。今度はここで、SQLファイルに対して保管機能を実装しようと思います。deactivate}再度デバッグ実行して、拡張子が.sqlのファイルを開いてみます。以下の通り、拡張機能が有効化されている状態で、保管機能が動くのがわかります。vscode.CompletionItemKind.Fieldで設定しています。これをベースにextension.jsを編集すれば、構文チェッカだったり、フォーマッタだったりを実装することができそうです。まとめ以上、今回はVSCodeの拡張機能をextension.jsで作る方法についてご紹介しました。過去の記事のシンタックスハイライト、コードスニペットと違い、こちらでは実際にプログラムでVSCodeのAPIを実行して、より柔軟な処理を実装できます。今後は、BigQuerySQL専用の構文チェック、フォーマッタを作ったりと、自分のプロジェクトの環境に合わせた拡張機能を自作していきたいと思います。webpackでWebアプリケーション...2022-03-09TypeScriptはじめました皆さん、JavaScriptはお好きですか?僕は苦手です。はてなブログPro都内でGCP、Python使ったデータエンジニアやってます。クラウドでの設計~開発・運用まで全部やります。20代文系エンジニアです。GCP、Python中心に、データエンジニアとして学んでいる技術をご紹介する記事を書いています。BigQueryとAirflowとバイクと鳥が好き。アイコンはたまたまお魚を加えていたときのカワセミさん。引用をストックしましたストック一覧を見る閉じる引用するにはまずログインしてくださいログイン閉じる引用をストックできませんでした。再度お試しください閉じる限定公開記事のため引用できません。