BracketsのEmmetをカスタマイズしてより使いやすくする
WEB制作に特化したテキストエディタのBracketsではEmmetを拡張機能から簡単にインストールして利用できますが、まだ隠された機能があるのでそれを有効にすることと もっと使いやすいようにカスタマイズする事でより使いやすくなります。
BracketsのEmmetをカスタマイズする
すでにBracketsにはEmmetが導入されているというところから進めます。
日本語をデフォルトにする
Emmetのデフォルトが英語になっていますので HTMLのひな形を展開したりすると言語が英語で指定されているので毎回日本語に指定し直すのが面倒ですので 日本語をデフォルトとします
設定が書かれているファイルを探します (Windows 7 でのケース)
Bracketsを起動 > ヘルプ > 拡張機能のフォルダを開く > user > brakets-emmet > node_modules > emmet > lib > snippet.json
snippet.json を開きます。
variables というところが有りますので、そこを以下のように日本語環境に変更し保存します。
"variables": {
"lang": "ja",
"locale": "ja-JP",
"charset": "UTF-8",
"indentation": "\t",
"newline": "\n"
},
HTMLでIDとCLASSのあるものが展開された時に自動でコメントを付けるようにする
次に行うカスタマイズは、HTMLタグでIDやCLASSが付いている時に自動的にその閉じタグの終わりにコメントを付けるようにする設定を有効にします。デフォルトでは無効になっているので有効化します
例えば以下を展開した場合
div#test
コメントが無効の場合
<div id="test"></div>
コメントが有効な場合
<div id="test"></div> <!--/#test-->
自動コメントを有効にする
設定を変更するには日本語化したときと同じファイルで設定を変更出来ます
Bracketsを起動 > ヘルプ > 拡張機能のフォルダを開く > user > brakets-emmet > node_modules > emmet > lib > snippet.json
snippet.json を開きます。
以下のような箇所があるので、filtersのところの html を html.c に変更します
"html": {
"filters": "html,c",
"profile": "html",
さらに、次のようにコメントの表示を改行無しにしたい場合
<div id="test"></div><!--/#test-->
設定ファイルは以下の場所にあります
Bracketsを起動 > ヘルプ > 拡張機能のフォルダを開く > user > brakets-emmet > node_modules > emmet > lib > filter > comment.js
設定ファイルの以下の箇所を探します
prefs.define('filter.commentAfter',
'\n<!-- /<%= attr("id", "#") %><%= attr("class", ".") %> -->',
\nのところを削除してやれば、改行がなくなります。
prefs.define('filter.commentAfter',
'<!-- /<%= attr("id", "#") %><%= attr("class", ".") %> -->', //先頭から \n を削除
独自の展開文を作る
日本語のデフォルト化、コメントの有効化ときて 最後は独自の展開文をEmmetに組み込みます。たとえば ! 一文字を展開すると、日本語化が済んでいればこのようになりますね
<!DOCTYPE html> <html lang="ja"> <head> <meta charset="UTF-8"> <title>Document</title> </head> <body> </body> </html>
例えばこれによく利用する jQuery とか fontawesome、CSS、javascript、viewportとかを予め入れておけば楽ですよね。これも今までに登場した snippets.json で設定する事が可能です。
以下のような場所があるので abbrviations のところに追加する事が可能です。最初のhtmlのところはファイルがHTMLの時のEmmetの動作という意味になります
"html": {
"filters": "html,c",
"profile": "html",
"snippets": {
-- 省略 --
},
"abbreviations": {
"!": "html:5",
-- 省略 --
}
追加する中に展開文自体を使うことも可能です 「!」 の場合は html:5 が中身です。さらに html:5 は !!!+doc[lang=${lang}] が元になっています という具合に中身が連鎖してますので、あたらに追加するものもすでに定義済みの展開文を使って書くことが出来ます。
例えば よく使うひな形を !! として次のように追加しました
"!!": "!!!+html[lang=${lang}]>(head>meta[charset=${charset}]+meta[name=viewport content=initial-scale=1.0]+title{${1:Document}}+link[href=./css/main.css]+link[href=//maxcdn.bootstrapcdn.com/font-awesome/4.3.0/css/font-awesome.min.css]+script[src=//code.jquery.com/jquery-1.11.3.min.js]+script[src=./js/main.js])+body",
!!で展開すると次のようになる
<!DOCTYPE html> <html lang="ja"> <head> <meta charset="UTF-8"> <meta name="viewport" content="initial-scale=1.0"> <title>Document</title> <link rel="stylesheet" href="./css/main.css"> <link rel="stylesheet" href="//maxcdn.bootstrapcdn.com/font-awesome/4.3.0/css/font-awesome.min.css"> <script src="//code.jquery.com/jquery-1.11.3.min.js"></script> <script src="./js/main.js"></script> </head> <body> </body> </html>
他にもWordpressのテーマ製作用や、bootstrap用のものなどを作っておくと便利かと思います。
最後にBracketsをF5でリロードするか、デバッグ > 拡張機能付きでリロードで設定した Emmet へと更新されます
COMMENT