跳到主要内容

在vim中练习html

一个 Debian 下最轻量、高亮、可实时预览的 Vim 练习环境 方案。

安装 Vim 与语法高亮支持​

bash
sudo apt update
sudo apt install vim
# 可选增强版 neovim
sudo apt install neovim

在 Vim 中启用语法高亮：

vim
:syntax on
:set number      " 显示行号
:set autoindent  " 自动缩进
:set tabstop=2   " Tab 为 2 空格

HTML/CSS/JS 高亮​

  • Vim 自带大部分 HTML/CSS/JS 高亮

  • 如果需要更漂亮或最新的高亮：

bash
mkdir -p ~/.vim/pack/plugins/start
cd ~/.vim/pack/plugins/start
git clone https://github.com/preservim/nerdtree.git       # 文件树
git clone https://github.com/othree/html5.vim.git        # HTML5 高亮
git clone https://github.com/pangloss/vim-javascript.git # JS 高亮

在 ~/.vimrc 添加：

vim
syntax on
filetype plugin indent on
set number
set autoindent
set tabstop=2

实时预览 HTML​

  • 方法 1：使用 Python 内置 HTTP 服务器
bash
cd ~/html-project
python3 -m http.server 8000

浏览器访问：http://localhost: 8000/，保存 Vim 文件即可刷新查看

  • 方法 2：使用 LiveReload / BrowserSync
bash
sudo npm install -g browser-sync
browser-sync start --server --files "*.html, *.css, *.js"
  • 保存文件浏览器自动刷新

Vim 小技巧​

  • 编辑 HTML/CSS/JS：
bash
vim index.html
vim style.css
vim script.js
  • 快速切换文件：
vim
:split style.css
:vsplit script.js
  • 代码折叠：
vim
:set foldmethod=syntax

小结​

  • Vim + HTML5/JS 插件 → 高亮

  • Python HTTP / BrowserSync → 实时预览

  • 文件结构：

text
~/html-project/
├── index.html
├── style.css
└── script.js
最后于 更新