VS CodeでProcessingを快適に書く環境構築
![VS Codeのウィンドウの右下のスクリーンショット。[Processing]と書かれたボタンにマウスホバーしており、[言語モードの選択]というツールチップが表示されている](/_next/image/?url=%2Fapi%2Fmedia%2Ffile%2Fvs-code-select-language-mode-processing.png&w=640&q=75)
VS Code向けにProcessingの公式拡張機能がリリースされたので、その使い方を紹介します。ちなみに、Zed向けには筆者が公開した非公式の拡張機能を利用できます。

非公式の拡張機能との違い
Processingは以前から言語サーバープロトコル(Language Server Protocol:LSP)をサポートしており、非公式のVS Code拡張機能を使うことでコード補完やエラーの確認、シンタックスハイライトができました。
しかし、作成したスケッチをVS Codeから実行するにはターミナルでコマンドを実行する必要があり、手間がかかりました。
Processingの公式拡張機能では、非公式の拡張機能で使えたコード補完やエラーの確認、シンタックスハイライトに加えて、ボタンをクリックするだけでスケッチを実行できるようになっています。
Processingの公式拡張機能の使い方
1. 準備
ProcessingのVS Code拡張機能にはProcessing 4.4.6以降が必要なので、インストールしてあることを確認してください。
インストール後、少なくとも1回は起動する必要があります。
また、公式の拡張機能との干渉を防ぐため、非公式の拡張機能をアンインストールするか無効化しておきます。
2. 公式拡張機能のインストール
公式の拡張機能をインストールします
3. 拡張子の紐付けを修正(必要な場合)
以前に非公式の拡張機能をインストールしていた場合は、.pde拡張子を公式の拡張機能に紐付け直す必要があります。
VS Codeの右下に表示されている[Processing]という部分をクリックし、['.pde'に対するファイルの関連付けの構成...]を選択して、[Processing]を選びます。
![VS Codeのウィンドウの右下のスクリーンショット。[Processing]と書かれたボタンにマウスホバーしており、[言語モードの選択]というツールチップが表示されている](/_next/image/?url=%2Fapi%2Fmedia%2Ffile%2Fvs-code-select-language-mode-processing.png&w=640&q=75)
まとめ
VS CodeでProcessing公式の拡張機能を利用する方法を紹介しました。
Processing公式の拡張機能は、従来の非公式の拡張機能と違いスケッチをワンクリックで実行できるようになっています。
少なくとも一度はProcessing 4.4.6以降を起動している必要があることと、非公式の拡張機能をインストールしていた場合は拡張子の紐付けを修正する必要があることに注意してください。
記事をシェア
フォローして最新情報を入手
Googleの優先ソースに追加すると、このサイトの記事をGoogleで見つけやすくなります。また、ぜひXやRSSフィードもフォローしてください。
-1.png&w=1080&q=75)
生まれた時から、母国語よりも先にJavaScriptを使っていました。ネットの海のどこにもいなくてどこにでもいます。
Webフロントエンドプログラマーとして、TypeScriptを用いたWebアプリやブラウザー拡張機能を制作。Xのシャドウバン検知ツール「Shadowban Scanner」やリンクカード復活ツール「Restore Link Card」を公開し、国内外のメディアで紹介されました。iGEM 2023ではJapan-UnitedチームのWikiを制作してGrand Prizeの獲得に貢献。ブログではXやSNSの最新ニュース、不具合の検証と対処法、フロントエンド開発の知見を発信しています。







![Discordの[プロフィールのプライバシー]設定のスクリーンショット](/_next/image/?url=%2Fapi%2Fmedia%2Ffile%2Fdiscord-profile-privacy-settings.png&w=3840&q=75)
![スマートフォンのホーム画面の[Social]フォルダーを表示した写真。フォルダー内にはFacebook、Instagram、Threads、X、LinkedIn、TikTok、YouTubeのアイコンが配置されている](/_next/image/?url=%2Fapi%2Fmedia%2Ffile%2Ffacebook-instagram-threads-x-twitter-linkedin-tiktok-youtube-mobile-app-unsplash.jpg&w=3840&q=75)



![画面中央に[Codex]というテキストが配置されており、その下に[Sign in with ChatGPT]というボタンが表示されている画像](/_next/image/?url=%2Fapi%2Fmedia%2Ffile%2Fcodex-sign-in-with-chatgpt.png&w=1920&q=75)