Novice Engineer BLOG

プログラミングやITニュースについて発信していきます。ときどき日常

Macでvimとemmet-vimを使えるようにする裏技

環境構築

f:id:oooofara_prog:20161105215749j:plain 前回の記事で載せた写真の女の子の評判が良かったのでもう一度使う！笑

こんにちは。
11月からプロジェクトが変わり早く家に帰れるようになったので、ブログ書きます。つまりは暇です。
今回は、MacにVimをインストールして、emmet-vimプラグインを入れるまでの手順をつらつら書きます。
emmet-vim入れた理由は、AngularJS勉強しようと思い立って、さらにエディタとしてVimを使おうと調子乗ったからです。

目次

  1. 参考にしたサイト
  2. Mac標準搭載のVimにする？それともHomebrewからインストールしたVimする？それともV・i・m？
  3. Xcodeのインストール
  4. Command Line Tools for Xcodeのインストール
  5. Homebrewのインストール
  6. Vimのインストール
  7. .vimrcの設定
  8. NeoBundleのインストール
  9. emmet-vimのインストール
  10. 動作確認
  11. 余談

1.参考にしたサイト

chi-kun.hatenablog.com chi-kun.hatenablog.com

2.Mac標準搭載のVimにする？それともHomebrewからインストールしたVimにする？それともV・i・m？

MacにはVimが標準搭載されているから、Homebrewからわざわざインストールする必要はないです。
ですが、Homebrewからインストールすれば、Vimがバージョンアップされたときに手軽にUpdateできるというメリットがあります。
標準搭載のVimはいつまで経っても同じバージョンのまま。新しくMac買えばバージョンアップされたVimが搭載されているかもだけど。。。
どちらにするか決めましたか？

・Mac標準搭載のVimを選んだあなたは7章へ
・HomebrewからインストールするVimを選んだあなたは3章へ
(ちなみに僕はHomebrewからインストールしました。ちなみにですけど。)

※Homebrew
パッケージ管理システムの一つ。
「Homebrew なにそれ 便利なの」って調べるといっぱいサイトが出てくるのでそちらをご確認くださいませ。

3.Xcodeのインストール

Homebrewを使うためにはXcodeをインストールする必要があります。
インストールしていない方はAppStoreからXcodeをインストールしてください。

※すでにインストールしている人は要注意！！！

そのままHomebrewをインストールすると「Xcodeのバージョンが古いですよ。お兄さん。」エラーが発生するので、すでにインストールされている人も最新版のXcodeにアップデートしてください。
アップデートして、はい終了！ではありません。

一度、Xcodeを起動してライセンス認証をしないとエラーになりますのでご注意ください。

ちなみに、僕は「Xcode！？前にインストールしてあるからいいや！」と思って、そのまま進めた結果エラーになって時間食ったタイプの人間です。

4.Command Line Tools for Xcodeのインストール

続いて、Command Line Tools for Xcodeと呼ばれるコマンドラインツールをインストールします。 これは簡単です。

①ターミナルを起動
②Xcode-select --installを入力してEnter
③画面の指示に従う

5.Homebrewのインストール

いよいよHomebrewのインストール！
ここも簡単です。

①こちらのサイトHomebrew — The missing package manager for macOSにアクセス ②サイトから以下をコピー

/usr/bin/ruby -e "$(curl -fsSL https://raw.githubusercontent.com/Homebrew/install/master/install)"

③ターミナルを起動
④ペーストしてEnter
⑤途中で、「パスワードを入力してください」的な英語が表示されるので入力してEnter(パソコン起動時に求められるあれです。あのパスワードです。)

インストールできたかの確認

①ターミナルを起動
②brew docotorと入力してEnter
③Your system is ready to brew.と表示される。
3章で記載したエラーは、ここで発生します。。。

6.Vimのインストール

ようやくVimのインストールまで来ました。
ここもあっさり終わります。

①ターミナルを起動
②brew install vimと入力してEnter
③ひたすら待つ

使用するVimの確認

現時点では、標準搭載のVimとHomebrewからインストールしたVimの2つがMacに入っています。
他人「あれ？ターミナルからVimを起動したとき、どっちのVimが起動されんの？ 」 僕「おっと、確かに。。。」

どっちのVimが使われているか確認しましょう！

①ターミナルを起動
②which vimと入力してEnter
③-1/usr/local/bin/vimと表示される→HomebrewからインストールしたVim
③-2/usr/bin/vimと表示される→標準搭載のVim→④へ
④export PATH="/usr/local/bin:$PATH"と入力してEnter
⑤which vimと入力してEnter
⑥/usr/local/bin/vimと表示されれば完了

7..vimrcの設定

.vimrcとはvimの設定ファイル。
設定ファイルをいじくれば、行数を表示したり、文字に色を付けたり(シンタックスハイライト)できます。
全然関係ないけど、シンタックスハイライトって言葉かっこよくないですか？シンタックスシュガーもかっこいい。言いたくなる。

.vimrcの設定方法

①ターミナルを起動
②vim ~/.vimrcと入力してEnter
③設定する

こちら僕の.vimrcの設定。 サイト調べながら適当に設定しただけなので、使わない設定が入っています。
近々、ちゃんと設定を調べて自分だけの.vimrcを作りたいと思います。
「vimrc 設定 見せてだくさい」とかで検索するといろんなお方々の.vimrcが見れる思うので、それらを参考にしながら、自分だけの.vimrcを作っていくと自分だけのVim感が出て、良い感じにドヤれます。

"文字コードをUTF-8に設定する
set fenc=utf-8
"タイトルウィンドウ枠に表示する
set title
"コードの色分けする
syntax on
"折り返ししない
set nowrap

 "検索した結果に色が付く
set hlsearch
"大文字/小文字区別なく検索する
set ignorecase
"検索文字列に大文字が含めれている場合は区別して検索する
set smartcase
"改行時に半角スペースを8文字を自動挿入する
set autoindent
”カーソルが何行目の何文字目にあるかを表示する
set ruler
"行番号を表示する
set number
"空白を可視化
set list
"コマンドラインモードでファイル名補完を有効にする
set wildmenu
"入力中のコマンドを表示する
set showcmd
”shiftwidthオプションを有効にする
set smarttab
"vimが自動生成するtab幅をスペース4つ分にする
set shiftwidth=4
"連続した空白に対してtabキーが動く幅
set softtabstop=4
"tabを半角スペースで挿入する
set expandtab
"インデントをスペース4つ分に設定
set tabstop=4

※.vimrcは隠しファイルなので、Finderから見ることはできません。(隠しファイルを表示する設定にすれば見られます。)
ターミナルを起動して、ls -aと入力してEnterすれば「.vimrc」ファイルが表示されるので、そこでファイルが作られたか確認できます。

8.NeoBundleのインストール

emmet-vimをインストールするためにはNeoBundleというプラグインを管理するプラグインをインストールする必要があります。
プラグインを管理するプラグイン、、、意味分かんないですね。
プラグインを簡単にインストールしたり、最新版にアップデートしたり、GitHubから直接インストールしたりできるとっても便利なツールって感じですかね。
なので早速インストールしましょう！

①ターミナルを起動
②以下を入力しEnter(コメントの部分は入力不要)

"WEBサイト(GitHub)からinstall.shというファイルを取得してカレントディレクトリのinstall.shを上書きする
curl https://raw.githubusercontent.com/Shougo/neobundle.vim/master/bin/install.sh > install.sh
"カレントディレクトリのinstall.shを実行
sh ./install.sh

※curl
指定したURLに対してHTTPリクエストを送るためのコマンド 今回の場合は「install.shちょうだい！」とHTTPリクエストをしています。

※sh
シェルスクリプトを実行するコマンド

9.emmet-vimのインストール

やっとここまできた。長かった。まじで。
よし。そっこーで終わらす！

①ターミナルを起動
②vim ~/.vimrcと入力してEnter
③最後の行より下に以下を追加
NeoBundle 'mattn/emmet-vim'がemmet-vimをインストールするための記述

"Note: Skip initialization for vim-tiny or vim-small.
 if 0 | endif

  if has('vim_starting')
         if &compatible
                  set nocompatible               " Be iMproved
         endif

         " Required:
         set runtimepath+=~/.vim/bundle/neobundle.vim/
        endif
         " Required:
         call neobundle#begin(expand('~/.vim/bundle/'))
        " Let NeoBundle manage NeoBundle
         " Required:
         NeoBundleFetch 'Shougo/neobundle.vim'

         "※emmet-vimをインストールするための記述
         NeoBundle 'mattn/emmet-vim'

         " My Bundles here:
         " Refer to |:NeoBundle-examples|.
         " Note: You don't set neobundle setting in .gvimrc!

          call neobundle#end()

          " Required:
         filetype plugin indent on

        " If there are uninstalled bundle found on startup,
        " this will conveniently prompt you to install them.
         NeoBundleCheck

④Escキーを押してInsertモードから撤退
⑤:NeoBundleInstallと入力してEnter(ファイルを保存するときの「:w」と同じ感覚で)

10.動作確認

よし！これで全てのインストール作業が完了！ 最後のhtmlの記述が爆速になるか確認！！

①ターミナルを起動
②vim index.htmlと入力してEnter(indexの部分は何でも大丈夫。)
③Insertモードで、<!>と入力する
④controlキーとYキーを同時に押す
⑤,(カンマ)キーを押す
⑥歓喜！！！！！！(どうなるかはご自身の目でお確かめあれ。)

※Yキーの部分は変更できます
.vimrcの一番下の行に以下を加えれば変更できるので、良かったらお試しください。
let g:user_emmet_leader_key = '<C-f>'
ちなみに僕は「control+f」にしました。(小指と人差し指で快適)

11.余談

くまのからあげさんの記事を見て、Slackのカスタマイズに興味が湧いてきました。
まずBot作りからやってみようと思います！笑

kuma-no-kara-age.hatenablog.com kuma-no-kara-age.hatenablog.com

TO BE CONTINUED