設定を変更する前に
Emmetの設定内容は、JSONファイルで管理されています。JSONファイルは、カッコやカンマが抜けているとエラーになります。正しいJSONの構文を保つためのチェックツールをインストールしましょう。
Bracketsに「JSONLint Extension for Brackets」というプラグインがあります。このプラグインは、JSONファイルを保存した時にエラーがあれば、表示するプラグインです。
もしエラーがあれば、何行目のどこがおかしいかを表示してくれます。Emmetの設定を変更する前に、必ず入れておきましょう。
スニペットの編集準備
まずは、好きなところに設定変更用のフォルダを作成します。今回は「emmet-settings」というフォルダを用意しました。その中に「snippets.json」というファイルを作成しましょう。このファイルにスニペットを記述してデフォルトの設定を上書きします。
作成したsnippets.jsonに、下記のコードをコピー&ペーストして、保存してください。
このコードは、デフォルトの言語を日本語にする変更と、インデントをタブから2スペースに置き換える内容になっています。
| 1 2 3 4 5 6 7 | { "variables": { "lang": "ja", "locale": "ja-JP", "indentation": " " } } |
この設定を適用するため、Bracketsとsnippets.jsonのひも付けを行いましょう。
Bracketsの[Emmet]→[Preferences…]をクリックします。立ち上がったモーダルの「Extensions folder」に、自分で作成した「emmet-settings」フォルダまでの絶対パスを入力してください。
絶対パスは、下記を参考にしてください。「emmet-settings」フォルダをデスクトップに作成した場合の例です。
Windows 7以上
| 1 | C:/Users/ユーザー名/Desktop/emmet-settings |
Mac
| 1 | /Users/ユーザー名/Desktop/emmet-settings |
Emmetにフォルダまでの絶対パスを読み込ませたら、Bracketsを再起動か、[デバッグ]→[拡張機能付きでリロード]を行ってください。編集したsnippets.jsonが適用されているはずです。設定が変更されいるか確認したい場合は、HTMLに「!」と入力して[Tab]キーを押してください。生成されたhtml要素のlang属性が「ja」になっていれば、うまく設定ファイルが上書きされています。
スニペットの追加
本格的にスニペットを追加してみましょう。まずは、Emmetで指定されているスニペットファイルを見てみましょう。
リンク先のファイルにはたくさんのスニペットが用意されており、修正が大変そうに見えますが、JSONファイルの構成はシンプルです。
スニペットに変更を加えたい時は、下記の構成に従って追記や修正を行います。
| 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 | { "variables": { // 言語やインデントの設定 }, "css": { "filters": "css", "profile": "css", "snippets": { // スニペット } }, "html": { "filters": "html", "profile": "html", "snippets": { // スニペット }, "abbreviations": { // 省略記法 } }, "xml": { "extends": "html", "profile": "xml", "filters": "html" }, "xsl": { "extends": "html", "profile": "xml", "filters": "html, xsl", "abbreviations": { // 省略記法 }, "snippets": { // スニペット } } } |
例えばCSS関連のスニペットは、"css"オブジェクトの中のsnippetsの値として記述します。先ほど作成したsnippets.jsonへ、CSSの新しいコメントのルールを加えてみましょう。
| 1 2 3 4 5 6 7 8 9 10 11 12 | { "variables": { "lang": "ja", "locale": "ja-JP", "indentation": " " }, "css": { "snippets": { "cm1": "/* ========= */" } } } |
上記のCSSスニペットを追加したら、保存しましょう。何かが間違っていれば、JSONの構文をチェックするプラグインがエラーを出力します。もしエラーが表示されたら、カッコやコンマの位置が正確か確認しましょう。
無事保存できたら[デバッグ]→[拡張機能付きでリロード]をクリックして、Emmetをリロードさせます。面倒ですが、設定ファイルに何らかの変更を行った場合は、必ずリロードの動作を行ってください。
CSSファイルで「cm1」と入力して[Tab]キーを押すと、作成したスニペットが展開されるようになりました。しかし、このままでは「cm1」を展開するとカーソルが行末になっています。「/* 」の直後からすぐに書き始めたい時は、カーソル位置を制御するか、またはプレースホルダーを定義して対応します。
カーソル位置の制御は、「|」を使用します。「cm2」というスニペットでは「|」を追加しており、スニペットの展開後は、「|」がある場所にカーソルが移動します。
プレースホルダーは何らかの文字を設定しておく機能です。スニペットを展開すると設定された文字列が選択された状態で展開されます。「cm3」では「${1:}」という記号の中に設定された「comment」という文字列が選択された状態で展開されます。
| 1 2 3 4 5 6 7 8 9 10 11 12 13 14 | { "variables": { "lang": "ja", "locale": "ja-JP", "indentation": " " }, "css": { "snippets": { "cm1": "/* ========= */", "cm2": "/* | ========= */", "cm3": "/* ${1:comment} ========= */" } } } |
スニペットの追加を行う時は、状況にあわせて、カーソルの制御やプレースホルダーの設定を行いましょう。
スニペットの編集
Emmetのデフォルトのスニペットを上書きしましょう。Emmetのスニペットは、上でも紹介したGitHubページのsnippets.jsonから確認できます。
ここでは、HTMLのimg要素を展開した時に、src属性にパスが出るようにしてみましょう。変更したい要素がある場所を、Emmetのスニペットから検索します。
Emmetのデフォルトのスニペット 抜粋
| 1 2 3 4 5 6 7 | ... "img": "<img src=\"\" alt=\"\" />", "img:s|img:srcset": "<img srcset=\"\" src=\"\" alt=\"\" />", "img:z|img:sizes": "<img sizes=\"\" srcset=\"\" src=\"\" alt=\"\" />", "picture": "<picture>", "src|source": "<source/>", ... |
img要素の記述は、[html]-[abbreviations]の中にあるのでその構造を保ったまま、自分で作成したsnippets.jsonに、省略記法と展開後の要素を記述しましょう。下記のコードではプレースホルダーを利用してパスの記述を追加してみました。
snippets.jsonを保存して、[デバッグ]→[拡張機能付きでリロード]からEmmetを再起動させると、img要素のsrc属性にパスがついた状態で展開されます。
Emmetのスニペットの構造を保ったまま、任意のスニペットを追記する
| 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 | { "variables": { "lang": "ja", "locale": "ja-JP", "indentation": " " }, "css": { "snippets": { "cm1": "/* ========= */", "cm2": "/* | ========= */", "cm3": "/* ${1:comment} ========= */" } }, "html": { "abbreviations": { "img": "<img src=\"${1:images/}\" alt=\"\" />" } } } |
スニペットの編集（HTMLタグの組み合わせ）
スニペットの[html]-[abbreviations]の中では、Emmetの記法がそのまま記述できます。
短縮記法で追記できるので、よく使うパターンを登録しておけば、コーディングの時間短縮にもつながります。Emmetのスニペットを参考にして登録しておくといいでしょう。下記の例では、「pre+」と「grid」を追加しました。
Emmetのデフォルトのスニペット 抜粋
| 1 2 3 4 5 | "ol+": "ol>li", "ul+": "ul>li", "dl+": "dl>dt+dd", "map+": "map>area", "table+": "table>tr>td", |
Emmetにスニペットを登録する
| 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 | { "variables": { "lang": "ja", "locale": "ja-JP", "indentation": " " }, "css": { "snippets": { "cm1": "/* ========= */", "cm2": "/* | ========= */", "cm3": "/* ${1:comment} ========= */" } }, "html": { "abbreviations": { "img": "<img src=\"${1:images/}\" alt=\"\" />", "pre+": "pre>code", "grid": ".row>.grid*2" } } } |
シンタックスを変更する
ここまでは短縮記法の編集方法などを学びました。最後に出力の変更方法について解説します。
展開の形式には、それぞれプロファイルというものが設定されています。このプロファイルを編集すれば、出力をHTMLからXHTMLに変更することも可能です。
下記のhtmlの項目のprofileを「html」から「xhtml」に変更してみましょう。
| 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 | { "variables": { "lang": "ja", "locale": "ja-JP", "indentation": " " }, "html": { "filters": "html", "profile": "xhtml", "abbreviations": { "img": "<img src=\"${1:images/}\" alt=\"\" />", "pre+": "pre>code", "grid": ".row>.grid*2" } } } |
「xhtml」の変更を有効にすると、img要素に終端スラッシュが追加されるようになります。
また、filtersを「html」から「jade」に変更してみてください。出力がHTMLメタ言語のjadeに変わります。
CSSの出力を細かく設定する
EmmetはCan I Useからベンダープレフィックスのデータを取得していますが、何らかの変更を加えるたびに、毎回EmmetのReflect Value機能を使って、値を適用させるのは面倒です。Emmetではベンダープレフィックスを出力せずに、autoprefixerというツールを利用して、ベンダープレフィックスの出力を任せる方法もあります。
このようなケースなども想定して、CSSの出力を変更してみましょう。まずは、snippets.jsonを作成した同じ場所に、「preferences.json」を作成します。作成したpreferences.jsonに、下記の記述をコピー&ペーストしてください。
保存したら[デバッグ]→[拡張機能付きでリロード]をクリックして、Emmetを再起動してください。animationやtransformプロパティでも、ベンダープレフィックスが表示されなくなります。
| 1 2 3 | { "css.autoInsertVendorPrefixes": "false" } |
このようなオプションの設定は、公式ドキュメントの「preferences.json」に書いてあります。公式にはCSSだけではなくHTMLに関する記載もありますが、CSSで利用する可能性のあるもの抜粋して記載します。
| オプション | デフォルト値 | 説明 |
| caniuse.enabled | true | Can I Useのデータベースを利用するか |
| caniuse.era | e-2 | e0 (最新のブラウザ)、e1 (一つ前までのブラウザをサポート)、e-2 (2つ前までのブラウザをサポート) |
| css.autoInsertVendorPrefixes | true | ベンダープレフィックスを生成するか。先頭にハイフンを設置して展開する場合（例えば-bxsh）は、例外なくベンダープレフィックスを生成します。 |
| css.color.short | true | #ffffff などの色を、#fff に短縮して展開するか |
| css.floatUnit | em | 小数点を含むデフォルトの単位 |
| css.gradient.fallback | false | グラデーションを利用した時に、古いブラウザのためbackground-colorプロパティを追加するか |
| css.intUnit | px | デフォルトの単位 |
| css.syntaxes | css, less, sass, scss, stylus, styl | CSSとして扱われるシンタックスの一覧 |
| css.unitlessProperties | z-index, line-height, opacity | 単位を必要としないプロパティ |
| less.autoInsertVendorPrefixes | false | LESS構文でベンダープレフィックスを出力するか |
| sass.autoInsertVendorPrefixes | false | Sass構文でベンダープレフィックスを出力するか |
| scss.autoInsertVendorPrefixes | false | SCSS構文でベンダープレフィックスを出力するか |
| styluss.autoInsertVendorPrefixes | false | Stylus構文でベンダープレフィックスを出力するか |
| stylus.propertyEnd | CSSプロパティの末尾に配置するシンボルを定義 | |
| stylus.valueSeparator | (スペース) | CSSプロパティと値の間に配置するシンボルを定義 |
0 件のコメント:
コメントを投稿