fastTinker：支持多语言的桌面级快速原型开发工具
你是否曾因需要测试JavaScript片段、PHP脚本和TypeScript代码而在不同工具间频繁切换？我深有同感，正是这种挫败感促使我构建了fastTinker——一个统一的桌面编程环境，让你可以在一个优雅的Electron应用中无缝切换多种编程语言。
问题背景
作为开发者，我们经常需要：
- 无需搭建完整项目即可快速测试代码片段
- 在同一工作流中试验不同语言
- 快速原型设计而无需项目脚手架的开销
- 通过即时反馈学习新语言
大多数现有工具要么是语言特定的，要么需要浏览器，这对于测试后端代码或使用语言特定的包管理器并不理想。我想要一个结合桌面应用程序功能和在线编程环境灵活性的工具。
fastTinker介绍
fastTinker是一个基于Electron的桌面应用程序，为多种编程语言提供统一的编码环境。目前支持JavaScript/TypeScript和PHP，其架构设计便于未来轻松添加更多语言。
核心功能
🚀 多语言支持
通过简单的下拉选择器在JavaScript/TypeScript和PHP之间切换。每种语言都有：
- 语法高亮
- 包管理器（JS/TS使用NPM，PHP使用Composer）
- 运行时环境
- 默认代码片段
📦 语言特定包管理
无需在终端或工具间切换。直接从应用安装包：
JavaScript/TypeScript：
1
2
3
4
|
// 通过设置 > NPM包安装
const axios = require('axios');
const data = await axios.get('https://api.example.com/data');
console.log(data);
|
PHP：
1
2
3
4
|
<?php
// 通过设置 > Composer包安装
require_once 'vendor/autoload.php';
// 使用你安装的包
|
🎨 Monaco编辑器集成
由运行VS Code的相同编辑器提供支持，你获得：
- 完整的IntelliSense和自动补全
- 语法高亮
- 错误检测
- 代码格式化
- 多标签页支持
✨ 魔法注释
在编码时内联检查变量值：
1
2
|
const data = { name: "fastTinker", version: "1.0.0" };
const count = 42; // $data, $count
|
当你运行代码时，值会内联显示在输出中，使调试和探索更加容易。
⚡ 自动运行模式
启用自动运行可在输入时执行代码（带防抖）。非常适合：
💾 代码片段管理
按语言保存和组织代码片段。每个片段自动标记正确的文件扩展名并按语言组织。
架构与技术实现
fastTinker使用Electron构建，采用模块化架构，使添加新语言变得简单直接。
项目结构
1
2
3
4
5
6
7
8
9
|
fastTinker/
├── src/
│ ├── main.js # Electron主进程，支持多语言执行
│ └── preload.js # 安全IPC的预加载脚本
├── scripts/
│ └── renderer.js # 渲染器进程（带语言切换的UI逻辑）
├── styles/
│ └── main.css # 应用程序样式
└── index.html # 带语言选择器的主HTML文件
|
语言路由
fastTinker的核心是其语言感知执行系统。IPC处理程序根据所选语言路由执行：
1
2
3
4
5
6
7
|
ipcMain.handle('execute-code', async (event, code, userDataPath, magicComments = [], language) => {
if (language === 'php') {
return executePHPCode(code, userDataPath, magicComments);
} else { // 默认为javascript/typescript
return executeJSCode(code, userDataPath, magicComments);
}
});
|
添加新语言
该架构设计为可扩展。要添加新语言，你需要：
- 在src/main.js中更新LANGUAGES配置：
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
|
const LANGUAGES = {
javascript: {
id: 'javascript',
name: 'JavaScript/TypeScript',
defaultExtension: '.js',
monacoLanguage: 'javascript',
packageManager: 'npm',
extensions: ['.js', '.ts']
},
php: {
id: 'php',
name: 'PHP',
defaultExtension: '.php',
monacoLanguage: 'php',
packageManager: 'composer',
extensions: ['.php']
},
// 在此添加你的语言
python: {
id: 'python',
name: 'Python',
defaultExtension: '.py',
monacoLanguage: 'python',
packageManager: 'pip',
extensions: ['.py']
}
};
|
- 在src/main.js中实现执行处理程序
- 在index.html中添加语言选择器
- 在scripts/renderer.js中更新默认内容
快速开始
安装
1
2
3
4
5
6
7
8
9
|
# 克隆仓库
git clone https://github.com/boadusamuel/fastTinker.git
cd fastTinker
# 安装依赖
npm install
# 开发模式运行
npm start
|
构建分发版本
1
2
3
4
5
6
7
|
# 为你的平台构建
npm run build
# 输出将在dist/目录中
# - Linux: .AppImage和.deb
# - Windows: .exe和便携版
# - macOS: .dmg和.zip
|
使用示例
JavaScript/TypeScript示例
1
2
3
4
5
6
7
8
9
10
11
12
13
|
// 欢迎使用fastTinker！
// 这是一个JavaScript/TypeScript编程环境
console.log('Hello, World!');
// 尝试使用魔法注释内联查看值：
const x = 42; // $x
const y = [1, 2, 3]; // $y
// 你可以访问Node.js和浏览器API
console.log('Node.js版本:', process.version);
// 从终端安装NPM包或使用require()尝试加载它们
|
PHP示例
1
2
3
4
5
6
7
8
9
10
11
12
|
<?php
// 欢迎使用fastTinker！
// 这是一个PHP编程环境
echo "Hello, World!\n";
// 尝试使用魔法注释内联查看值：
$x = 42; // $x
$y = [1, 2, 3]; // $y
// PHP版本信息
echo "PHP version: " . PHP_VERSION . "\n";
|
为什么构建这个工具
我从两个独立项目开始：
- jsTinker - 用于JavaScript/TypeScript
- phpTinker - 用于PHP
两者各自都很出色，但我发现自己经常在它们之间切换。我没有维护两个独立的代码库，而是决定将它们合并成一个统一的工具，该工具可以通过清晰、可扩展的架构处理多种语言。
路线图
贡献
欢迎贡献！无论你想要：
- 🐛 报告错误
- 💡 建议功能
- 🔧 添加对新语言的支持
- 📝 改进文档
欢迎在GitHub上提出问题或提交拉取请求。
技术栈
- Electron - 桌面应用程序框架
- Monaco Editor - VS Code的编辑器组件
- Node.js - JavaScript/TypeScript执行的运行时
- PHP CLI - PHP执行的运行时
- NPM & Composer - 包管理
结论
fastTinker填补了语言特定编程环境和完整IDE之间的空白。它非常适合快速原型设计、学习新语言以及实验代码，而无需项目设置的开销。
如果你是一个使用多种语言的开发者，或者只是想要一种更好的方式来测试代码片段，请尝试fastTinker。我很乐意听取你的反馈，并看到你用它所构建的内容。
GitHub仓库：boadusamuel/fastTinker