Emmetをカスタマイズして快適なコーディングライフを送る

スタッフブログ

2018.11.22
Emmetをカスタマイズして快適なコーディングライフを送る

コーダーの方の多くは、コーディングをするときにEmmetを使っていると思います。
僕も使っているのですが「もっとこういう機能があったら便利なのに…」と思うことがあり、機能を少しカスタマイズしました。
なので今回は、Emmetのカスタマイズについてご紹介します。

Emmetとは？

Emmetとは、HTMLやCSSを書くときに省略記法を使って簡単に記述するためのツールです。

例えば、


  #header>nav.g_navi>ul>li*5>a

↑がショートカットキー1つで↓になります。


  <div id="header">
      <nav class="g_navi">
          <ul>
              <li><a href=""></a></li>
              <li><a href=""></a></li>
              <li><a href=""></a></li>
              <li><a href=""></a></li>
              <li><a href=""></a></li>
          </ul>
      </nav>
  </div>

コーディングにかかる時間が、大きく短縮できます。
この機能は多くのエディタに対応してて、プラグインとして追加できます。

Emmetに独自スニペットを追加

スニペットとは、繰り返し登場するコードを登録しておいて、今後すぐに使えるようにする機能のことです。
それを独自で作って登録してしまおうという魂胆です。

僕はBracketsというエディタを使っているので、Bracketsの場合の説明をします。

カスタマイズする方法は色々あるのですが、今回は「snippets.json」ファイルに直接修正を加えました。
Emmetの機能は「snippets.json」で管理されているので、これをいじればカスタマイズできます。
動かなくなるといけないので、事前にバックアップを取っておきましょう。
ファイルは下記フォルダの中に格納されています。

C:\Users\(ユーザーフォルダ名)\AppData\Roaming\Brackets\extensions\user\brackets-emmet\node_modules\emmet\lib

「snippets.json」ファイルを開くと、670行目付近から下記の記述が始まります。
ここに機能を追加していきます。


  "html": {
      "filters": "html",
      "profile": "html",
      "snippets": {
          "!!!": "<!DOCTYPE html>",
          // 色々書いてある…
          // 色々書いてある…
          // ここに追加します！
  },

例えば↓みたいな感じで追加します。


  "html": {
      "filters": "html",
      "profile": "html",
      "snippets": {
      "!!!": "<!DOCTYPE html>",
          // 色々書いてある…
          // 色々書いてある…
          "php": "<?php | ?>",
          "if": "<?php if( | ): ?>\n\n<?php endif; ?>"
  },

「snippets.json」ファイルを保存して、Bracketsを再起動あるいはF5を押して更新しましょう。
HTMLあるはPHPコードを書いているときに下記のショートカットが使えるようになりました。

php

↑が↓になります。


  <?php  ?>

また、

if

↑が↓になります。


  <?php if(  ): ?>

  <?php endif; ?>

PHPで動的サイトを作っていて、ちょっとPHPを書きたいって時に便利ですね。
ちなみに、|（バーティカルバー）が入っていると、その位置にカーソルが自動的にフォーカスされます。「¥n」は改行を意味します。
「この記述、何度も書いているな…」と思ったら、作業効率アップのチャンスです。どんどんスニペットに追加しましょう。