Vimを諦める前に。とりあえずこれやっとけってやつ

これは中心になる命題なんだが、<完璧なエディタ>というのはこの世には存在しない。――たしかにこの街の人びとは、誰も傷つけあわないし、誰も憎しみあわないし、欲望も持たない。みんな充ち足りて、「Sublime Textでいいや」ってなってる。なぜだと思う？ それはVimというものを持たないからだよ

目次

  1. とりあえずこれ設定しとけってやつ
  2. とりあえずこれ入れとけってプラグイン
  3. とりあえずこれ覚えとけってやつ


1. とりあえずこれ設定しとけってやつ

とりあえず.vimrcを晒す
ファイルタイプ毎の設定（タブサイズとか）
~/.vim/ftpluginの中に php.vim の様なファイルを作って、そこに.vimrcに書いてる設定を移すと、FileTypeがphpの時だけ適応するものができる。
タブの設定などはFileType個別に設定しておくよろし。
" タブ幅の設定
set expandtab
set tabstop=4
set softtabstop=4
set shiftwidth=4
検索ハイライトの解除
検索してハイライトした文字は、
:nohlsearch
というコマンドで解除できるが、めんどい。
以下を.vimrcに設定して、Escキー連打で解除できる様にしておく。
"Esc連打でハイライト解除：
set hlsearch
nmap <Esc><Esc> :nohlsearch<CR><Esc>
括弧のサブライム風補完
" 括弧の補完
inoremap {<Enter> {}<Left><CR><ESC><S-o>
inoremap [<Enter> []<Left><CR><ESC><S-o>
inoremap (<Enter> ()<Left><CR><ESC><S-o>


2. とりあえずこれ入れとけってプラグイン

  • neobundle.vim
  • ctrlp.vim
  • NerdTree.vim
  • unite.vim
  • unite-outline.vim
  • brightest.vim
  • vim-easy-align
  • emmet.vim
  • Ag.vim
§ Vimプラグインを管理するプラグイン →NeoBundle.vim
Vimプラグインは通常、~/.vim 内の各ディレクトリに適切に振り分けて設置する必要がある。
それはめんどいので、プラグインでプラグインを管理する（ややこしい）。

色々あるが、NeoBundleが主流っぽいのでそれを入れておけばいいと思う。
私はPathogenというのを使ってるが、乗り換えるタイミングを見失っただけだ。

Node.jsのnpmでpackage.json、PHPのcomposer.jsonのように、追加したいパッケージを記述し、コマンドを打つことでインストールするタイプのものだ。
セットアップ
$ mkdir ~/.vim/bundle
$ git clone https://github.com/Shougo/neobundle.vim ~/.vim/bundle/neobundle.vim
で.vimrcにプラグインを指定。
# 例
NeoBundle 'hoge/foo.vim'
vimを起動し、
:NeoBundleInstall
とすると、.vimrcに書いたプラグインがインストールされる。
さて、これで準備は整った。
じゃんじゃか入れていこう。以下逆引き
とりあえず、これいれとけ
説明はあとで。
NeoBundle "ctrlpvim/ctrlp.vim"
NeoBundle "scrooloose/nerdtree"
NeoBundle "Shougo/unite.vim"
NeoBundle "Shougo/unite-outline"
NeoBundle "osyo-manga/vim-brightest"
NeoBundle "junegunn/vim-easy-align"
NeoBundle "mattn/emmet-vim"
NeoBundle "rking/ag.vim" "# silver searcher(agコマンド)が別途必要
インストール
:NeoBundleInstall
§ Sublime Textみたいなファイル検索 → ctrlp.vim
ctrlp.vim
ctrl p って名前の時点でSublimeのアレを模して作ったんだと思う。
Sublimeだとサイドバーに読み込んでるプロジェクト内のファイルをインクリメンタル検索出来るけど、ctrlp.vimはカレントディレクトリ内のファイルのみが対象だ。
§ サイドバーにファイルツリーを表示 →NerdTree.vim
nerdtree.vim
§ クラスや関数の一覧表示 → unite.vim & unite-outline.vim
unite-outline
uniteという、ファイルや、履歴の一覧をiPhoneの通知センターの様に上からシュッと出して表示するプラグインがある。
これだけでも便利だが、unite-outline.vimで真価を発揮すると思っている。
キーバインド設定
いちいち:Unite outlineと打ち込むのはだるいから、キーバインドを設定しておく。
参考までに私の設定↓
"unite prefix key.
nnoremap [unite] <Nop>
nmap <Space>f [unite]

"unite general settings
"インサートモードで開始
let g:unite_enable_start_insert = 1
"最近開いたファイル履歴の保存数
let g:unite_source_file_mru_limit = 50

"file_mruの表示フォーマットを指定。空にすると表示スピードが高速化される
let g:unite_source_file_mru_filename_format = ''

"現在開いているファイルのディレクトリ下のファイル一覧。
"開いていない場合はカレントディレクトリ
nnoremap <silent> [unite]f :<C-u>UniteWithBufferDir -buffer-name=files file<CR>
"バッファ一覧
nnoremap <silent> [unite]b :<C-u>Unite buffer<CR>
"レジスタ一覧
nnoremap <silent> [unite]r :<C-u>Unite -buffer-name=register register<CR>
"最近使用したファイル一覧
nnoremap <silent> [unite]m :<C-u>Unite file_mru<CR>
"アウトライン表示
nnoremap <silent> [unite]o :<C-u>Unite outline<CR>
"ブックマーク一覧
nnoremap <silent> [unite]c :<C-u>Unite bookmark<CR>
"ブックマークに追加
nnoremap <silent> [unite]a :<C-u>UniteBookmarkAdd<CR>
"uniteを開いている間のキーマッピング
autocmd FileType unite call s:unite_my_settings()
function! s:unite_my_settings()"{{{
"ESCでuniteを終了
nmap <buffer> <ESC> <Plug>(unite_exit)
"入力モードのときjjでノーマルモードに移動
imap <buffer> jj <Plug>(unite_insert_leave)
"入力モードのときctrl+wでバックスラッシュも削除
imap <buffer> <C-w> <Plug>(unite_delete_backward_path)
<Space> + f でUniteのプレフィスク設定。
  • <Space>ff でファイラ起動
  • <Space>fo でUnite Outline起動
§ カーソル位置の単語をハイライト →brightest.vim
brightest.vim
カーソル位置にある単語を全てハイライトする。
あるとなかなか便利なのだが、色を赤にしか設定できないのが悲しい。
§ HTML&CSS爆速コーディング →emmet.vim
フロントエンジニア御用達。かつてはZencodingと呼ばれていた。
emmetはZencodingの進化版。 

Vim専用というわけではなく、各エディタのプラグインで実装されている。
とりあえずHTMLとCSSが爆速でコーディングできるから入れておくよろし。
展開が<C-y>,という謎キーバインドだから、変更したほうがいいかもね。
私は慣れてしまってそのまま使ってるが。
§ grep（全文検索）したい →ag.vim
vimには標準でvimgrepというgrep検索機能があるが、
これがまた遅いのなんの。
インストールする時はまずagをインストールしてからにしよう。
$ brew install ag


3. とりあえずこれ覚えとけってやつ

  • 基本キーバインド
  • ビジュアルモードの技
  • テキストオブジェクトの操作
設定やらプラグインやらを充実させたところで、
思考のスピードで編集に至るまでは、ある程度覚えておかなきゃいけないことがある。

これだけは覚えておけ、やっておけ、ってやつを載せとく。
※大文字 A は Shiftキー を押しながら a を表し、C-a は Ctrlキーを押しながら a を表す
基本キーバインド
カーソルの移動系は これ を印刷して見える位置に貼っとけ。
頭で覚えようとするな。脊髄で覚るんだ。

その中でも、特に脊髄に染み込ませた方がいいのを列挙しとく。
暇があったら練習しておくように。
  • gg でファイル先頭
  • G でファイル末尾
  • 0 で行頭
  • $ で行末
  • ^ でインデントした位置
ノーマルモードからインサートモードに入るにも色々やり方がある。
状況に応じてスマートに入れるように脊髄を鍛える。
  • I でインデントした位置でインサートモードに入る
  • o で次の行の先頭からインサートモードに入る
  • O で前の行の先頭からインサートモードに入る
ビジュアルモードの技
ヴィジュアルモードの中でも、
  • 文字選択
  • 行選択
  • 矩形選択
の三種類ある。
ノーマルモード v で文字選択
ノーマルモード V 行選択
ノーマルモード C-v で矩形選択になる。
垂直方向に同じ文字一気に入力
vimkey
矩形選択をし、I でインサートモードに入る。
編集後 Esc を押すと、矩形範囲行列すべてに入力文字が反映される。
テキストオブジェクト
Vimは 単語のまとまり を認識できるようになっている。
例えば、Hello World! の先頭のHの部分でおもむろにvwとノーマルモードで打ち込むと
Helloの部分だけが選択されたと思う。



どうだい？


ここまでの設定、プラグイン、キー操作に慣れてしまったら、もうVimじゃなきゃ嫌になっちゃうよね？

ここで紹介した機能やらなんやらはVimのごくごくほんの一部に過ぎない。
nmap等のマッピングから正規表現を巧みに使った検索、マクロ機能なんてのもあったりする。

やれやれ、いくしかなさそうだ。

準備はいいかい？
jkjkjkjkjkk, <esc><esc><esc><esc>

OK

Vim中級〜上級者への道のりは険しい。
諸君らの健闘を祈る。

このブログの人気の投稿

Vue.jsでimgタグのsrcをバインドさせる際の注意点

vue-cli webpack で作成したプロジェクトでは、 img タグの src 属性に指定した画像URL（パス）は Base64エンコードされて出力されます。 < template > < img src = "../../assets/test.png" > </ template > < img src = "data:image/png;base64,iVBORw0KGgoAAAANSUhEC..." > このように展開される。 がしかし src を v-bind によって変数バインドさせた場合はそのままパス文字列が出力されてしまうのです。 < template > < img :src = "image_src" > </ template > < script > export default { data () { return { image_src: "../../assets/test.png" } } } </ script > < img src = "../../assets/test.png" > 当然、画像は表示されない。(publicではないので) vue-loader公式に書いてあった アセット URL ハンドリング · vue-loader < img src = "../image.png" > コレは、 createElement( 'img' , { attrs: { src: require ( '../image.png' ) }}) こういう形にコンパイルされるらしい。 require() で画像を依存ファイルとして読み込んでいるようです。 解決 < template > < img :src = "
続きを読む

Windowsコマンドプロンプトをかっこよくする

イメージ
前からConsole2の存在は知っていたのだが、小生は"Cygwinの亜種"くらいの認識しかなく、実は「コマンドプロンプトのフロントエンドをカスタマイズ」するソフトだと知って胸が高鳴った。 カチャカチャッ・・ ping www.google.co.jp -t ※1 カチャ、ッターン！！(ドヤ) がよりさまになること間違い無し。ｗ Console2の導入 Console | Free software downloads at SourceForge.net からダウンロード。解凍すればすぐ使える。適当なフォルダーに移動しよう。 フォントを変える Edit > setting の Appearance にてフォントを変更。cmd.exeと違って自由なフォントを指定出来るとこがいい。 ウィンドウを透過させる Edit > setting の Appearance > More... の Window transprencyで透過させられる。 色を変える Edit > setting の Console にて Console colors map で色を変更出来る。 左側が元の色、右側が変更後の色となる。 コマンドプロンプトの設定 プロンプト ※2 文字を変更 コマンドプロンプトにて prompt [$P]$$$S とすると [C:\Users\home]$ の様にLinuxライクになるのでオススメ。 ただ毎回起動してこれを打ち込むのは面倒なので、起動時に設定ファイルを読み込む様にする。 ファイル名を指定して実行(Win+R)を開き「regedit」と入力。 HKEY_LOCAL_MACHINE\Software\Microsoft\Command Processor に新規で文字列値(S)を作り名前を「 AutoRun 」にする。 ダブルクリックで開き 値のデータ(V) を c:\bin\cmd_init.bat にする。 レジストリ
続きを読む

vscodeとPlantUMLでロバストネス図を書く

イメージ
最近、「 ユースケース駆動開発実践ガイド 」を読みつつ実践してるのだが、ドメインモデル・ユースケース図・ロバストネス図などを何で作るか悩んでいる。 ふと、「PlantUML」なるものがあったと思いだしたので、試しに使ってみた。 PlantUMLとは？ http://plantuml.com/ テキストのみでUMLの図を書くためのツール。最近だとテキストでフローチャートやシーケンス図が掛ける「 mermaid.js 」が話題にあがることもあったが、それよりももっと前からある 元祖テキスト作図ツール といえる。（wikiによると2009年4月17日が初版リリースだそう） インストール Macの人はbrewで入れられる。 $ brew install graphviz $ brew install plantuml Windowsな人はJavaの環境入れて graphviz と plantuml を個別でインストールする必要があるのかな。 まずは実行 Vim等のテキストエディタで以下をコピペし保存。 test.uml みたいな感じで。 @startuml usecase 購読者がニュース一覧を閲覧する actor 購読者 boundary ニュース一覧画面 control 一覧取得 entity ニュース一覧 購読者 --> ニュース一覧画面 : アクセス ニュース一覧画面 --> 一覧取得 : 呼び出し 一覧取得 --> ニュース一覧 : 問い合わせ @enduml そして実行。 $ plantuml test.uml いい感じですね。 vscodeで書く vscodeこと「Visual Studio Code」ではプラグインを入れる事でUMLのリアルタイムレンダリングを行ってくれる。 vscodeの「拡張機能」の検索窓に「plantuml」を入れるとトップにできくるのでインストール→再読込 いい感じ。 しばらく使ってみる PlantUMLにロバストネス図のElementまで用意されてるとは思わなくて興奮した勢いで書いてみました。 とりあえず環境は整えたので、いまモデリングで使ってる draw.io と比べてどうなのか図るべく使っていこうと思
続きを読む