[O]Coda2でEmmetの拡張キーやらスニペットを変更する方法

Coda2Emmet

かろうじてCoda2でコーディングを行なっております、Olein編集長(@Olein_jp)です。

以前、Coda2に入れたEmmetプラグインの拡張するキーやスニペットの内容を変更する方法をメモしておきます。よく忘れるんだよね。

おさらい

以前、こんな記事を書いていました。

[O]Coda2でEmmetを使えるようにプラグインを入れてみた

Coda2でEmmetを使いたい方はこちらを参照してみてください。

EmmetをTabキーで拡張できるようにする

基本設定としては、control+EでEmmetが拡張されるようになっています。けれど、僕自身が慣れていないのかどうも使いにくいのです、control+Eが。

なので、Sublime text 2と同じように、tab
でEmmetを拡張できるように設定します。

といっても、超絶簡単なんですけどね。

Coda2Emmet1
まずは、【プラグイン】▶【Emmet】▶【Preference】に進んで設定します(この設定があることを今まで知りませんでした……)

Coda2Emmet
そして、この赤枠で囲んである部分にチェックを入れるだけです。ええ、それだけです。

これで、例えば
[html] html:5(ここでtabキーを押す)
[/html]

こう入力して、tabを押すと、

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

</body>
</html>
[/html]

こう拡張されます。超絶便利ですよね?

Emmetについて色々書かれている記事はありますが、僕はkojikaさんの記事が抜群にわかり易かったです。

Emmetのスニペットを変更してみる

先ほど拡張されたhtmlですが、ちょっと気に入らない部分もありますよね?例えばここ。
[html firstline=”2″] <html lang="en">
[/html]

できればこうしたいですよね?
[html firstline=”2″] <html lang="ja">
[/html]

そのような部分はちょくちょくあるものです。そして、それとは別にスニペットを追加したい時もあります(今回は追加の方法は説明しません)。

では、どう変更するのか。こんなかんじです。

Emmetのプラグインへ

【Finder】▶【移動】(optionキーを押すと)▶【ライブラリ】が表示されます。

そして、【Application Support】▶【Coda2】と進むとプラグインフォルダを発見することができます。

Coda2Emmet2

そして、この「Emmet.codaplugin」を右クリックして【パッケージの内容を表示】をクリックします。

すると…

Coda2Emmet3

この「Snippets.json」をCoda2もしくは適当なテキストエディタで開きます。

スニペットの内部(JSONファイル)を変更する

では、JSONの設定ファイルの中を見てみましょう。色々と定義されていますが、HTML関連の定義は497行目あたりからはじまります。

[html firstline=”497″] "html": {
"filters": "html",
"profile": "html",
"snippets": {
"c": "<!– |${child} –>",
"cc:ie6": "<!–[if lte IE 6]>nt${child}|n<![endif]–>",
"cc:ie": "<!–[if IE]>nt${child}|n<![endif]–>",
"cc:noie": "<!–[if !IE]><!–>nt${child}|n<!–<![endif]–>",
"html:4t": "<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">n<html lang="${lang}">n<head>nt<meta http-equiv="Content-Type" content="text/html;charset=${charset}">nt<title>${1:Document}</title>n</head>n<body>nt${child}${2}n</body>n</html>",
"html:4s": "<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">n<html lang="${lang}">n<head>nt<meta http-equiv="Content-Type" content="text/html;charset=${charset}">nt<title>${1:Document}</title>n</head>n<body>nt${child}${2}n</body>n</html>",
"html:xt": "<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">n<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="${lang}">n<head>nt<meta http-equiv="Content-Type" content="text/html;charset=${charset}" />nt<title></title>n</head>n<body>nt${child}${2}n</body>n</html>",
"html:xs": "<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">n<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="${lang}">n<head>nt<meta http-equiv="Content-Type" content="text/html;charset=${charset}" />nt<title>${1:Document}</title>n</head>n<body>nt${child}${2}n</body>n</html>",
"html:xxs": "<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">n<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="${lang}">n<head>nt<meta http-equiv="Content-Type" content="text/html;charset=${charset}" />nt<title>${1:Document}</title>n</head>n<body>nt${child}${2}n</body>n</html>",
"html:5": "<!doctype html>n<html lang="${lang}">n<head>nt<meta charset="${charset}">nt<title>${1:Document}</title>n</head>n<body>nt${child}${2}n</body>n</html>"
},
[/html]

その中の先ほどのhtml:5の記述は510行目から始まります。

[html] "html:5": "<!doctype html>n<html lang="${lang}">n<head>nt<meta charset="${charset}">nt<title>${1:Document}</title>n</head>n<body>nt${child}${2}n</body>n</html>"
[/html]

ん?${lang}ってなんじゃろか?

なるほど。JSONの冒頭部分で言語を一括して設定しているんですね、はいはい。

ということで、このファイルの冒頭の部分を見てみると、

[html firstline=”2″] "variables": {
"lang": "en",
"locale": "en-US",
"charset": "UTF-8",
"indentation": "t",
"newline": "n"
},
[/html]

ありましたね。3行目にlangが定義されています。

[html firstline=”3″] "lang": "en",
[/html]

こちらを

[html firstline=”3″] "lang": "ja",
[/html]

に変更してあげればスニペットの変更は完了です。(ついでにロケールも変えておいてもいいです)

まとめ

最初はちょっとややこしいと感じる部分もあるかと思いますが、よーくコードとにらめっこすると分かってくると思います。こんなん怖くて弄れねぇ、って方は大元のファイルをどこか別に保存しておいてから変更を加えたほうがいいかもしれませんね。