Vimで本格的にWeb開発したい人の為のステップアップガイド

FROM ubuntu:22.04

ENV LANG ja_JP.UTF-8
ARG USERNAME=user
ARG GROUPNAME=user
ARG PASSWORD=password
ARG UID=1000
ARG GID=1000

# apt高速化
RUN sed -i '[email protected]@ftp.jaist.ac.jp/pub/Linux@g' /etc/apt/sources.list
RUN apt update && apt upgrade -y && apt install -y curl sudo git locales vim && \
    locale-gen ja_JP.UTF-8

RUN groupadd -g $GID $GROUPNAME && \
    useradd -m -s /bin/bash -u $UID -g $GID $USERNAME && \
    echo "$USERNAME:$PASSWORD" | chpasswd && \
    echo "$USERNAME ALL=(ALL) ALL" >> /etc/sudoers
USER $USERNAME
WORKDIR /home/$USERNAME/

# Vim検証用のイメージ作成
docker image build -t vim-test .
# Vim検証用のイメージからコンテナ作成
docker container run -it vim-test
# 作業終わるときはexitでコンテナから抜けます。
# コンテナを削除すると、自分で追加した設定等が消えてしまうので基本削除しないようにします。不要になった時や一からやり直したいときはコンテナを削除しても大丈夫です。

set number            " 画面左端に行番号を表示
set signcolumn=yes    " 画面左端にサイン列を常に表示
set laststatus=2      " 画面最下部に常にステータスラインを表示
set cmdheight=2       " 画面最下部(ステータス行より下)のメッセージ表示欄を2行にする
set showtabline=2     " タブ毎に常にタブラインを表示

set virtualedit=block " 矩形選択時に仮想編集を有効化
set wildmenu          " コマンドラインでTAB補完時に候補メニューを表示
set wildignorecase    " コマンドラインでTAB補完時に大文字・小文字を区別しない

set tabstop=2         " タブを2文字分にする
set expandtab         " タブの代わりに半角スペースを使用
set shiftwidth=2      " インデントを半角スペース2文字にする
set smartindent       " 新しい行追加時に自動でインデントを追加

set hlsearch          " 文字列検索のハイライト
set ignorecase        " 文字列検索で大文字・小文字を区別しない
set smartcase         " 文字列検索で大文字を含んでいたらignorecaseを上書きし、大文字・小文字を区別する
set incsearch         " インクリメンタルサーチ

set noswapfile        " スワップファイル(.swp)を生成しない
set nobackup          " バックアップファイル(~)を生成しない
set noundofile        " undoファイル(.un~)を生成しない
set encoding=utf-8    " Vim内部で使われる文字エンコーディングにutf-8にする

set mouse=a           " マウス操作を有効にする

augroup signcolumn_bg_none
  autocmd!
  " colorscheme読み込み後、サイン列の背景色をNONEにする ※Windows Terminal側の色を使いたいため
  autocmd VimEnter,ColorScheme * highlight SignColumn guibg=NONE ctermbg=NONE
augroup END

nmap <silent> <Esc><Esc> :<C-u>nohlsearch<CR><Esc> " 文字列検索のハイライトオフ

call plug#begin('~/.vim/plugged')
  Plug 'vim-jp/vimdoc-ja'
  Plug 'itchyny/lightline.vim'
  Plug 'lambdalisue/fern.vim'
  Plug 'lambdalisue/nerdfont.vim'
  Plug 'lambdalisue/fern-renderer-nerdfont.vim'
  Plug 'lambdalisue/fern-git-status.vim'
  Plug 'airblade/vim-gitgutter'
  Plug 'tpope/vim-fugitive'
  Plug 'junegunn/fzf', { 'do': { -> fzf#install() } }
  Plug 'junegunn/fzf.vim'
  Plug 'tpope/vim-rails'
  Plug 'prabirshrestha/vim-lsp'
  Plug 'mattn/vim-lsp-settings'
  Plug 'prabirshrestha/asyncomplete.vim'
  Plug 'prabirshrestha/asyncomplete-lsp.vim'
  Plug 'liuchengxu/vim-which-key'
call plug#end()

if !has('gui_running')
  set t_Co=256
endif

let g:fern#default_hidden=1 " 隠しファイルを表示する
let g:fern#renderer = 'nerdfont'
let g:fern#renderer#nerdfont#indent_markers = 1

set updatetime=100 " 更新時間を100msに設定

let g:gitgutter_sign_added = '+'
let g:gitgutter_sign_modified = '>'
let g:gitgutter_sign_removed = '-'
let g:gitgutter_sign_removed_first_line = '^'
let g:gitgutter_sign_modified_removed = '<'

augroup vimrc_vim_gitgutter
  autocmd!
  " colorscheme読み込み後、サイン列の記号の背景色を設定
  autocmd VimEnter,ColorScheme * highlight GitGutterAdd guibg=NONE ctermbg=NONE guifg=#000900 ctermfg=2
  autocmd VimEnter,ColorScheme * highlight GitGutterChange guibg=NONE ctermbg=NONE guifg=#bbbb00 ctermfg=3
  autocmd VimEnter,ColorScheme * highlight GitGutterDelete guibg=NONE ctermbg=NONE guifg=#ff2222 ctermfg=1
augroup END

let g:lsp_diagnostics_enabled = 1                        " Diagnosticsを有効にする
let g:lsp_diagnostics_echo_cursor = 1                    " カーソル下のエラー、警告、情報、ヒントを画面下部のコマンド ラインに表示
let g:lsp_diagnostics_echo_delay = 50                    " Diagnosticsの表示の遅延を50msに設定
let g:lsp_diagnostics_float_cursor = 1                   " カーソル下のエラー、警告、情報、ヒントをフロート表示
let g:lsp_diagnostics_signs_enabled = 1                  " 画面左端のサイン列にエラー、警告、情報、ヒントのアイコンを 表示
let g:lsp_diagnostics_signs_delay = 50                   " Diagnosticsのサイン列の表示の遅延を50msに設定
let g:lsp_diagnostics_signs_insert_mode_enabled = 0      " 挿入モード時、Diagnosticsのサイン列を表示しない
let g:lsp_diagnostics_highlights_delay = 50              " Diagnosticsの指摘箇所自体の文字ハイライト表示の遅延を50msに設定
let g:lsp_diagnostics_highlights_insert_mode_enabled = 0 " 挿入モード時、Diagnosticsの指摘箇所自体の文字ハイライトを表示しない
let g:lsp_document_code_action_signs_enabled = 0         " 画面左端のサイン列にコードアクションのアイコン非表示

let g:asyncomplete_popup_delay = 100 " 補完メニューを開く際の遅延を100msに設定

imap <expr> <Tab>   pumvisible() ? "\<C-n>" : "\<Tab>"
imap <expr> <S-Tab> pumvisible() ? "\<C-p>" : "\<S-Tab>"
imap <expr> <cr>    pumvisible() ? asyncomplete#close_popup() : "\<cr>"

let g:lsp_settings_filetype_ruby = ['solargraph']

set timeoutlen=500 " 100msだと他のキーマッピングが上手く動かないため500msに設定

let g:which_key_ignore_outside_mappings = 1 " 辞書にないマッピングは非表示にする
let g:which_key_sep = '→'
let g:which_key_use_floating_win = 0

let g:which_key_map_tabs = { 'name' : '+tabs' }
call which_key#register('t', 'g:which_key_map_tabs')
nmap t :<c-u>WhichKey 't'<CR>
vmap t :<c-u>WhichKeyVisual 't'<CR>

let g:which_key_map_tabs.e = [':tabedit'   , 'new']
let g:which_key_map_tabs.t = [':tab split' , 'split']
let g:which_key_map_tabs.h = [':tabprev'   , 'focus left']
let g:which_key_map_tabs.l = [':tabnext'   , 'focus right']
let g:which_key_map_tabs.H = [':tabmove -1', 'move left']
let g:which_key_map_tabs.L = [':tabmove +1', 'move right']

+set number            " 画面左端に行番号を表示
+set signcolumn=yes    " 画面左端にサイン列を常に表示
+set laststatus=2      " 画面最下部に常にステータスラインを表示
+set cmdheight=2       " 画面最下部(ステータス行より下)のメッセージ表示欄を2行にする
+set showtabline=2     " タブ毎に常にタブラインを表示

+set virtualedit=block " 矩形選択時に仮想編集を有効化
+set wildmenu          " コマンドラインでTAB補完時に候補メニューを表示
+set wildignorecase    " コマンドラインでTAB補完時に大文字・小文字を区別しない

+set tabstop=2         " タブを2文字分にする
+set expandtab         " タブの代わりに半角スペースを使用
+set shiftwidth=2      " インデントを半角スペース2文字にする
+set smartindent       " 新しい行追加時に自動でインデントを追加

+set hlsearch          " 文字列検索のハイライト
+set ignorecase        " 文字列検索で大文字・小文字を区別しない
+set smartcase         " 文字列検索で大文字を含んでいたらignorecaseを上書きし、大文字・小文字を区別する
+set incsearch         " インクリメンタルサーチ

+set noswapfile        " スワップファイル(.swp)を生成しない
+set nobackup          " バックアップファイル(~)を生成しない
+set noundofile        " undoファイル(.un~)を生成しない
+set encoding=utf-8    " Vim内部で使われる文字エンコーディングにutf-8にする

+set mouse=a           " マウス操作を有効にする

augroup signcolumn_bg_none
  autocmd!
  " colorscheme読み込み後、サイン列の背景色をNONEにする ※Windows Terminal側の色を使いたいため
  autocmd VimEnter,ColorScheme * highlight SignColumn guibg=NONE ctermbg=NONE
augroup END

nmap <silent> <Esc><Esc> :<C-u>nohlsearch<CR><Esc> " 文字列検索のハイライトオフ

# ~/.vim/autoload/plug.vim  をインストールする
$ curl -fLo ~/.vim/autoload/plug.vim --create-dirs \
    https://raw.githubusercontent.com/junegunn/vim-plug/master/plug.vim

+call plug#begin('~/.vim/plugged')
+call plug#end()

call plug#begin('~/.vim/plugged')
+  Plug 'vim-jp/vimdoc-ja'
call plug#end()

call plug#begin('~/.vim/plugged')
  Plug 'vim-jp/vimdoc-ja'
+  Plug 'itchyny/lightline.vim'
call plug#end()

+if !has('gui_running')
+  set t_Co=256
+endif

call plug#begin('~/.vim/plugged')
  Plug 'vim-jp/vimdoc-ja'
  Plug 'itchyny/lightline.vim'
+  Plug 'lambdalisue/fern.vim'
call plug#end()

+let g:fern#default_hidden=1 " 隠しファイルを表示する

" 現在の作業ディレクトリでFernを開き、現在のバッファ(ファイル)にフォーカスする
:Fern . -reveal=%

" 現在の作業ディレクトリでFernを開き、現在のバッファ(ファイル)にフォーカスする
:Fern . -drawer -reveal=%

$ git clone --depth 1 https://github.com/ryanoasis/nerd-fonts.git
$ Set-ExecutionPolicy -ExecutionPolicy RemoteSigned -Scope Process
$ cd .\nerd-fonts\
$ ./install.ps1 SourceCodePro

call plug#begin('~/.vim/plugged')
  Plug 'vim-jp/vimdoc-ja'
  Plug 'itchyny/lightline.vim'
  Plug 'lambdalisue/fern.vim'
+  Plug 'lambdalisue/nerdfont.vim'
+  Plug 'lambdalisue/fern-renderer-nerdfont.vim'
call plug#end()

let g:fern#default_hidden=1 " 隠しファイルを表示する
+let g:fern#renderer = 'nerdfont'
+let g:fern#renderer#nerdfont#indent_markers = 1

call plug#begin('~/.vim/plugged')
  Plug 'vim-jp/vimdoc-ja'
  Plug 'itchyny/lightline.vim'
  Plug 'lambdalisue/fern.vim'
  Plug 'lambdalisue/nerdfont.vim'
  Plug 'lambdalisue/fern-renderer-nerdfont.vim'
+  Plug 'lambdalisue/fern-git-status.vim'
call plug#end()

call plug#begin('~/.vim/plugged')
  Plug 'vim-jp/vimdoc-ja'
  Plug 'itchyny/lightline.vim'
  Plug 'lambdalisue/fern.vim'
  Plug 'lambdalisue/nerdfont.vim'
  Plug 'lambdalisue/fern-renderer-nerdfont.vim'
  Plug 'lambdalisue/fern-git-status.vim'
+  Plug 'airblade/vim-gitgutter'
call plug#end()

+set updatetime=100 " 更新時間を100msに設定

+let g:gitgutter_sign_added = '+'
+let g:gitgutter_sign_modified = '>'
+let g:gitgutter_sign_removed = '-'
+let g:gitgutter_sign_removed_first_line = '^'
+let g:gitgutter_sign_modified_removed = '<'

augroup vimrc_vim_gitgutter
  autocmd!
  " colorscheme読み込み後、サイン列の記号の背景色を設定
  autocmd VimEnter,ColorScheme * highlight GitGutterAdd guibg=NONE ctermbg=NONE guifg=#000900 ctermfg=2
  autocmd VimEnter,ColorScheme * highlight GitGutterChange guibg=NONE ctermbg=NONE guifg=#bbbb00 ctermfg=3
  autocmd VimEnter,ColorScheme * highlight GitGutterDelete guibg=NONE ctermbg=NONE guifg=#ff2222 ctermfg=1
augroup END

call plug#begin('~/.vim/plugged')
  Plug 'vim-jp/vimdoc-ja'
  Plug 'itchyny/lightline.vim'
  Plug 'lambdalisue/fern.vim'
  Plug 'lambdalisue/nerdfont.vim'
  Plug 'lambdalisue/fern-renderer-nerdfont.vim'
  Plug 'lambdalisue/fern-git-status.vim'
  Plug 'airblade/vim-gitgutter'
+  Plug 'tpope/vim-fugitive'
call plug#end()

$ sudo apt install fzf
$ which fzf #=> /usr/bin/fzf

$ sudo apt install bat
$ sudo ln -s /usr/bin/batcat /usr/local/bin/bat # batで使えるように
$ which bat #=> /usr/local/bin/bat

$ sudo apt install ripgrep
$ which rg #=> /usr/bin/rg

call plug#begin('~/.vim/plugged')
  Plug 'vim-jp/vimdoc-ja'
  Plug 'itchyny/lightline.vim'
  Plug 'lambdalisue/fern.vim'
  Plug 'lambdalisue/nerdfont.vim'
  Plug 'lambdalisue/fern-renderer-nerdfont.vim'
  Plug 'lambdalisue/fern-git-status.vim'
  Plug 'airblade/vim-gitgutter'
  Plug 'tpope/vim-fugitive'
+  Plug 'junegunn/fzf', { 'do': { -> fzf#install() } }
+  Plug 'junegunn/fzf.vim'
call plug#end()

call plug#begin('~/.vim/plugged')
  Plug 'vim-jp/vimdoc-ja'
  Plug 'itchyny/lightline.vim'
  Plug 'lambdalisue/fern.vim'
  Plug 'lambdalisue/nerdfont.vim'
  Plug 'lambdalisue/fern-renderer-nerdfont.vim'
  Plug 'lambdalisue/fern-git-status.vim'
  Plug 'airblade/vim-gitgutter'
  Plug 'tpope/vim-fugitive'
  Plug 'junegunn/fzf', { 'do': { -> fzf#install() } }
  Plug 'junegunn/fzf.vim'
+  Plug 'tpope/vim-rails'
call plug#end()

call plug#begin('~/.vim/plugged')
  Plug 'vim-jp/vimdoc-ja'
  Plug 'itchyny/lightline.vim'
  Plug 'lambdalisue/fern.vim'
  Plug 'lambdalisue/nerdfont.vim'
  Plug 'lambdalisue/fern-renderer-nerdfont.vim'
  Plug 'lambdalisue/fern-git-status.vim'
  Plug 'airblade/vim-gitgutter'
  Plug 'tpope/vim-fugitive'
  Plug 'junegunn/fzf', { 'do': { -> fzf#install() } }
  Plug 'junegunn/fzf.vim'
  Plug 'tpope/vim-rails'
+  Plug 'prabirshrestha/vim-lsp'
+  Plug 'mattn/vim-lsp-settings'
call plug#end()

call plug#begin('~/.vim/plugged')
  Plug 'vim-jp/vimdoc-ja'
  Plug 'itchyny/lightline.vim'
  Plug 'lambdalisue/fern.vim'
  Plug 'lambdalisue/nerdfont.vim'
  Plug 'lambdalisue/fern-renderer-nerdfont.vim'
  Plug 'lambdalisue/fern-git-status.vim'
  Plug 'airblade/vim-gitgutter'
  Plug 'tpope/vim-fugitive'
  Plug 'junegunn/fzf', { 'do': { -> fzf#install() } }
  Plug 'junegunn/fzf.vim'
  Plug 'tpope/vim-rails'
  Plug 'prabirshrestha/vim-lsp'
  Plug 'mattn/vim-lsp-settings'
+  Plug 'prabirshrestha/asyncomplete.vim'
+  Plug 'prabirshrestha/asyncomplete-lsp.vim'
call plug#end()

+let g:lsp_diagnostics_enabled = 1                        " Diagnosticsを有効にする
+let g:lsp_diagnostics_echo_cursor = 1                    " カーソル下のエラー、警告、情報、ヒントを画面下部のコマンドラインに表示
+let g:lsp_diagnostics_echo_delay = 50                    " Diagnosticsの表示の遅延を50msに設定
+let g:lsp_diagnostics_float_cursor = 1                   " カーソル下のエラー、警告、情報、ヒントをフロート表示
+let g:lsp_diagnostics_signs_enabled = 1                  " 画面左端のサイン列にエラー、警告、情報、ヒントのアイコンを表示
+let g:lsp_diagnostics_signs_delay = 50                   " Diagnosticsのサイン列の表示の遅延を50msに設定
+let g:lsp_diagnostics_signs_insert_mode_enabled = 0      " 挿入モード時、Diagnosticsのサイン列を表示しない
+let g:lsp_diagnostics_highlights_delay = 50              " Diagnosticsの指摘箇所自体の文字ハイライト表示の遅延を50msに設定
+let g:lsp_diagnostics_highlights_insert_mode_enabled = 0 " 挿入モード時、Diagnosticsの指摘箇所自体の文字ハイライトを表示しない
+let g:lsp_document_code_action_signs_enabled = 0         " 画面左端のサイン列にコードアクションのアイコン非表示

+let g:asyncomplete_popup_delay = 100 " 補完メニューを開く際の遅延を100msに設定

+imap <expr> <Tab>   pumvisible() ? "\<C-n>" : "\<Tab>"
+imap <expr> <S-Tab> pumvisible() ? "\<C-p>" : "\<S-Tab>"
+imap <expr> <cr>    pumvisible() ? asyncomplete#close_popup() : "\<cr>"

$ curl https://get.volta.sh | bash
$ source ~/.bashrc
$ volta install node@14 # TODOサンプルアプリのバージョンに合わせてます
$ volta install yarn
$ cd sample-rails-graphql-typescript-react-apollo/frontend/
$ yarn install # これしないとLanguage Serverが動かない

$ sudo apt install rbenv
$ mkdir -p "$(rbenv root)"/plugins
$ git clone https://github.com/rbenv/ruby-build.git "$(rbenv root)"/plugins/ruby
$ rbenv install 3.1.2  # TODOサンプルアプリのバージョンに合わせてます
$ rbenv global 3.1.2
$ echo 'eval "$(rbenv init -)"' >> ~/.bashrc
$ source ~/.bashrc

let g:lsp_settings_filetype_ruby = ['solargraph']

call plug#begin('~/.vim/plugged')
  Plug 'vim-jp/vimdoc-ja'
  Plug 'itchyny/lightline.vim'
  Plug 'lambdalisue/fern.vim'
  Plug 'lambdalisue/nerdfont.vim'
  Plug 'lambdalisue/fern-renderer-nerdfont.vim'
  Plug 'lambdalisue/fern-git-status.vim'
  Plug 'airblade/vim-gitgutter'
  Plug 'tpope/vim-fugitive'
  Plug 'junegunn/fzf', { 'do': { -> fzf#install() } }
  Plug 'junegunn/fzf.vim'
  Plug 'tpope/vim-rails'
  Plug 'prabirshrestha/vim-lsp'
  Plug 'mattn/vim-lsp-settings'
  Plug 'prabirshrestha/asyncomplete.vim'
  Plug 'prabirshrestha/asyncomplete-lsp.vim'
+  Plug 'liuchengxu/vim-which-key'
call plug#end()

set timeoutlen=500 " 100msだと他のキーマッピングが上手く動かないため500msに設定

let g:which_key_ignore_outside_mappings = 1 " 辞書にないマッピングは非表示にする
let g:which_key_sep = '→'
let g:which_key_use_floating_win = 0

let g:which_key_map_tabs = { 'name' : '+tabs' }
call which_key#register('t', 'g:which_key_map_tabs')
nmap t :<c-u>WhichKey 't'<CR>
vmap t :<c-u>WhichKeyVisual 't'<CR>

let g:which_key_map_tabs.e = [':tabedit'   , 'new']
let g:which_key_map_tabs.t = [':tab split' , 'split']
let g:which_key_map_tabs.h = [':tabprev'   , 'focus left']
let g:which_key_map_tabs.l = [':tabnext'   , 'focus right']
let g:which_key_map_tabs.H = [':tabmove -1', 'move left']
let g:which_key_map_tabs.L = [':tabmove +1', 'move right']