読者です 読者をやめる 読者になる 読者になる

tamlog

主にwebのフロント回り たまに登山

もっとコーディングが早くなる「Emmet」の環境設定(coda2)

スポンサーリンク

個人的に「Emmet」を使うのが最速な感じなこの頃ですが、みなさんはどのようなツールを使ってますか?

「Zen-Coding」の次期バージョンで「Emmet」としてベータ版開発が進んでいるみたいです。 Emmet v1.0がリリースしましたね!

簡単に言うと「Zen-Coding」の強化版ですね。 CSSのスニペット、ショートカットキーなど強化されているのが嬉しい点です。 「Dreamweaver」で「Emmet」が使えると嬉しいのですが、「Dreamweaver」は「Zen-Coding」のプラグインのみで「Emmet」のプラグインはまだ無いみたいです。 Dreamweaverのプラグインが公開されていますね! 「Emmet」は「Zen-Coding」より更に魅力的な機能があるので、「Coda2」に「Emmet」をインストールしましたのでまとめです。

1, 準備
2, プラグインをインストール
3, 設定変更

1, 準備

まずは「Coda2」に「Emmet」をインストールする準備ですが、 「Coda2」で「Zen-Coding」を使うのにインストールしていた「TEA for Coda」が、「Emment」と共存出来ないので、削除します。

command+sift+Gで以下を入力してTEA for Coda.codapluginを削除

2, プラグインをインストール

https://github.com/emmetio/Emmet.codapluginからzipをダウンロードします。 ダウンロードしたファイルをEmmet.codaplugin-masterEmmet.codapluginへ変更し、ダブルクリックするとインストール完了です。 インストール場所は以下

/Users/(ユーザー名)/ライブラリ/Application Support/Coda 2/Plug-ins


以上でインストールは完了です。 これで「Coda2」で「Emment」を使えるようにりました。

3, 設定変更

「lang」属性を英語から日本語に変更します。 その他オプション

/Users/(ユーザー名)/ライブラリ/Application Support/Coda 2/Plug-ins/Emmet.codaplugin/Contents/Resources/snippets.json
    {
    "variables": {
        "lang": "en", ここを変更→ "lang": "ja",
        "locale": "en-US", ここを変更→ "locale": "ja-JP",
        "charset": "UTF-8",
        "indentation": "t",
        "newline": "n"
    },

これで「展開」時に日本語で「展開」されます。