【ExtendScript】Visual Studio Codeでの環境構築方法

extendscript-visual-studio-code

EDTK(ExtendScript ToolKit)の開発が終了して、今後はVisual Studio Code
のプラグインが推奨みたいなので、環境構築してみました。

引用

ExrendScriptの最新開発環境とCEPについて

Visual Studio Codeの導入+日本語化+ESTKの導入

  1. Visual Studio Codeダウンロード&インストール

  2. 左したの四角いアイコン(Extensions)を選択し、パネルを開く

  3. 日本語化にする「Japanese Language Pack for Visual Studio Code」で検索してinstall

  4. ESTKの導入「ExtendScript Debbuer 」で検索してinstall

ExtendScriptの環境設定

デバッグの環境設定

1. 作業環境場所にフォルダを作成(vscodeとか)

  1. 先に作ったフォルダをドラッグ&ドロップ

  2. サイドのデバッグボタン(丸い虫)を押してパネルを展開

  3. 歯車をクリックして、「ExtendScript Debbuer 」を選択

  4. 選択後、launch.jsonが生成されます。

  1. launch.jsonのコードを変更
"name": "Run current script",
"program": "${file}", //現在開いているファイルを対象に

デバッグの実行

  1. サンプルコードを用意(Photoshopも起動しておく)
#target photoshop
function test(){
    try {
        alert("成功!");
    } catch (e){
        alert("失敗!");
    }
}
 test();
  1. 表示>コマンドパレット

  2. 「ターゲットアプリケーションを選択」

  3. 実行対象(Photoshop)を選択

  4. 左のパネルのデバッグパネルを展開し再生ボタン

以上でPhotoshopに成功!とダイアログがでればOK

以上で、VSCodeからスクリプトを実行できるようになりました。

TypeScript関連

※この先は途中までです

パッケージのインストール

  1. 事前にNode.jsをインストール

  2. 上部メニューターミナルを開く、PowerShellで以下のコマンドを実行

# package.jsonを作成する
npm init -y

# TypeScriptをインストールする
npm install -D typescript

#型定義ファイルをインストールする
npm install -D ten-A/types-for-adobe

./node_modules/.bin/tsc --init
  1. vscode\node_modules\types-for-adobeのディレクトリに行き、使用アプリケーションフォルダの一番最下層にある「tsconfig.json」を開く
{
  "compilerOptions": {
    "target": "es3",
    "module": "commonjs",
    "strict": true,
    "noLib": true,
  },
  "exclude": ["node_modules"]
}
./node_modules/.bin/tsc sample.ts
./node_modules/.bin/tsc -w sample.ts