VSCODE中开发AE脚本环境搭建流程(Visual Studio Code for Adobe ExtendScript)
一、下载VSCODE
下载地址:https://code.visualstudio.com/
二、插件下载和配置
-
Adobe Script Runner
这个需要配置下运行程序,设定好你的AE可执行程序路径,如下图:
image-20210521120818728
-
ExtendScript
-
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();
编写好代码后,你有两种方法来运行成。
-
ctrl + shift + p 打开命令提示符,键入adobe,然后选择After Effects
image-20210521154446399
-
快捷键ctrl+r
现在在ae软件中就能看到运行的结果了,表示开发环境配置成功
image-20210521154623511
5.Debugging
务必确保安装了ExtendScript Debugger 扩展,
1.设置或者新建launch.json,注意"program"设置你要调试文件的路径。
{
// 使用 IntelliSense 了解相关属性。
// 悬停以查看现有属性的描述。
// 欲了解更多信息,请访问: https://go.microsoft.com/fwlink/?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
左侧显示调试信息,右侧单步调试。到此所有配置就完成了。