用于 After Effects 开发的 Visual Studio Code

用于 After Effects 开发的 Visual Studio Code

Visual Studio Code (VS Code) 是一个功能强大的现代代码编辑器，可以配置为用于 After Effects 脚本、表达式和 CEP 插件的出色开发环境。

为什么使用 VS Code 进行 AE 开发？

与传统的 Adobe 工具相比，VS Code 具有多个优势：

• 现代界面: 干净、可自定义的界面和主题
• 强大的扩展: 丰富的扩展生态系统以增强功能
• Git 集成: 内置的 Git 版本控制
• IntelliSense: 高级的代码补全和错误检测
• 多语言支持: 在一个编辑器中支持 JavaScript, TypeScript, HTML, CSS
• 性能: 即使处理大型项目也快速响应
• 跨平台: 可在 Windows, macOS 和 Linux 上运行

安装和基本设置

下载和安装

1. 下载 VS Code: 访问 code.visualstudio.com
2. 安装: 运行适用于您操作系统的安装程序
3. 启动: 打开 VS Code 并熟悉界面

AE 开发必备扩展

核心扩展

// After Effects 开发推荐的扩展
{
  "recommendations": [
    "adobe.extendscript-debug",
    "hennamann.jsx",
    "ms-vscode.vscode-typescript-next",
    "bradlc.vscode-tailwindcss",
    "formulahendry.auto-rename-tag",
    "christian-kohler.path-intellisense",
    "ms-vscode.vscode-json"
  ]
}

1. ExtendScript 调试器

扩展 ID: adobe.extendscript-debug

• 直接在 VS Code 中调试 ExtendScript
• 设置断点并检查变量
• 连接到正在运行的 Adobe 应用程序

2. JSX 语言支持

扩展 ID: hennamann.jsx

• JSX/ExtendScript 文件的语法高亮
• 更好的代码格式化和结构
• 改进的错误检测

3. TypeScript 支持

扩展 ID: ms-vscode.vscode-typescript-next

• 增强的 JavaScript/TypeScript 支持
• 更好的现代开发 IntelliSense
• 类型检查和错误检测

项目结构设置

推荐的文件夹结构

ae-project/
├── .vscode/
│   ├── settings.json
│   ├── launch.json
│   └── extensions.json
├── scripts/
│   ├── automation/
│   ├── utilities/
│   └── panels/
├── expressions/
│   ├── animation/
│   ├── utilities/
│   └── examples/
├── cep-plugins/
│   ├── my-plugin/
│   │   ├── CSXS/
│   │   ├── js/
│   │   ├── css/
│   │   └── index.html
├── docs/
├── tests/
└── README.md

VS Code 配置文件

.vscode/settings.json

{
  "files.associations": {
    "*.jsx": "javascript",
    "*.jsxinc": "javascript"
  },
  "javascript.suggest.autoImports": false,
  "typescript.suggest.autoImports": false,
  "editor.tabSize": 4,
  "editor.insertSpaces": true,
  "editor.detectIndentation": false,
  "editor.formatOnSave": true,
  "editor.codeActionsOnSave": {
    "source.fixAll": true
  },
  "files.exclude": {
    "**/.DS_Store": true,
    "**/node_modules": true,
    "**/*.log": true
  },
  "search.exclude": {
    "**/node_modules": true,
    "**/bower_components": true
  }
}

.vscode/launch.json (用于 ExtendScript 调试)

{
  "version": "0.2.0",
  "configurations": [
    {
      "type": "extendscript-debug",
      "request": "launch",
      "name": "在 After Effects 中调试",
      "program": "${file}",
      "stopOnEntry": false,
      "hostAppSpecifier": "aftereffects"
    },
    {
      "type": "extendscript-debug",
      "request": "attach",
      "name": "附加到 After Effects",
      "hostAppSpecifier": "aftereffects"
    }
  ]
}

.vscode/extensions.json

{
  "recommendations": [
    "adobe.extendscript-debug",
    "hennamann.jsx",
    "ms-vscode.vscode-typescript-next",
    "bradlc.vscode-tailwindcss",
    "formulahendry.auto-rename-tag",
    "christian-kohler.path-intellisense"
  ]
}

ExtendScript 开发工作流程

设置 ExtendScript 调试

1. 安装 ExtendScript 调试器扩展

2. 在 After Effects 中启用调试:

   • 编辑 > 首选项 > 脚本和表达式
   • 勾选“允许脚本写入文件和访问网络”
   • 勾选“启用 JavaScript 调试器”

3. 创建调试配置 (如上所示的 launch.json)

在 VS Code 中编写 ExtendScript

基本脚本模板

/**
 * After Effects 脚本模板
 * 描述: 此脚本功能的简要描述
 * 作者: 您的姓名
 * 版本: 1.0.0
 */

(function() {
    'use strict';

    // 脚本配置
    var CONFIG = {
        scriptName: '我的 AE 脚本',
        version: '1.0.0',
        debug: true
    };

    /**
     * 主要脚本执行
     */
    function main() {
        try {
            // 检查 After Effects 是否可用
            if (typeof app === 'undefined') {
                throw new Error('After Effects 不可用');
            }

            // 检查是否有活动的合成
            var comp = app.project.activeItem;
            if (!comp || !(comp instanceof CompItem)) {
                throw new Error('请选择一个活动的合成');
            }

            // 您的脚本逻辑在此处
            log('脚本成功启动');

            // 示例：创建一个固态层
            var solidLayer = comp.layers.addSolid(
                [Math.random(), Math.random(), Math.random()],
                'VS Code 生成的固态层',
                comp.width / 4,
                comp.height / 4,
                comp.duration
            );

            log('已创建图层: ' + solidLayer.name);

        } catch (error) {
            handleError(error);
        }
    }

    /**
     * 日志函数
     * @param {string} message - 要记录的消息
     */
    function log(message) {
        if (CONFIG.debug) {
            $.writeln('[' + CONFIG.scriptName + '] ' + message);
        }
    }

    /**
     * 错误处理函数
     * @param {Error} error - 错误对象
     */
    function handleError(error) {
        var errorMessage = '在 ' + CONFIG.scriptName + ' 中发生错误: ' + error.toString();
        log(errorMessage);
        alert(errorMessage);
    }

    // 执行主函数
    main();
})();

调试 ExtendScript

1. 设置断点: 在行号旁边单击
2. 开始调试: 按 F5 或使用 调试 > 开始调试
3. 单步执行代码: 使用 F10 (跳过), F11 (进入), Shift+F11 (跳出)
4. 检查变量: 将鼠标悬停在变量上或使用变量面板

CEP 插件开发

CEP 项目设置

用于 CEP 开发的 package.json

{
  "name": "my-ae-plugin",
  "version": "1.0.0",
  "description": "我的 After Effects CEP 插件",
  "main": "index.html",
  "scripts": {
    "build": "webpack --mode production",
    "dev": "webpack --mode development --watch",
    "serve": "live-server --port=8080"
  },
  "devDependencies": {
    "webpack": "^5.0.0",
    "webpack-cli": "^4.0.0",
    "live-server": "^1.2.1",
    "css-loader": "^6.0.0",
    "style-loader": "^3.0.0"
  }
}

使用 TypeScript 进行现代 CEP 开发

types/aftereffects.d.ts

declare var app: Application;
declare var $: any;

interface Application {
    project: Project;
    version: string;
    newProject(): Project;
}

interface Project {
    activeItem: CompItem | null;
    numItems: number;
    items: ItemCollection;
}

interface CompItem {
    name: string;
    width: number;
    height: number;
    duration: number;
    layers: LayerCollection;
}

// 根据需要添加更多类型定义

src/main.ts

import { CSInterface } from './lib/CSInterface';

class AEPlugin {
    private csInterface: CSInterface;

    constructor() {
        this.csInterface = new CSInterface();
        this.init();
    }

    private init(): void {
        this.setupEventListeners();
        this.loadTheme();
    }

    private setupEventListeners(): void {
        document.getElementById('createLayer')?.addEventListener('click', () => {
            this.createLayer();
        });
    }

    private createLayer(): void {
        const script = `
            (function() {
                var comp = app.project.activeItem;
                if (comp && comp instanceof CompItem) {
                    var layer = comp.layers.addSolid([1, 0, 0], '红色固态层', 100, 100, 1);
                    return layer.name;
                }
                return '没有活动的合成';
            })()
        `;

        this.csInterface.evalScript(script, (result: string) => {
            console.log('图层创建结果:', result);
        });
    }

    private loadTheme(): void {
        const skinInfo = this.csInterface.getHostEnvironment();
        // 根据 After Effects 主题应用主题
    }
}

// DOM 加载后初始化插件
document.addEventListener('DOMContentLoaded', () => {
    new AEPlugin();
});

高级 VS Code 功能

代码片段

为常见的 AE 操作创建自定义片段：

.vscode/ae-snippets.code-snippets

{
  "AE 脚本模板": {
    "scope": "javascript",
    "prefix": "aescript",
    "body": [
      "(function() {",
      "    'use strict';",
      "    ",
      "    function main() {",
      "        try {",
      "            var comp = app.project.activeItem;",
      "            if (!comp || !(comp instanceof CompItem)) {",
      "                alert('请选择一个合成');",
      "                return;",
      "            }",
      "            ",
      "            $0",
      "            ",
      "        } catch (error) {",
      "            alert('错误: ' + error.toString());",
      "        }",
      "    }",
      "    ",
      "    main();",
      "})();"
    ],
    "description": "基本的 After Effects 脚本模板"
  },
  "创建固态层": {
    "scope": "javascript",
    "prefix": "aesolid",
    "body": [
      "var solidLayer = comp.layers.addSolid(",
      "    [${1:1}, ${2:0}, ${3:0}], // 颜色 (RGB)",
      "    '${4:固态层}', // 名称",
      "    ${5:comp.width}, // 宽度",
      "    ${6:comp.height}, // 高度",
      "    ${7:comp.duration} // 持续时间",
      ");"
    ],
    "description": "在 After Effects 中创建一个固态层"
  }
}

任务和构建自动化

.vscode/tasks.json

{
  "version": "2.0.0",
  "tasks": [
    {
      "label": "复制脚本到 AE",
      "type": "shell",
      "command": "cp",
      "args": [
        "${file}",
        "/Applications/Adobe After Effects 2023/Scripts/"
      ],
      "group": "build",
      "presentation": {
        "echo": true,
        "reveal": "silent",
        "focus": false,
        "panel": "shared"
      },
      "problemMatcher": []
    },
    {
      "label": "构建 CEP 插件",
      "type": "npm",
      "script": "build",
      "group": "build",
      "presentation": {
        "echo": true,
        "reveal": "always",
        "focus": false,
        "panel": "shared"
      }
    }
  ]
}

Git 集成

用于 AE 项目的 .gitignore

# OS 生成的文件
.DS_Store
.DS_Store?
._*
.Spotlight-V100
.Trashes
ehthumbs.db
Thumbs.db

# Node.js
node_modules/
npm-debug.log*
yarn-debug.log*
yarn-error.log*

# 构建输出
dist/
build/
*.zxp

# IDE 文件
.vscode/settings.json
.idea/
*.swp
*.swo

# 日志
*.log
logs/

# 临时文件
tmp/
temp/
*.tmp

# After Effects 特定
*.aep.bak
*.aet
*.aepx.bak

生产力提示

键盘快捷键

• Ctrl/Cmd + Shift + P: 命令面板
• Ctrl/Cmd + P: 快速打开文件
• Ctrl/Cmd + `: 切换终端
• F5: 开始调试
• Ctrl/Cmd + Shift + F: 在文件中搜索
• Alt + 单击: 多光标编辑

多光标编辑

// 选择一个单词的多个实例并同时编辑
// 对于在文件中重命名变量很有用
var layerName = '我的图层';
var layerColor = [1, 0, 0];
var layerWidth = 100;
// Alt + 单击以放置多个光标

代码格式化

安装 Prettier 扩展以实现自动代码格式化：

.vscode/settings.json

{
  "editor.defaultFormatter": "esbenp.prettier-vscode",
  "editor.formatOnSave": true,
  "prettier.tabWidth": 4,
  "prettier.singleQuote": true
}

故障排除

常见问题

ExtendScript 调试器不工作

1. 确保在 After Effects 中启用了调试
2. 检查是否安装了 ExtendScript 调试器扩展
3. 验证 launch.json 配置
4. 重启 VS Code 和 After Effects

ExtendScript 的 IntelliSense 不工作

1. 安装 JSX 语言支持扩展
2. 在 settings.json 中配置文件关联
3. 为 After Effects 对象添加类型定义

CEP 插件未加载

1. 检查 manifest.xml 语法
2. 验证清单中的文件路径
3. 启用 CEP 调试模式
4. 检查浏览器控制台中的错误

🔗 相关资源

• ExtendScript 工具包 - Adobe 官方 IDE
• 脚本开发指南 - ExtendScript 编程
• 插件开发 - CEP 插件创建
• VS Code 文档 - 官方 VS Code 文档

下一步

1. 安装和配置: 设置 VS Code 及推荐的扩展
2. 创建第一个项目: 从一个简单的脚本或插件开始
3. 学习调试: 练习使用调试器调试 ExtendScript
4. 探索扩展: 寻找适合您工作流程的其他扩展
5. 加入社区: 与其他使用 VS Code 进行 AE 开发的开发者联系

VS Code 为 After Effects 开发提供了一个现代、强大的开发环境。通过正确的配置和扩展，与传统的 Adobe 开发工具相比，它可以显著提高您的生产力和代码质量。