使用Tilix分屏编辑HTML并实时预览：1. 安装Tilix并配置分屏快捷键；2. 垂直分屏后左屏编辑代码，右屏启动服务；3. 用vim或nano编写HTML并保存；4. 右屏运行python3 -m http.server 8000或live-server预览；5. 浏览器访问localhost:8000查看效果，结合live-server实现保存即刷新。
如果您希望在Linux系统中同时编辑HTML代码并实时查看其渲染效果，使用Tilix终端进行分屏操作可以极大提升效率。通过将终端划分为多个区域，您可以在一侧编写代码，另一侧启动本地服务器或直接调用浏览器预览页面。
本文运行环境：Dell XPS 13，Ubuntu 22.04
一、安装并配置Tilix终端
Tilix是一个功能强大的平铺式终端模拟器，支持会话保存与分屏布局，适合多任务并行处理。安装后可通过快捷键快速分割窗口。
1、打开默认终端，执行命令 sudo apt update && sudo apt install tilix 安装Tilix。
立即学习“前端免费学习笔记（深入）”；
2、在应用程序菜单中启动Tilix，或在终端输入 tilix 命令打开。
3、设置快捷键以方便后续分屏操作，推荐自定义分割快捷键为 Ctrl+Shift+E（垂直）和 Ctrl+Shift+D（水平）。
二、使用Tilix进行终端分屏
通过垂直或水平分屏，您可以将终端划分为两个独立区域，一个用于代码编辑，另一个用于运行本地服务或刷新浏览器预览。
1、启动Tilix后，按下 Ctrl+Shift+E 进行垂直分屏，右侧区域可用于启动Web服务器。
2、在左侧终端中进入HTML项目目录，使用命令 cd /path/to/your/html/project 切换路径。
3、在右侧终端同样切换至相同目录，准备运行Python简易服务器或其他静态文件服务。
三、编辑HTML文件并实时保存
选择一款轻量级的文本编辑器（如Nano或Vim），可以直接在终端内编辑HTML文件，保存后立即触发浏览器刷新。
1、在左侧分屏中输入 vim index.html 或 nano index.html 打开文件进行编辑。
2、编写HTML结构内容，例如添加标题与段落标签，并按编辑器指令保存更改。
3、每次修改完成后务必保存文件，以便下一环节能够加载最新版本。
四、启动本地HTTP服务预览效果
由于现代浏览器对本地文件的跨域限制，直接打开HTML文件可能无法正确加载资源，因此建议使用内置HTTP服务器。
1、在右侧分屏终端中执行 python3 -m http.server 8000 启动一个简单的HTTP服务。
2、服务启动后，打开系统默认浏览器并访问地址 http://localhost:8000 查看当前HTML页面渲染结果。
3、刷新浏览器即可看到最新修改后的效果，实现“编码-保存-查看”的快速循环。
五、结合浏览器自动刷新工具提升效率
为了免去手动刷新浏览器的操作，可引入轻量级开发工具监听文件变化并自动触发页面重载。
1、确保已安装Node.js环境，然后全局安装 live-server 工具：运行命令 npm install -g live-server。
2、在右侧终端关闭原有Python服务后，输入 live-server –port=8000 启动具备热更新功能的服务。
3、此后每次保存HTML文件，浏览器都会自动刷新，显著加快开发调试节奏。
以上就是Linux用tilix终端分屏同时写HTML和看效果的详细内容，更多请关注创想鸟其它相关文章！
版权声明：本文内容由互联网用户自发贡献，该文观点仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。
如发现本站有涉嫌抄袭侵权/违法违规的内容， 请发送邮件至 chuangxiangniao@163.com 举报，一经查实，本站将立刻删除。
发布者：程序猿，转转请注明出处：https://www.chuangxiangniao.com/p/1596352.html
微信扫一扫 
支付宝扫一扫 
