engine/docs/zh/script/edit.md

order, title, type, label

order	title	type	label
3	编辑脚本	脚本	Script

Galacean Editor 提供了一个功能强大的代码编辑器，提供了代码提示，第三方包引入，引擎事件调试，脚本参数调试，项目实时预览等多种能力，可帮助你快速编辑和调试代码。

序号	区域	说明
1	文件列表	查看项目中的所有脚本文件
2	代码编辑区	编辑脚本文件，支持代码高亮，代码提示，代码格式化等功能
3	预览区	预览当前脚本的运行效果。保存代码后会实时刷新此区域的渲染状态
4	包依赖管理区	添加需要依赖的 NPM 三方包，比如 tween.js
5	事件调试区	代码编辑器会自动检索所有绑定到引擎中的事件并显示在这里，你可以在这里触发事件，也可以配置事件的参数
5	控制台	查看代码运行时的日志信息

想要了解更多关于代码编辑器的信息，请查看代码编辑器。

代码编辑

在场景编辑器中创建脚本资产后，双击该脚本即可打开代码编辑器。Galacean 中的脚本需使用 Typescript 语言编写，同时新脚本默认基于内置模板创建。另外，Galacean 的代码编辑器基于 Monaco，快捷键与 VSCode 类似。修改脚本后，按 Ctrl/⌘ + S 保存，右侧实时预览区展现最新场景效果。

提示：Galacean 代码编辑器目前支持 .ts .gs 和 .glsl 的文件编辑

文件预览

1. 文件搜索 可快速搜索项目中的文件
2. 代码筛选 文件树是否仅显示代码文件 ( .ts .gs .glsl )
3. 内置文件 用来显示哪些文件是不可编辑的内部文件
4. 展开/隐藏 可切换文件夹的展开或隐藏
5. 代码文件 可编辑的代码文件会显示对应的文件类型的缩略图标

引入第三方包

代码编辑器内置了与项目相对应的引擎，可自动提供引擎 API 的智能提示，从而帮助你快速实现基于引擎的逻辑。但大多数情况下你都需要引入 Galacean 生态包或其他第三方包来增强功能。

1. 搜索框 在搜索框输入包名，按下 回车键，即可快速拉取包的版本列表
2. 版本选择 默认情况下使用 latest 版本
3. 导入按钮 选择好包名和版本，点击导入按钮即可将三方包的类型信息加载到工作区
4. 包列表 此处会列出当前项目依赖的所有第三方包
5. 版本切换 此处可切换已导入的包的版本，切换后会将新的类型信息加载到工作区

试一下：在搜索框输入 @galacean/engine-toolkit，点击「引入」按钮，然后在代码中使用 import { OrbitControl } from '@galacean/engine-toolkit 来引入自由相机组件。

实时预览区

Galacean 的代码编辑器提供实时预览功能。保存代码后，预览区会自动更新，从而让你快速查看代码的执行结果。

1. 拖动按钮 按住来拖动模拟器。将模拟器拖到屏幕右边缘，即可将其固定在右侧面板上。
2. 统计信息切换 点击来切换场景统计信息的显示状态
3. 新窗口打开 在新窗口中来打开项目预览页面
4. 脚本参数编辑 如果当前场景中激活的脚本，拥有可配置的参数，即可打开此面板来实时调整脚本参数。想要了解脚本参数的详细信息，请查看 脚本系统
5. 关闭按钮 点击来关闭模拟器。关闭后，屏幕右上方提供一个显示按钮，点击即可重新打开模拟器

事件调试

在代码编辑器中，我们提供了一个事件调试面板，从而帮助你快速调试场景中的事件。

1. 事件列表 Galacean Editor 会自动收集场景中的所有事件名并显示在这里
2. 事件参数配置 你可以点击此按钮来配置触发事件时所携带的参数，参数的配置使用 JSON 格式编写
3. 事件触发按钮 点击此按钮会触发场景中的对应事件

注意，脚本组件一定要绑定到某个实体上，才会展示事件列表。