Linux用tilix终端分屏同时写HTML和看效果

使用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文件，保存后立即触发浏览器刷新。

火龙果写作

用火龙果，轻松写作，通过校对、改写、扩展等功能实现高质量内容生产。

106

查看详情

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和看效果的详细内容，更多请关注php中文网其它相关文章！