コーディング作業を加速する Sublime Text活用法 #SublimeText

自分が使いやすい環境を作る

コーディングに適したフォントを設定する

コーディングにおいてフォントは作業効率を決める重要な要素です。人によって好みは異なりますが、ここではプログラミング用フォントの「Ricty Diminished」を設定してみます。

以下のURLから「Ricty Diminished」をインストールする
https://github.com/yascentur/RictyDiminished
[Sublime Text]→[Preferences]→[Settings - User]からフォントを設定する（下記参照）

Preferences.sublime-settings

{
    "font_face": "Ricty Diminished",
    "font_size": 16
}

（2015年6月23日追記）
「コーディングに最適な日本語対応の等幅フォントSource Han Code JPとは – ICS LAB」を読んで、コーディング用のフォントを「Source Han Code JP」に変えました。このフォントもオススメです。

自分に合ったカラースキームを設定する

メニューから[Sublime Text]→[Preferences]→[Color Scheme]を選択すると、カラースキーム（「テーマ」とも呼ばれている）を選ぶことができます。デフォルトで用意されているカラースキームだけで22種類もあります。
その他にもPackage Controlからカラースキームをインストールすることも可能です。デフォルト以外でカラースキームを探すには、以下の記事が参考になります。

コーディングを省力化する

パッケージをインストールする

Emmet

Emmetは、省略記号を用いてHTMLやCSSを記述することによって、コーディングを高速化するプラグインです。Emmetの省略記号はCheat Sheetに記載されています。また、自分が使いやすいようにカスタマイズすることも可能です。

AutoFileName

href属性やsrc属性でファイルを指定する際に、ファイル名やディレクトリ名の候補を出力してくれます。詳細は、SublimeTextパッケージ紹介：AutoFileName - Qiitaが参考になります。

パッケージをカスタマイズして便利にする

Emmetでlang属性を設定する

Emmetを使ってhtml:5または!を展開すると、以下のコードが記述されます。

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

</body>
</html>

これでも十分に便利なのですが、htmlのlang属性を毎回"en"から"ja"に書き換える必要があります。その手間を省くために、[Sublime Text]→[Preferences]→[Package Settings]→[Emmet]→[Settings - User]から以下の設定をおこないます。

Emmet.sublime-settings

{
    "snippets": {
        "variables": {
            "lang": "ja",
            "locale": "ja-JP",
        }
    }
}

このように設定しておけば、lang="ja"で出力されるようになります。

独自のEmmetのコードを追加する

Emmetではユーザーが独自のコードを追加することもできます。例えば、Emmetにはmeta keywordsタグやmeta descriptionタグを出力するコードがないので、これらをEmmetでも利用したければ、先ほどのEmmet.sublime-settingsに以下のように記述します。

Emmet.sublime-settings

{
    "snippets": {
        "variables": {
            "lang": "ja",
            "locale": "ja-JP"
        },
        "html": {
            "abbreviations": {
                "meta:k": "<meta name=\"keywords\" content=\"|\"/>",
                "meta:d": "<meta name=\"description\" content=\"|\"/>"
            }
        }
    }
}

AutoFileNameで挿入されるwidthとheightの順番を入れ替える

AutoFileNameを使って画像ファイルを指定すると、ファイル名と同時に画像のwidthとheightも挿入してくれて便利です。ただ、挿入の順番がheight、widthの順になります。もしwidthを先に記述したければ、Preferences.sublime-settingsに以下のように記述します。

Preferences.sublime-settings

{
    "font_face": "Ricty Diminished",
    "font_size": 16,
    "afn_insert_width_first": true // ←新たに追記
}

スニペットを登録する

よく使うコードをスニペットとして登録しておくと、あとは呼び出すだけで記述をする手間が省けます。スニペットは[Tools]→[New Snippet...]から登録できます。例えば、clearfixをスニペットとして登録したければ、以下のような記述をします。

clearfix.sublime-snippet

<snippet>
    <content><![CDATA[
.clearfix:after {
    content: "";
    clear: both;
    display: block;
}
]]></content>
    <tabTrigger>cf</tabTrigger>
</snippet>

このように設定しておけば、tabTriggerタグで定義した文字列を入力すると、スニペットで登録したコードを呼び出すことができます。