Zenn
🐣

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

2024/11/26に公開
HTML
Vim
tech
vimscript
browsersync
tech

はじめに

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

https://qiita.com/advent-calendar/2024/puromoku

やりたいこと

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

TL;DR

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

やり方

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

    npm install -g browser-sync

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

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

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

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

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

✅️ エイリアス設定

シェルの設定ファイル(.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

https://youtu.be/BMPH2fGqA9c

Discussion