【Mac】Emmetをインストール&カスタマイズ

HTMLとCSSの入力を効率化出来るEmmetの存在を知ったので、導入してみました。

デフォルトだと展開のショートカットがcmd+e,展開されたインデントがタブでしたので、こちらをショートカット→Tab,インデント→半角スペース2個にしました。
Dreamweaverのショートカットメニューではcmd+eをTabへ変更できなかったため、設定ファイルを直接編集しました。Sublime Textの場合も、設定ファイルを直接編集しました。

手順は以下のとおりでした。

Dreamweaver

1.右記のサイトからDreamweaver用のファイルをダウンロードします。Download
2.ダウンロードしたEmmet.zxp をダブルクリックすると、Extension Manager にインストールされます。

Sublime Text 2 (マニュアルでダウンロードファイルを配置する方法もある様ですが、今回は以下の手順で行いました。)

1.Package Controlを導入する(以下のサイトを参考にしました。)
Sublime Text 2 に Package Control を導入する - xykの日記
2.「View > Show Console」を選択後、以下の文章を入力するとPackage Controlのインストールが完了する。

mport urllib2,os; pf='Package Control.sublime-package'; ipp = sublime.installed_packages_path(); os.makedirs( ipp ) if not os.path.exists(ipp) else None; urllib2.install_opener( urllib2.build_opener( urllib2.ProxyHandler( ))); open( os.path.join( ipp, pf), 'wb' ).write( urllib2.urlopen( 'http://sublime.wbond.net/' +pf.replace( ' ','%20' )).read()); print( 'Please restart Sublime Text to finish installation') 

3.Package Controlのインストール終了後、「cmd+shift+p」を入力してPackage Controlを呼び出す。
4.出てきた入力欄に「Emmet」 と入力
5.しばらく待つ（下部のステータスバーに進捗状況が表示される）
6.Emmetを選択するとインストールが始まる
7.インストール終了後、Sublime Test 2を再起動するとEmmetがインストールされている状態になる。

ライブラリ

Finderの移動メニュー表示時にOptionを押すと表示されます。

ショートカットキーとスニペットを変更します。

Dreamweaverの場合

▼ショートカットキーの変更
1.Menu.xmlをテキストエディタで開きます。
ディレクトリ:(User)>ライブラリ>Application Support>Dreamweaver**>ja_JP>Configuration>Menus>Menus.xml
2.Expand Abbreviationと検索して、該当箇所にジャンプします。
3.展開のショートカットキーがcmd+eに設定されているので、Tabへ変更します。

↑　key="Tab"に変更

▼スニペットの変更
1.snippets.jsをテキストエディタで開きます。
ディレクトリ:User)>ライブラリ>Application Support>Dreamweaver xx>ja_JP>Configuration>Commands>Emmet>snippets.js
2.該当箇所を以下のように編集しました。

emmet.require('bootstrap').loadSystemSnippets({

	"variables": {

		"lang": "ja",

		"locale": "ja-JP",

		"charset": "UTF-8",

		"indentation": "  ",←半角スペース2つに変更

		"newline": "\n"

	}

Sublime Text 2の場合

▼ショートカットキーの変更
1.Default(OSX).sublime-keymapをテキストエディタで開きます。
ディレクトリ:(User)>ライブラリ>Application Support>Sublime Text 2>Packages>Emmet>Default (OSX).sublime-keymap
2.該当箇所を検索後、以下のように編集しました。

{

        "keys": [

            "Tab"

        ], 

        "args": {

            "action": "expand_abbreviation"

        }, 

        "command": "run_emmet_action", 

        "context": [

            {

                "key": "emmet_action_enabled.expand_abbreviation"

            }

        ]

    }

▼スニペットの変更
1.snippets.jsonをテキストエディタで開きます。
ディレクトリ:(User)>ライブラリ>Application Support>Sublime Text 2>Packages>Emmet>emmet>snippets.json
2.該当箇所を以下のように編集しました。

{

	"variables": {

		"lang": "ja",

		"locale": "ja-JP",

		"charset": "UTF-8",

		"indentation": "  ",←半角スペース2つに変更

		"newline": "\n"

	}

保存後に起動をすると、設定が反映されていると思います。
以上で、自分が使いやすいように変更できました。