タグ別アーカイブ: vim

Vimって☆Emmetさん

タグ: , | 投稿日: 投稿者:

どうも、ニタです。先日、社内でEmmet(Zen Conding)を紹介する機会がありました。
当日は、IDEやテキストエディタのアプリ上でデモを行ったのですが、vimmerが多いせいか、そもそもHTMLコーディングをする機会が少ないのか、あまり採用されてない感じです(´・ω・`)
そこで今回は、vimでEmmetを使えるようにしてみます。

Emmetって何?

Emmetは、HTMLやCSSのコーディングを効率化してくれるツールです。
テキストエディタやIDE上でショートカットコードを打つと、HTMLやCSSに転換されます。

Emmet

Zen Codingというのもあります

Emmentで検索すると「Zen Coding」というのも出てきます。これはEmmetの前身となるプロジェクトで、EmmetはZen Codingを基に作られており、Zen Codingの改良版と言って良いでしょう。

閑話休題。実際にEmmetを使ってみましょう。

html:5

Emmetのプラグインが入ったエディター上で、こんな感じに入力して展開させると…

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
</head>
<body>
    
</body>
</html>

こんな感じに一気にHTMLコードができちゃう!
更に…

(div#content-id$$$.page-content-class>h1+h2)*2

独自記法を使ってタグのidやクラスを指定したり、同じ要素をくり返したりも出来ます。

<div id="content-id001" class="page-content-class">
    <h1></h1>
    <h2></h2>
</div>
<div id="content-id002" class="page-content-class">
    <h1></h1>
    <h2></h2>
</div>

繰り返しはループ処理でも書ける場合もありますが、コーディングの高速化と閉じタグや属性を書く手間を最小限に抑えられるのが気に入っています。

VimでEmmetを使えるようにする

さていよいよ本題。
VimでEmmetを使えるようにするには「emmet-vim」というプラグインをインストールします。
このプラグインは、Vimのプラグイン管理ツールのNeoBundleで管理します。NeoBundleに関しては、後日改めて紹介するかもしれません。
取り急ぎ、以下の様にしてNeoBundleとemmet-vimをインストールします。

NeoBunbleとemmet-vimのインストール

NeoBundleは以下のように

# 配置先のディレクトリを作成する
mkdir -p ~/.vim/bundle
cd ~/.vim/bundle

# NeoBundleをgitHubのリポジトリから取得する
git clone git://github.com/Shougo/neobundle.vim

# emmet-vimをgitHubのリポジトリから取得する
git clone https://github.com/mattn/emmet-vim.git 

その後、vimの設定ファイル~/.vimrcを作成してNeoBundleをインストールします。

set nocompatible
filetype plugin indent off

if has('vim_starting')
  set runtimepath+=~/.vim/bundle/neobundle.vim
  call neobundle#rc(expand('~/.vim/bundle'))
endif 

NeoBundleFetch 'Shougo/neobundle.vim'

# 以下は必要に応じて追加
NeoBundle 'Shougo/unite.vim'
NeoBundle 'Shougo/neosnippet.vim'

filetype plugin indent on

また、Mac OSX El Capitanの場合、上記の設定だとインストールできないようです。

# インストール用シェルファイルをダウンロードし、実行
$ curl https://raw.githubusercontent.com/Shougo/neobundle.vim/master/bin/install.sh > install.sh
$ sh ./install.sh

.vimrcの表記も変わります。

" 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'

 " 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 bundles found on startup,
 " this will conveniently prompt you to install them.
 NeoBundleCheck
NeoBundle 'mattn/emmet-vim'

上記を~/.vimrcに追記し、vim上で:NeoBundleInstallというコマンドを実行してプラグインをインストールします。

VimでEmmetしてみる

Vim上でEmmetを実行するには、<C-y>,で行います。control + yのあとカンマ「,」をタイプします。
キーバインドの設定は~/.vimrcで設定します。

# 実行時のキーバインド変更する場合(ここではYからEに変更)
let g:user_emmet_leader_key = '<C-E>'

これでVim上でも高速HTMLコーディングが可能になりました。

それではまた来年!


vim カスタマイズ

タグ: , , | 投稿日: 投稿者:

こんにちは最近、寒波続きで寒いので帰宅途中でコーンポタージュを飲むのが日課になっているモリです。

今回はよく使用しているvimを自分仕様にカスタマイズしているので紹介しようと思います。

紹介する内容はLinux系のOSです。

Windows系ですとやり方が異なるので注意して下さい。

私はカラースキーマ(コードの色分け)と入力、検索の設定をしています。

簡単にできるので、是非してみては如何でしょうか。

注意点として、共有ユーザに対して適用しないようにしましょう~!

やる事

1.vim設定

 a.まずはサーバにログインして、自身のホームディレクトリへ移動します。

 b.「.vimrc」ファイルの作成

  このファイルが設定ファイルになります。

  作成は「vim .vimrc」で作成します。

  c.好みの設定を記述

  基本的に[set]コマンドにて設定していきます。

     設定する内容はたくさんあるので割愛させてもらいますが(汗

  私の設定は以下のようなオーソドックスな感じです。

" ##### 表示設定 #####
" 行番号を表示する
set number
" 編集中のファイル名を表示
set title
" 括弧入力時の対応する括弧を表示
set showmatch
" インデントをスペース4つ分に設定
set tabstop=4
" オートインデント
set smartindent

" ##### カラースキーマ設定 #####
 colorscheme molokai
" コードの色分け
syntax on

" ##### バックスペース設定 #####
" eol    => 行頭で[Backspace]を押したときに行の連結
" indent => オートインデントモードのインデントも削除
set backspace=start,eol,indent

" ##### 入力補完 #####
" コマンドラインモードで[Tab]を押すと、適切な文字を補完したり、補完候補を一覧表示
set wildmenu wildmode=list:full

" ##### 検索設定 #####
" 大文字/小文字の区別なく検索する
set ignorecase
" 検索文字列に大文字が含まれている場合は区別して検索する
set smartcase
" 検索時に最後まで行ったら最初に戻る"
set wrapscan

2.カラースキーマ

 a.カラースキームのダウンロード

  こちらは「vim カラースキーム」等で検索するといっぱい出てきます。

  好みのカラースキームが見つかったら「xxx.vim」ファイルをGETします。

 b.ファイルの設置

  「xxx.vim」ファイルの設置場所はホームディレクトリの「.vim/colors」ディレクトリ配下に置いて終了

 c.適用

  適用は先ほどの「.vimrc」ファイルに記述します。

  ファイル名は拡張子を省いて記載します。

" ##### カラースキーマ設定 #####
 colorscheme [ファイル名]
" コードの色分け
syntax on

★適用前

a

★適用後

b

 

これだけです。

でわでわ!よいvimライフを!!


vimで分割表示

タグ: | 投稿日: 投稿者:

こんにちは。kikuです。

vimは使っていますか?サーバーにssh接続しての操作等でよく使いますよね。

最近のディスプレイは大きいですが、vimを使ってる際に画面を持て余していませんか?
そんな持て余している人は分割表示しちゃいましょう!

まずは左右分割。:vs (:vsplitの略)。
スクリーンショット 2014-06-03 19.45.20

そして上下分割。:sp (:splitの略)。
スクリーンショット 2014-06-03 19.46.11

カーソルを別の分割先に移動させるには、 <c-w>w (コントロール押しながらw → w)。
基本的にはこれだけ覚えておけばOKです。
最近の画面はワイドが基本なのでもっぱら左右分割(:vs)がメインとなるでしょう。
:vs [filename] と開きたいファイルを指定することで、分割しながらファイルを開けます。

分割に分割を重ねるとこんな事も可能です!
スクリーンショット 2014-06-03 20.15.41

ではvim分割ライフをお楽しみ下さいませ。