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

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

一、下载VSCODE

下载地址：https://code.visualstudio.com/

二、插件下载和配置

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 了解相关属性。 
    // 悬停以查看现有属性的描述。
    // 欲了解更多信息，请访问: 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

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