diff --git a/docs/use/6.vscode.md b/docs/use/6.vscode.md index 8cdf107..4304b6f 100644 --- a/docs/use/6.vscode.md +++ b/docs/use/6.vscode.md @@ -11,14 +11,14 @@ ScriptCat 提供了 VSCode 扩展,让你可以在 VSCode 中编写用户脚本 你需要安装以下两个工具: 1. **浏览器安装 ScriptCat 扩展** — 如果还没有安装,请参考 [快速开始](/docs/use/) 进行安装 -2. **VSCode 安装 ScriptCat 扩展** — 在 VSCode 扩展商店搜索「ScriptCat」,或前往 [GitHub 仓库](https://github.com/scriptscat/scriptcat-vscode) 下载安装 +2. **VSCode 安装 ScriptCat 扩展** — 在 VSCode 扩展商店搜索「[scriptcat-vscode](https://marketplace.visualstudio.com/items?itemName=CodFrm.scriptcat-vscode)」,或前往 [GitHub 仓库](https://github.com/scriptscat/scriptcat-vscode) 下载安装 ## 建立连接 安装完成后,需要让浏览器中的 ScriptCat 与 VSCode 建立连接: 1. 点击浏览器中的 ScriptCat 图标,打开管理面板 -2. 进入 **工具 > 开发调试** +2. 进入 **工具 > 开发工具** 3. 找到 **自动连接 VSCode 服务**,启用并点击 **连接** 连接成功后,VSCode 和 ScriptCat 之间就建立了实时通道。 @@ -56,7 +56,7 @@ ScriptCat 提供了 VSCode 扩展,让你可以在 VSCode 中编写用户脚本 - 确认浏览器中的 ScriptCat 扩展已启动 - 确认 VSCode 中的 ScriptCat 扩展已安装并启用 -- 检查 ScriptCat 管理面板中「开发调试」页面的连接状态 +- 检查 ScriptCat 管理面板中「开发工具」页面的连接状态 ### 保存后脚本没有更新? diff --git a/i18n/en/docusaurus-plugin-content-docs/current/use/6.vscode.md b/i18n/en/docusaurus-plugin-content-docs/current/use/6.vscode.md new file mode 100644 index 0000000..08885c6 --- /dev/null +++ b/i18n/en/docusaurus-plugin-content-docs/current/use/6.vscode.md @@ -0,0 +1,69 @@ +--- +title: Develop Scripts with the VSCode Extension +--- + +# Develop Scripts with VSCode + +ScriptCat provides a VSCode extension that lets you write user scripts in VSCode. After saving, changes are automatically synced to ScriptCat in the browser — no manual copy-pasting required, greatly improving development efficiency. + +## Prerequisites + +You need to install the following two tools: + +1. **Install the ScriptCat extension in your browser** — If you haven't installed it yet, follow the [Quick Start](/docs/use/) guide to install it +2. **Install the ScriptCat extension in VSCode** — Search for "[scriptcat-vscode](https://marketplace.visualstudio.com/items?itemName=CodFrm.scriptcat-vscode)" in the VSCode Extensions marketplace, or download it from the [GitHub repository](https://github.com/scriptscat/scriptcat-vscode) + +## Establish a Connection + +Once installed, you need to connect the ScriptCat extension in your browser with VSCode: + +1. Click the ScriptCat icon in your browser to open the management panel +2. Go to **Tools > Developer Tools** +3. Find **Auto-connect to VSCode service**, enable it, and click **Connect** + +Once connected, a real-time channel is established between VSCode and ScriptCat. + +## Sync Scripts + +After the connection is established, you can choose one of two ways to sync scripts: + +### Option 1: Auto-detect Mode (Recommended) + +1. In VSCode, press `Ctrl + Shift + P` (`Cmd + Shift + P` on Mac) to open the command palette +2. Type and select `scriptcat.autoTarget` +3. From then on, every time you open or save a `.user.js` file, it will be automatically synced to ScriptCat + +### Option 2: Specified Script Mode + +1. In VSCode, press `Ctrl + Shift + P` (`Cmd + Shift + P` on Mac) to open the command palette +2. Type and select `scriptcat.target` +3. Specify the path of the script file to sync + +## Development Workflow + +Once set up, the development workflow is very simple: + +1. Write or edit your `.user.js` script in VSCode +2. Press `Ctrl + S` to save the file +3. The script is automatically synced to ScriptCat in the browser +4. Switch to the browser and refresh the page to see the result + +The entire process requires no manual steps — saving takes effect immediately. + +## FAQ + +### What if it won't connect? + +- Make sure the ScriptCat extension in your browser is running +- Make sure the ScriptCat extension in VSCode is installed and enabled +- Check the connection status on the "Developer Tools" page in the ScriptCat management panel + +### The script isn't updated after saving? + +- Make sure the file name ends with `.user.js` +- Make sure you have run the `scriptcat.autoTarget` or `scriptcat.target` command +- Check the VSCode output panel for any error messages + +### Do I need to reconnect after restarting VSCode? + +If "Auto-connect to VSCode service" is enabled, VSCode will automatically reconnect after a restart — no manual steps required.