VimでHTMLをプレビューしながらコーディング

はじめに

本記事はプロもくチャット Adevent Calendar2024の7日目です

やりたいこと

VimでHTMLを編集しつつ、ブラウザにリアルタイムで反映させたい

TL;DR

Browsersyncを立ち上げればOK
以上🫡

やり方

1. Browsersyncをインストールする

npm install -g browser-sync

1. HTMLファイルを置いたプロジェクトに移動して、以下のコマンドを実行する

browser-sync start --server --files "**/*.html"

1. ブラウザがhttp://localhost:3000で立ち上がるので、
   Chromeのアドレスバーから対象となるHTMLファイルを指定
   

2. あとはVimを立ち上げて、HTMLファイルを編集すればOK

Vimはbrowser-syncとは異なるウィンドウで実行すること

実行しやすい環境を整える

✅️ エイリアス設定

シェルの設定ファイル(.bashrcなど)にbrowser-syncのエイリアスを設定

.bashrc

# browser-sync
alias bs='browser-sync start --server --no-open --files "**/*"'

ターミナル上でbs<Enter>と入力すればbrowser-syncが立ち上がる

# エイリアスでbrowser-syncを実行
bs
> [Browsersync] Access URLs:
>  -----------------------------------
>        Local: http://localhost:3000
>     External: http://10.0.214.4:3000
>  -----------------------------------
>           UI: http://localhost:3001
>  UI External: http://10.0.214.4:3001
>  -----------------------------------
> [Browsersync] Serving files from: ./
> [Browsersync] Watching files...

✅️ Vimからブラウザを開く

現在のファイルパスを指定してブラウザを開く関数を.vimrcに追加する

.vimrc

" Gitリポジトリのルートディレクトリからの相対パスをローカルホストのURLに変換してChromeで開く
function! OpenLiveServer()
  let l:relative_path = substitute(system('git rev-parse --show-toplevel'), '\n', '', 'g') . '/'
  let l:current_file = expand('%:p')
  let l:url = 'http://localhost:3000/' . substitute(l:current_file, l:relative_path, '', '')
  execute '!open -a "Google Chrome" ' . shellescape(l:url)
endfunction

command! OpenLiveServer call OpenLiveServer()

Vimで対象のファイルを開いた状態で:OpenLiveServerと入力すれば
ローカルホスト経由のファイルをChromeで開くことができる

:OpenLiveServer

Browsersync用の相対パスを生成するため
ファイルはGit管理されていることを前提としています🙏