自分が使いやすい環境を作る
コーディングに適したフォントを設定する
コーディングにおいてフォントは作業効率を決める重要な要素です。人によって好みは異なりますが、ここではプログラミング用フォントの「Ricty Diminished」を設定してみます。
- 以下のURLから「Ricty Diminished」をインストールする
https://github.com/yascentur/RictyDiminished - [Sublime Text]→[Preferences]→[Settings - User]からフォントを設定する(下記参照)
{
"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からカラースキームをインストールすることも可能です。デフォルト以外でカラースキームを探すには、以下の記事が参考になります。
- コードが見やすく使いやすいSublime Text 2/3のテーマのまとめ | コリス
- より見やすく、使いやすくなるsublime textテーマ8つ | 株式会社LIG
- Web制作者のためのSublime Textの教科書 | Facebook
コーディングを省力化する
パッケージをインストールする
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]から以下の設定をおこないます。
{
"snippets": {
"variables": {
"lang": "ja",
"locale": "ja-JP",
}
}
}
このように設定しておけば、lang="ja"
で出力されるようになります。
独自のEmmetのコードを追加する
Emmetではユーザーが独自のコードを追加することもできます。例えば、Emmetにはmeta keywords
タグやmeta description
タグを出力するコードがないので、これらをEmmetでも利用したければ、先ほどの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
に以下のように記述します。
{
"font_face": "Ricty Diminished",
"font_size": 16,
"afn_insert_width_first": true // ←新たに追記
}
スニペットを登録する
よく使うコードをスニペットとして登録しておくと、あとは呼び出すだけで記述をする手間が省けます。スニペットは[Tools]→[New Snippet...]から登録できます。例えば、clearfixをスニペットとして登録したければ、以下のような記述をします。
<snippet>
<content><![CDATA[
.clearfix:after {
content: "";
clear: both;
display: block;
}
]]></content>
<tabTrigger>cf</tabTrigger>
</snippet>
このように設定しておけば、tabTrigger
タグで定義した文字列を入力すると、スニペットで登録したコードを呼び出すことができます。