この記事は Vim Advent Calendar 2019 — Qiita 14日目の記事です。
firenvimとは?
GitHub Repository: glacambre/firenvim: Embed Neovim in your browser.
Turn your browser into a Neovim client.
これを利用するとブラウザがNeovim clientに早変わりします。
今回はその設定手順と設定したらどうなるのか?ということを紹介します。
設定手順
init.nvim の記述
firenvim pluginのインストール
詳細は以下に記述してあります。
ここでは junegunn/vim-plug: Minimalist Vim Plugin Manager を利用した例を紹介します。
Plug 'glacambre/firenvim', { 'do': { _ -> firenvim#install(0) } }
設定
サイトごとにどの要素でfirenvimを起動するか
全てのサイト(ホスト)の textarea
にてfirenvimを起動する設定
let g:firenvim_config = {
\ 'localSettings': {
\ '.*': {
\ 'selector': 'textarea, div[role="textbox"]',
\ 'priority': 0,
\ }
\ }
\ }
github.com のみ textarea
でfirenvimが起動する設定
let g:firenvim_config = {
\ 'localSettings': {
\ '.*': {
\ 'selector': '',
\ 'priority': 0,
\ },
\ 'github\.com': {
\ 'selector': 'textarea',
\ 'priority': 1,
\ },
\ }
\ }
上記を参考に独自の設定をどんどん追加していくことももちろん可能です。
テキスト保存時にブラウザの要素と同期する
let g:dont_write = v:false
function! My_Write(timer) abort
let g:dont_write = v:false
write
endfunction
function! Delay_My_Write() abort
if g:dont_write
return
end
let g:dont_write = v:true
call timer_start(10000, 'My_Write')
endfunction
au TextChanged * ++nested call Delay_My_Write()
au TextChangedI * ++nested call Delay_My_Write()
任意: 特定サイトでfiletypeを設定する
せっかくブラウザを Neovim クライアントにすることができるなら Playground などで積極的に使いたいところです。
下の表のように filetype を設定していきます。
- The Go Playground: go
- Rust Playground: rust
- GitHub: markdown |
firenvim は $HOME/.local/share/firenvim
以下に ホスト名_*.txt
というファイルを一時的に作成し、それを扱っていきます。
そのため、下記のように記述することで、firenvimを利用しながら filetype を設定することができます。
augroup Firenvim
au BufEnter play.golang.org_*.txt set filetype=go
au BufEnter play.rust-lang.org_*.txt set filetype=rust
au BufEnter github.com_*.txt set filetype=markdown
augroup END
任意: guifontの設定
普段端末のfont設定をそのまま利用している場合、ブラウザ上でその設定が反映されません。
guifont
を設定して、お好きなfontでブラウザ上でvimりましょう。
Droid Sans Mono Slashed for Powerlines のfontを利用する例を示します。(font sizeは 14 にします)
let g:firenvim_font = 'Droid\ Sans\ Mono\ Slashed\ for\ Powerline'
function! Set_Font(font) abort
execute 'set guifont=' . a:font . ':h14'
endfunction
augroup Firenvim
au BufEnter github.com_*.txt set filetype=markdown | call Set_Font(g:firenvim_font)
au BufEnter play.rust-lang.org_*.txt set filetype=rust | call Set_Font(g:firenvim_font)
au BufEnter play.golang.org_*.txt set filetype=go |call Set_Font(g:firenvim_font)
augroup END
最終的な init.nvim
let g:firenvim_config = {
\ 'localSettings': {
\ 'github\.com': {
\ 'selector': 'textarea',
\ 'priority': 0,
\ },
\ }
\ }
let g:dont_write = v:false
function! My_Write(timer) abort
let g:dont_write = v:false
write
endfunction
function! Delay_My_Write() abort
if g:dont_write
return
end
let g:dont_write = v:true
call timer_start(10000, 'My_Write')
endfunction
let g:firenvim_font = 'Droid\ Sans\ Mono\ Slashed\ for\ Powerline'
function! Set_Font(font) abort
execute 'set guifont=' . a:font . ':h14'
endfunction
augroup Firenvim
au TextChanged * ++nested call Delay_My_Write()
au TextChangedI * ++nested call Delay_My_Write()
au BufEnter github.com_*.txt set filetype=markdown | call Set_Font(g:firenvim_font)
au BufEnter play.rust-lang.org_*.txt set filetype=rust | call Set_Font(g:firenvim_font)
au BufEnter play.golang.org_*.txt set filetype=go |call Set_Font(g:firenvim_font)
augroup END
拡張のインストール
init.nvim
に設定を加える他に、ブラウザの拡張機能をインストールする必要があります。
- Google Chrome: Firenvim — Chrome Web Store
- FireFox: Firenvim — Get this Extension for 🦊 Firefox (en-US)
デモ
The Go Playground
Rust Playground
普段の開発でLSP Clientを使っていると、ブラウザでもこのように利用できます。
GitHub
まとめ
ブラウザを Neovim クライアントにすることができる glacambre/firenvim: Embed Neovim in your browser. とその設定の仕方の例を紹介しました。