# 代码编辑器

[代码编辑器](https://sso.shoplazza.com/login)是 Shoplazza 管理后台中的一个页面，让商家可以查看和编辑其 theme 的代码。

**提示**

如果您需要对 theme 代码进行大量修改，建议使用本地 IDE（如 Visual Studio Code）。在本地编辑 theme 时，您可以使用 [Shoplazza CLI](/zh-CN/docs/theme/developer-tools/shoplazza-cli/) 等工具来简化开发流程。

![](https://cnres.appracle.com/2d54ffa8612502596a67ef2566bfef9b.png)

## 访问代码编辑器

1.  在 Shoplazza 管理后台，前往**在线商店** > **主题**。
2.  找到您要编辑的 theme，然后点击 **...** > **编辑代码**。

## 导航代码编辑器

代码编辑器左侧显示 theme 文件目录，右侧是查看和编辑文件的区域。点击左侧目录中的文件，即可在代码编辑器中打开该文件。您可以同时打开并编辑多个文件。

您也可以使用搜索栏查找特定文件。在\*\*搜索文件...\*\*输入框中输入关键字，即可筛选 theme 文件列表。

![代码编辑器：搜索文件演示](https://cdn.shoplazza.com/119459d01d7e21fb6a810dfa34a5e6d5.gif)

## 添加 theme 文件

您可以打开相应文件夹，点击**添加新的 {文件类型}** 来添加 theme 文件。根据您创建的文件类型，会弹出包含不同选项的对话框。

![代码编辑器：添加 theme 文件演示](https://cdn.shoplazza.com/8ff4092a37b913986db48720729d1e74.gif)

## 更新 theme 文件

您更新的任何文件都会在**保存**按钮上显示高亮提示，帮助您追踪已修改的位置。

**提示**

您可以使用 `cmd + S` 键盘快捷键保存文件中的更改。

![保存按钮高亮显示](https://cnres.appracle.com/cef1733cf5ebdc9778b3fff47f8b7e95.png)

## 文件操作

如需复制、重命名或删除文件，请选中目标文件，然后点击相应操作按钮。

![代码编辑器：复制、重命名或删除文件](https://cnres.appracle.com/e2703eaa83b2f0956651996adf54e54f.png)

## 高亮显示

在代码编辑器中选中某个词语后，文件中所有相同的词语也会自动高亮显示。这有助于您识别文件中可能需要修改的位置。

![选中代码高亮演示](https://cdn.shoplazza.com/3046481e7c3a92f364cefc23107c742e.gif)

## 搜索与替换

您可以使用 `cmd + F` 键盘快捷键搜索已打开文件中的文本，并对文件中的文本进行替换。

![](https://cnres.appracle.com/750b5a8da320e27c5a1bb8e55e1e4589.png)

## 版本控制

代码编辑器支持 theme 文件的版本控制。如果您在点击**保存**后想要撤销对某个文件的修改，请打开该文件并点击**当前版本**。下拉菜单会显示您每次保存的日期和时间。

选择您想要恢复的版本，然后点击**保存**。

![版本控制演示](https://cnres.appracle.com/0b3be6310620ea85d8ed8d904562bb45.png)

## 格式化 theme 代码

代码编辑器支持按需格式化代码，适用于以下扩展名的所有文件：`liquid`、`json`、`js`、`css`。

**备注**

此功能在代码编辑器中适用于所有用户上传的 theme，包括通过管理界面或 CLI 上传的 theme。

![格式化 theme 代码](https://cdn.shoplazza.com/f29b815d1ef765075447de83af6bce7e.gif)