簡単にvscodeでp5jsの入力補完をする方法

はじめてプログラミングをしてみた人でも設定できるp5jsの入力補完の方法です。マイクロソフトが無料で開発しているvscode(=Visual Studio Code)エディターを使うとp5jsの補完が簡単にできます。

tsファイルをダウンロード

以下のリンクから、p5.d.tsファイルとp5.global-mode.d.tsファイルをダウンロードして、プロジェクトのフォルダーに配置します。

https://github.com/LujunWeng/demos-p5js/tree/master/typings/p5js

tsファイルをダウンロードしたところ

コメント行を書く

sketch.jsのはじめの行に上記のコメントを書きます。あとは、createなどを書くと入力補完ができるようになります。

入力補完ができた!

vscodeの入力補完は優秀で、引数の値を入力すると、その細かい内容まで以下のように表示してくれます。

技術的な話

tsファイルはTypeScriptの型定義ファイルで通常TypeScriptで使われますが、TypeScriptはJavaScriptのスーパーセットなので、.jsファイルも混在可能です。そのためふぃあるのコメント行で型定義ファイルを指定すると補完が可能になります。このファイルの英語を日本語に直せば単純に変更できます。github上でTypeScriptの補完に関しても議論されているようです。現状、npm の@typesでこの型定義ファイルがダウンロードできないので、今後p5.js団体が管理してくれるとありがたいです。

まとめ

すべて手入力は面倒なので、簡単に補完する方法をまとめました。単純にファイルをダウンロードして、コメント行を追加するだけなので、プログラマーでない人でも簡単に導入できると思います。

 

コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です

CAPTCHA