VSCodeでのスクリプト開発環境を整える

ワークスペースを作成する

VSCodeで「ワークスペース」を作成しておく。必須ではないが、あったほうが便利。

例えばAfterEffects用、Photoshop用、GoogleAppsScript用とかで別々のワークスペースを作成しとく。ワークスペース毎に設定を変えたり、ルートフォルダ（基準のフォルダ）を設定したりできる。

これから、自動補完できるようにAfterEffects用の型定義を設定していくが、それって、PhotoshopやGASのスクリプト開発中には不必要、むしろ邪魔になってしまう。作りたいものに適した設定をそれぞれに適用できるようにワークスペースを作っておいたほうがよい。正直説明出来るほど理解してないが、多分そういう理由。

ちなみに、ワークスペースの設定ファイルには開いているタブ情報も含まれるので、AEスクリプトを作っていて、GASのワークスペースに切り替えたとき、前回GASの作業をしていたときに開いていた状態が復元される。そこからAEのワークスペース戻したときも然り。

・初めてVSCode入れた人

初めてインストールした人なら多分「ようこそ」画面が出てくると思うが、そこの「ワークスペースフォルダーを追加」からAfterEffects用のワークスペースを作成しちゃお！今後、スクリプトを作成していく時にいつもここで作業する、っていう場所を決めてしまう。

フォルダ選択ダイアログが出るので選択する。左側のエクスプローラタブの中にフォルダが読み込まれた状態になる。しかしまだワークスペース自体は保存されていない。[ファイル] > [名前を付けてワークスペースを保存] で保存する。

・既にVSCode入れてた人

ワークスペース設定してたらそれでいいし、してなかった場合は、[ファイル] > [名前を付けてワークスペースを保存] で保存する。

ワークスペースに型定義用のフォルダを作成しておく

後で入手する型定義のファイルを入れるためのフォルダを用意しておく。普通にWindowsのエクスプローラから作ってもいいし、右図のようにVSCodeのエクスプローラーからでもいい。別に無くても大丈夫だけれど、固めて置いてるほうが整理しやすいでしょ。

フォルダの名前はなんでも。動画に従って「types」でもいいし「型定義ファイル」でもいいし。

ちょっとこれ自信ないけど、VSCodeはワークスペース内のファイルを全部見て、型定義のファイル（*.d.ts）ファイルを読み込んでる？ファイル名やフォルダの場所変えても動作したのでそう思っている。真実は知らない。教えてほしい。

型定義ファイルを入手する

以下の場所から型定義ファイルをダウンロードする。

GitHub - pravdomil/Types-for-Adobe: TypeScript types for Adobe: AfterEffects, Animate, Audition, Illustrator, InDesign, Photoshop, Premiere, ScriptUI.

これは公式じゃなくて、pravdomilさん（？）が自分で作って配布してくれているもの。公式のは無い。

「pravdomil！天才だぜ！ありがたや～🙏」の気持ちを忘れずに使わせてもらう。右の画像を参照して、ZIPでダウンロードする。

2018までしか更新されていないので、最新のものが必要な場合は自作するか、神に期待する。

まぁ最新バージョンで追加された機能以外は反応するはずなのでさほど問題ない。

jsconfig.jsonファイルを作成する

ワークスペースのルート（直下）にjsconfig.jsonというファイルを作成する。VSCodeでjavascriptを書く時に使用される設定ファイル。言語毎に設定ファイルがある。javascript用のconfig（設定）ファイルなのでjsconfigということ。詳細は公式のレファレンスを参照してほしい。

jsconfig.json Reference - VSCode公式のjsconfig.jsonのリファレンスページ

jsconfig.jsonの中身を書けばいろいろ設定でき、る、けど、まだよくわからん。

Visual Studio Code for Adobe ExtendScript - Code and Motion

のError Reportingの項でも「これコピペすればいいよ～」て書いてあるんだけど、各項目の意味がいまいちわからん。

でもいろいろ試してたら、jsconfig.jsonというファイルが存在さえすれば、中身が空っぽでもいいみたい？違ってたらごめんなさい。

設定項目もはっきり理解できてないけど、作りたいのはウェブページで使うjavascriptじゃなくて、Adobeソフト上で動かすものなので、なんか別にいいのかな～と思って逃げる。

VSCodeの新しいファイルを作成するアイコンをクリックして、ファイル名を「jsconfig.json」とすればよい。もしワークスペース内のフォルダやファイルを選択しているとそのフォルダ内に作成されてしまうので注意。