VSCODE中开发AE脚本环境搭建流程（Visual Studio Code for Adobe ExtendScript）

脚本环境搭建流程（Visual Studio Code for Adobe ExtendScript）"/>

VSCODE中开发AE脚本环境搭建流程（Visual Studio Code for Adobe ExtendScript）

VSCODE中开发AE脚本环境搭建流程（Visual Studio Code for Adobe ExtendScript）

一、下载VSCODE

下载地址：/

二、插件下载和配置

1. Adobe Script Runner

   这个需要配置下运行程序，设定好你的AE可执行程序路径，如下图：

   image-20210521120818728

2. ExtendScript

3. ExtendScript Debugger

另外两个插件默认安装即可。

三、开发流程

1.Create a Workspace

image-20210521152411302

2.Type Definitions

在工作区新建一个文件夹Types，导入以下文件到Types文件中。这样IntelliSense就可以工作了

image-20210521152622976

3.Error Reporting 的配置

通常 JavaScript 文件没有错误报告，但是你可以使用一个配置文件来启用它。为了解决这个问题，在工作区的主文件夹中创建一个‘ jsconfig.json’文件。然后将这些设置添加到文件中:

{"compilerOptions": {"module": "none","target": "ES3","noLib": true,"checkJs": true}
}

4.Demo运行测试

完成以上所有配置后，就可以运行测试程序了。我们写一个demo来验证下，写入下面的代码，然后保存为PopupWindows.jsx

//only for test 
// DIALOG
var dialog = new Window("dialog"); dialog.text = "Dialog"; dialog.orientation = "column"; dialog.alignChildren = ["center","top"]; dialog.spacing = 10; dialog.margins = 16; var button1 = dialog.add("button", undefined, undefined, {name: "button1"}); button1.text = "Button"; 
dialog.show();

编写好代码后，你有两种方法来运行成。

1. ctrl + shift + p 打开命令提示符，键入adobe，然后选择After Effects

image-20210521154446399

1. 快捷键ctrl+r

现在在ae软件中就能看到运行的结果了，表示开发环境配置成功

image-20210521154623511

5.Debugging

务必确保安装了ExtendScript Debugger 扩展，

1.设置或者新建launch.json，注意"program"设置你要调试文件的路径。

{// 使用 IntelliSense 了解相关属性。 // 悬停以查看现有属性的描述。// 欲了解更多信息，请访问: /?linkid=830387"version": "0.2.0","configurations": [{"type": "extendscript-debug","request": "launch","name": "Popup Debug","program": "${workspaceFolder}/MyScripts/PopupWindows.jsx","stopOnEntry": false}]
}

2.允许在任何文件中设置断点

image-20210521155644414

3.重启vscode

4.调试

• 设置断点

• 选择目标程序

• 开始调试

  image-20210521160032928

  image-20210521160335033

  左侧显示调试信息，右侧单步调试。到此所有配置就完成了。