【UserLAnd】UbuntuでVim環境構築

# はじめに
家にPCがないのでスマホ（Android）で開発環境を構築しようと考えました。

# 動作環境
* Sony Xperia 10 IV
* Android OS 12
* UserLAnd 3.1.4
* Ubuntu 20.04.5 LTS
* Node.js 18.13.0
* Yarn 1.22.19
* Vim 8.1.3741

# 行数の表示
* number
Vimの左側に行数が表示されるようになります。
```~/.vimrc
set number
```

# インデント、タブ幅の設定
* autoindent
改行前のインデントを保持します。
```~/.vimrc
"-- 省略 --
set autoindent
```
 * tabstop
 Tab入力時の幅を設定します。
```~/.vimrc
"-- 省略 --
set tabstop=2
```
* shiftwidth
インデント増減時の幅を設定します。
```~/.vimrc
"-- 省略 --
set shiftwidth=2
```
* expandtab
Tabをスペースに設定します。
```~/.vimrc
"-- 省略 --
set expandtab
```

# 文字コード、改行の設定
* encoding
文字コードを設定します。
```~/.vimrc
"-- 省略 --
set encoding=utf-8
```
* fileformat
改行コードを設定します。
```~/.vimrc
"-- 省略 --
set fileformat=unix
```

# ステータスラインの表示
* laststatus
Vimの下側にステータスラインが常に表示されるようになります。
```~/.vimrc
"-- 省略 --
set laststatus=2
```

# vim-plugをインストール
Vimのプラグインマネージャーをインストールします。
```bash
$ curl -k -fLo ~/.vim/autoload/plug.vim --create-dirs https://raw.githubusercontent.com/junegunn/vim-plug/master/plug.vim
```
インストールするプラグインを~/.vimrcの以下の部分に追記していきます。
```~/.vimrc
"-- 省略 --
call plug#begin()
"-- プラグインをここに追記 --
call plug#end()
```

# Yarnをインストール
プラグインの導入で必要になるYarnをインストールします。
```bash
$ npm install -g yarn
```

# coc.nvimをインストール
VimをVSCode風の環境にするプラグインです。
```~/.vimrc
"-- 省略 --
call plug#begin()
"-- 追記ここから --
Plug 'neoclide/coc.nvim', {'branch': 'release'}
"-- 追記ここまで --
call plug#end()
```
Vimを再起動してコマンドモードで以下を実行します。
```vim
:PlugInstall
```
Vimの起動時に警告が表示されるので~/.vimrcに以下を追記します。
```~/.vimrc
"-- 省略 --
call plug#end()
"-- 追記ここから --
let g:coc_disable_startup_warning = 1
"-- 追記ここまで --
```

# coc-volarをインストール
Nuxt3の開発では有名な拡張機能Volarをインストールします。
```~/.vimrc
"-- 省略 --
call plug#begin()
Plug 'neoclide/coc.nvim', {'branch': 'release'}
"-- 追記ここから --
Plug 'yaegassy/coc-volar', {'do': 'yarn install'}
"-- 追記ここまで --
call plug#end()
"-- 省略 --
```
Vimを再起動してコマンドモードで以下を実行します。
```vim
:PlugInstall
```

# lightlineをインストール
Vimのステータスラインを拡張するlightlineをインストールします。
```~/.vimrc
"-- 省略 --
call plug#begin()
"-- 追記ここから --
Plug 'itchyny/lightline.vim'
"-- 追記ここまで --
Plug 'neoclide/coc.nvim', {'branch': 'release'}
Plug 'yaegassy/coc-volar', {'do': 'yarn install'}
call plug#end()
"-- 省略 --
```
Vimを再起動してコマンドモードで以下を実行します。
```vim
:PlugInstall
```
私は以下のような設定で使っています。（全く使いこなせてません。。。）
```~/.vimrc
"-- 省略 --
call plug#end()
"-- 追記ここから --
let g:lightline =
\ {
\   'colorscheme': 'wombat',
\   'active': {
\     'left': [
\       [ 'paste' ],
\       [ 'readonly', 'filename', 'modified' ]
\     ],
\     'right': [
\       [ 'lineinfo' ],
\       [ 'percent' ],
\       [ 'fileformat', 'fileencoding', 'filetype' ]
\     ],
\   }
\ }
"-- 追記ここまで --
"-- 省略 --
let g:coc_disable_startup_warning = 1
```

# nord-vimをインストール
Vimのカラースキームをインストールします。
```~/.vimrc
"-- 省略 --
call plug#begin()
"-- 追記ここから --
Plug 'arcticicestudio/nord-vim'
"-- 追記ここまで --
Plug 'itchyny/lightline.vim'
Plug 'neoclide/coc.nvim', {'branch': 'release'}
Plug 'yaegassy/coc-volar', {'do': 'yarn install'}
call plug#end()
"-- 省略 --
```
Vimを再起動してコマンドモードで以下を実行します。
```vim
:PlugInstall
```
私は以下のような設定で使っています。（全く使いこなせてません。。。）
```~/.vimrc
"-- 省略 --
call plug#end()
"-- 追記ここから --
let g:nord_bold_vertical_split_line = 1
let g:nord_italic = 1
let g:nord_italic_comments = 1

colorscheme nord
"-- 追記ここまで --
let g:lightline =
"-- 省略 --
```

# Vimの設定公開
```~/.vimrc
set number

set autoindent

set tabstop=2
set shiftwidth=2
set expandtab

set encoding=utf-8
set fileformat=unix

set laststatus=2

call plug#begin()
Plug 'arcticicestudio/nord-vim'
Plug 'itchyny/lightline.vim'
Plug 'neoclide/coc.nvim', {'branch': 'release'}
Plug 'yaegassy/coc-volar', {'do': 'yarn install'}
call plug#end()

let g:nord_bold_vertical_split_line = 1
let g:nord_italic = 1
let g:nord_italic_comments = 1

colorscheme nord

let g:lightline =
\ {
\   'colorscheme': 'wombat',
\   'active': {
\     'left': [
\       [ 'paste' ],
\       [ 'readonly', 'filename', 'modified' ]
\     ],
\     'right': [
\       [ 'lineinfo' ],
\       [ 'percent' ],
\       [ 'fileformat', 'fileencoding', 'filetype' ]
\     ],
\   }
\ }

let g:coc_disable_startup_warning = 1
```