無料オーサリングツール「Brackets」のEmmetをいじってみた


タイトルの通り。
Bracketsという便利なオーサリングツールがAdobeから無償で出されていて、そいつの可能性を模索するため、いろいろ設定をいじったり書き換えたりを頑張っています。

まだまだ日本語文献が少なくて困っていますが、少しでも役に立てれれば…。

1.Emmet変換時のキーを変更する

自分はEmmetの変換は「Ctrl+Shift+X」という妙なキーで行います。
なので通常の変換のキーバインドから変えなければなりませんでした。
ちなみにBracketsのEmmetの通常時の変換のキーバインドは「Crrl+Alt+Enter」です。
自分は変換に両手を使用する状態を避けているので上記のような変換をしています。

そして変更をする方法ですが、だいたいの場合、「Brackets Key Remapper」というプラグインを入れるようにする文献が多いですね。

ただまあ自分の場合はどういうわけか、直接Emmetの設定ファイルを編集しました(笑)
もしかしたらアップデートなどで設定を戻されるかも知れないので、推奨されない方法なのかも知れませんね。

編集する対象は
C:\Users\(あなたのPCのユーザーフォルダ名)\AppData\Roaming\Brackets\extensions\user\brackets-emmet
このフォルダの内部にある「keymap.json」をいじります。

"expand_abbreviation": "Ctrl-Alt-Enter",

となっているのを

"expand_abbreviation": "Ctrl-Shift-X",

に変更するだけです。

2.Emmetのコードスニペットを追加する

自分はHTMLの変換の中に無理やり(w)WordPressの変換を入れています。
まだ模索中なのですが、例えば以下のようなもの。

  • 「php」で変換したら<?php ?>
  • 「imgdir」で変換したら<?php echo get_stylesheet_directory_uri(); ?>/images/

とまあこんなかんじです。後者のほうは仕事で頻繁に使用するので、使えないとちょっとつらい、というところです。

これは以下のファイルをいじって登録します。
※上記の場合も一緒ですけど、元のファイルを必ずバックアップを取るようにしましょう。

編集する対象は
C:\Users\(あなたのPCのユーザーフォルダ名)\AppData\Roaming\Brackets\extensions\user\brackets-emmet\node_modules\emmet\lib
このフォルダの内部にある「snippets.json」です。

670行目あたりからHTMLに関する変換が載っています。

"html": {
		"filters": "html",
		"profile": "html",
		"snippets": {
			"!!!":    "<!DOCTYPE html>",
			"!!!4t":  "<!DOCTYPE HTML PUBLIC \"-//W3C//DTD HTML 4.01 Transitional//EN\"
                        // ・・・以下続く

ここにこんな感じで入れてあげます。

"html": {
		"filters": "html",
		"profile": "html",
		"snippets": {
            "php": "<?php ?>",
            "imgdir": "<?php echo get_stylesheet_directory_uri(); ?>\/images\/",
			"!!!":    "<!DOCTYPE html>",
			"!!!4t":  "<!DOCTYPE HTML PUBLIC \"-//W3C//DTD HTML 4.01 Transitional//EN\"
                        // ・・・以下続く

自分はあまりJSONファイルの書き方は分からないのですが(汗)「/(スラッシュ)」はエスケープしないといけないようなので、「\(逆スラッシュ)」を入れてあります。

とりあえず動いたので、まずはこんなかんじで。
分かってきたことを随時掲載したり、逆に分からないことも載せていけれればいいなと思います(;・∀・)

参考にさせていただきました!
Adobeのbracketsでemmetのcharsetをenからjaにする手順(Windows) – WEBデザインアクセント様
Brackets おすすめエクステンション集・解説 – Qiita

コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です

This blog is kept spam free by WP-SpamFree.