Edited at

【Docker】コンテナ内でneovimを使ってIDEみたいな気分で開発したい【見た目IDE】

More than 1 year has passed since last update.



対象者

Dockerコンテナ内でvimでIDEみたいに開発したいという人


まとめ


  • Dockerでcentos6.9入れる

  • centos6.9にneovim入れる

  • neovimのプラグインNERDTreeを入れる

  • 最後にDockerfileを置いてありますので上記3つの話はわかってて速攻環境つくりたい人はDockerfileの章に飛んじゃってください

コンテナ内で開発するときも見た目はIDEはそっくり!

見た目以外の機能面の話は次回以降の記事で書こうと思っています。


自身の環境

項目
内容

OS
macOS Sierra

OS version
10.12.4

docker
Docker version 17.03.1-ce, build c6d412e

docker pullするOS
CentOS:6.9


まずはcentOSをpull

$ docker pull centos:6.9

これでcentOS6.9のイメージを入手できます。

次に

$ docker run -it --name test centos:6.9

とするとtestという名前のコンテナが立ち上がり、

[root@7ed0424bd284 /]#

みたいな感じになってるかと思います!

ここで試しにviでphpのファイルを作ってみましょう!

[root@7ed0424bd284 /]# cd

[root@7ed0424bd284 ~]# mkdir qiita_php
[root@7ed0424bd284 ~]# vi test.php


test.php

<?php

// greetingという名前をつけた関数
function greeting($name) {
$message = 'Hello, '. $name. '!'; // 処理

return $message; // 結果を返す
}

$message = greeting('Tom');
echo $message; // 'Hello, Tom!'


【PHP】関数というqiita記事からphpのプログラムをコピペいたしました。


IDEとの見た目の差


IDE(PhpStorm)

ローカルのmacでPhpStormでtest.phpを作って開いてみます。

スクリーンショット 2017-06-26 23.18.28.png

左にファイルエクスプローラがあって、下にはターミナルがあるって感じ。

コードにも色がついてて見やすいですね!


vi

スクリーンショット 2017-06-26 23.24.56.png

......

さすがにviはせこすぎました


neovim

centOS6にneovimいれるのちょっと大変です

[root@7ed0424bd284 ~]# cd /

[root@7ed0424bd284 /]# yum -y install libtool autoconf automake cmake gcc gcc-c++ make pkgconfig unzip
[root@7ed0424bd284 /]# yum -y install git
[root@7ed0424bd284 /]# git clone https://github.com/neovim/neovim
[root@7ed0424bd284 /]# cd neovim/
[root@7ed0424bd284 /]# make
[root@7ed0424bd284 /]# make install

makeのところがけっこう長かったです。

neovimがはいったところでtest.phpを開いてみましょう!

[root@7ed0424bd284 /]# nvim ~/qiita_test/test.php

スクリーンショット 2017-06-26 23.49.28.png

色的には随分良くなりました!(あたりまえ)


neovimの環境整備

まずは init.vimというvimでいうところの.vimrcにあたるファイルを編集します。

[root@7ed0424bd284 /]# mkdir -p ~/.config/nvim

[root@7ed0424bd284 /]# nvim ~/.config/nvim/init.vim


~/.config/nvim/init.vim

" プラグインが実際にインストールされるディレクトリ

let s:dein_dir = expand('~/.cache/dein')
" dein.vim 本体
let s:dein_repo_dir = s:dein_dir . '/repos/github.com/Shougo/dein.vim'

" dein.vim がなければ github から落としてくる
if &runtimepath !~# '/dein.vim'
if !isdirectory(s:dein_repo_dir)
execute '!git clone https://github.com/Shougo/dein.vim' s:dein_repo_dir
endif
execute 'set runtimepath^=' . fnamemodify(s:dein_repo_dir, ':p')
endif

" 設定開始
if dein#load_state(s:dein_dir)
call dein#begin(s:dein_dir)

" プラグインリストを収めた TOML ファイル
" 予め TOML ファイル(後述)を用意しておく
let g:rc_dir = expand("~/.config/nvim")
let s:toml = g:rc_dir . '/dein.toml'
let s:lazy_toml = g:rc_dir . '/dein_lazy.toml'
" TOML を読み込み、キャッシュしておく
call dein#load_toml(s:toml, {'lazy': 0})
call dein#load_toml(s:lazy_toml, {'lazy': 1})
" 設定終了
call dein#end()
call dein#save_state()
endif

" もし、未インストールものものがあったらインストール
if dein#check_install()
call dein#install()
endif


次にプラグインを管理するファイルであるdein.tomlを作成します

[root@7ed0424bd284 /]# nvim ~/.config/nvim/dein.toml

ちなみにこの段階でdein.vimのインストールが始まるはずです。インストールが終わったらファイル編集画面になります。


~/.config/nvim/dein.toml

[[plugins]]

repo = 'scrooloose/nerdtree'
hook_add = '''
autocmd StdinReadPre * let s:std_in=1
autocmd VimEnter * if argc() == 0 && !exists("s:std_in") | NERDTree | endif
map <C-n> :NERDTreeToggle<CR>
'''

NERDTreeというプラグインを導入します。

このプラグインをいれるとneovimの画面左側にファイルエクスプローラが出現します!

hood_add以降の文は ファイル名を指定せずにneovimを起動するとファイルエクスプローラが開き、ファイル名を指定してneovimを起動するとファイルエクスプローラを開かないという設定を書いています。

また、ファイルエクスプローラが開いていない状態でも Ctl + nを押すとファイルエクスプローラを開くということも書かれています。


見た目勝負 第2戦

qiita_phpフォルダに移動して、neovimを起動します!

[root@7ed0424bd284 /]# cd ~/qiita_php

[root@7ed0424bd284 qiita_php]# nvim

スクリーンショット 2017-06-27 0.16.46.png

左側にファイルエクスプローラが出現しました!!

そこから十字キーでtest.phpにカーソルをあわせEnter!!

スクリーンショット 2017-06-27 0.18.06.png

だ、だいぶ近い

あとはIDEで下にでていたターミナルですね。


  1. test.phpにカーソルが置かれている状態のときに、
    :split と入力

  2. 画面が分割され、下の画面にもtest.phpが表示

  3. Ctl-w + j で下の画面に移動

  4. :terminalと入力 (これがneovimじゃないとできない)(vimShellとかいれたらvimでも可能)

スクリーンショット 2017-06-27 0.21.31.png

見た目は完全に追いつきました!!

ついでに分割された画面を移動するコマンドまとめておきます。

コマンド
移動先

Ctl-w + k
上画面

Ctl-w + j
下画面

Ctl-w + l
右画面

Ctl-w + h
左画面

エクスプローラが邪魔なときはCtl+nで消えて、欲しい時はCtl+nをもっかい押すとでてくるはずですので試してみてください。


neovimの環境設定をもっとやる

neovimをインストールしてプラグイン管理をdein.tomlでやってみた という自身の記事でdeopleteというさいっきょ補完プラグインなどをインストールしているdein.tomlなどがあるのでよろしかったらどうぞ。


Dockerfile

はじめから書けよ!!!!  っていうのは無しでお願いします。

githubにリポジトリを公開しました。

$ git clone https://github.com/ryo2851/neovim_ide.git

$ docker build -t test neovim_ide/.
$ docker run -it --name sample test

neovimをmakeする時間がかなりかかりますが、これで生成されるsampleコンテナではnvimが使え、NERDTreeも導入された状態になっています。

次回は機能面でもIDEに追いついて行く記事を書きます。


参考


neovimをインストールしてプラグイン管理をdein.tomlでやってみた

【Python環境整備】脱NeoBundle。超便利補完プラグインjedi-vimの環境をdeinで整えて快適になる設定までやる

Vimメモ : Neovimをインストールしてみる