先日、Wordpress編集向けにSublime Textの開発環境を新たに作ってみました。
というのも最近は、Wordpress関係の言語しか触っておらず、その他の言語は使用することがないので、余分な設定やパッケージを一旦整理しようと思ったからです。
ということで今回は、僕がそのとき行ったSublime Text3環境の作成方法の紹介をしたいと思います。
目次
Sublime Text3のダウンロード
まずは、Sublime Text 3からソフトをダウンロードします。
僕は、環境移行のしやすさから、Windows64bit版のSublime Text3ポータブル版を利用しています。
ダウンロードしたら、任意の場所において解凍してください。
解凍したら、フォルダの中の「sublime_text.exe」ファイルを実行してください。
Package Controlのインストール
解凍したら、実行ファイル「sublime_text.exe」を起動します。
メニューの「View」→「Show Console」から、コンソールを開きます。
コンソールを開いたら、Package Controlをインストールするために、Installation – Package ControlからPythonのインストールコードを入手します。
ページ上の「Sublime Text3」タブを選択し、そこに記載してあるパッケージのインストールコードをコピーします。
コードをコピーしたら、Sublime Textのコンソールにペーストし、Enterキーを押します。
パッケージコントロールをインストールした事により、日本語化も行えるようになりました。
日本語化するには、以下のようにすることでできます。
ただ、日本語化するには、少し手順も多くかかるし、Sublime Textに使用されているメニューの英語には、それほど難しい言葉も使われていないので、僕は日本語化しないで利用しています。
ということで、以下では、日本語化していない状態の説明になります。
パッケージのインストール方法
これで、パッケージのインストールとなります。
けれどその前に、パッケージのインストール方法をここでおさらいしておきたいと思います。
パッケージをインストールするには、まずメニューから「Preference → Package Control」を選択します。
すると、以下のようなドロップダウンリストが表示されるので「Package Control: Install Package」を選択します。
すると、以下のような入力ボックスが表示されるので、欲しいパッケージ名を入力して、インクリメンタル検索をし、見つかったらクリックすることで、パッケージがインストールされます。（今回はEmmetを検索した例）
おすすめのパッケージ 15個
以下では、僕がWordpressテーマ開発に利用しているパッケージを紹介するとともに、設定がある場合は設定方法も紹介します。
今回は、前回の環境から、あまり利用しなかったパッケージは省いて、「これだけは必要」と感じたもの、「新たに便利で使い始めたもの」を15個紹介したいと思います。
IMESupport
chikatoike/IMESupport · GitHub
まず、Sublime Textデフォルトの状態では、IMEを使った日本語入力の時には、以下のようなダイアログが出て日本語入力をすることになります。
これが結構邪魔なので、IMESupportをインストールすると、エディターに直接日本語入力をすることができます。
ConvertToUTF8
seanliang/ConvertToUTF8 · GitHub
Sublime Textは、文字コードをUTF-8以外は対応していません。
文字コードが、UTF-8以外のファイルを開くと文字化けしてしまいます。ConvertToUTF8は、UTF-8以外のファイルを開くと自動的に文字コード変更してくれ、保存するときは文字コードを元に戻して保存してくれます。
Emmet
少ないコード記述でHTMLやCSSをザクザク記入できるパッケージです。使い方がわからなくてもチートシートを見ながら使っているうちに、これなしではコードを書く気がなくなります。
All Autocomplete
alienhard/SublimeAllAutocomplete
ただでさえ便利なSublime Textのコード補完機能を、さらに強化するパッケージです。自分で記入した関数や変数なども補完してくれます。
AutoFileName
AutoFileName – Packages – Package Control
こちらは、プロジェクトフォルダ内のファイル名などを補完してくれるパッケージです。images/のようにサブフォルダを指定しても補完してくれ、画像の場合は幅と高さまで表示＆補完してくれます。
wpseek.com WordPress Developer Assistant
wpseek.com WordPress Developer Assistant – Packages – Package Control
WordPressで定義されている独自関数も補完してくれるパッケージです。Wordpressのテンプレートファイルなどを編集する場合に重宝します。
SublimeCodeIntel
とりあえずインストールしておけば、JavaScript, Mason, XBL, XUL, RHTML, SCSS, Python, HTML, Ruby, Python3, XML, XSLT, Django, HTML5, Perl, CSS, Twig, Less, Smarty, Node.js, Tcl, TemplateToolkit, PHPの強調表示、コードの自動補完を行ってくれます。
また、関数などはコンテキストメニューから「Jump to Symbol Definition」を選択することで定義箇所に飛ぶこともできます。というか補完というより、これが便利で利用しています。
BracketHighlighter
facelessuser/BracketHighlighter
カッコやクォート、タグなどにカーソルを置くと開始と終了を強調表示してくれるパッケージです。強調表示されることで不具合を発見し易くなります。
特に、開始・終了がわかりづらいタグなどのハイライトはありがたいです。
Goto-CSS-Declaration
HTMLのIDやクラス名の指定箇所から、CSSのスタイルの定義場所まで飛んでくれる死ぬほど便利なパッケージ。CSSの定義場所を探す時間を大幅に削減できます。
ただ、設定が書かれているCSSファイルは開いておく必要があります。
AlignTab
イコールやカンマやコロンのカラムを綺麗にそろえることのできるパッケージです。ソースコードが見やすくなります。
jQuery
jQueryのコード補完を補強するパッケージです。
Color Highlighter
CSSプロパティー値の色指定部分をクリックすると、設定されている色を視覚的に見ることができます。
デフォルトでは、クリックしないと色が大きく表示されませんが、「Preference → Package Control → Color Highlighter → Settings – User」に以下を記入することで、常に色をわかりやすく表示してくれます。
{
"ha_style": "Filled",
}
CSS Format
CSS Format – Packages – Package Control
CSSを整形してくれるパッケージです。CSSの縮小・展開なども行えます。Windowsに「Node.js」が入っていなくても使用できます。
TrailingSpaces
末尾にスペースが入っていると、ハイライト表示してくれます。また保存時には、自動で削除もしてくれます。地味だけど便利。
「Preference → Package Control → TrailingSpaces → Settings – User」に以下を記入することで、保存時に、余分なスペースを削除してくれます。
{
"trailing_spaces_trim_on_save": true,
}
ApacheConf.tmLanguage
Apache設定の強調表示を行ってくれるプラグインです。
これは特にWordpressとはそこまで関係ないのですが、サイト高速化のため、ブラウザキャッシュの設定や、リソースの圧縮などのような高速化に関する.htaccessファイルなどを書くときに見やすくなるとともに、間違っている箇所も見つけやすくなります。
Can I Use
CSSのプロパティーなどを右クリックしたコンテキストメニューから「Can I Use」を選択することにより、Can I use…からブラウザの対応状況を調べることができます。
テーマ、カラースキーマの設定
Sublime Textもテーマ・カラースキーマは、僕の場合黒背景のものを利用しています。
というのも、夜中に電気を消してコードを書くこともあるので、白背景のものよりは、目に優しいからです。
僕の場合、テーマ、カラースキーマは、以下のものを利用しています。
テーマは、Flatland Theme
Sublime Textのカラーテーマは、Flatlandを利用しています。
Flatlandにしているのは、よくある黒系テーマでは、背景色との関係上、文字色が見づらいものが多く、スクロールバーも見にくいからです。
Flatlandのサイドバーは、字もスクロールバーも見やすいです。
設定は、Flatlandパッケージをインストールして、「基本設定→基本設定 – ユーザー」の設定項目に、以下のコードを追加します。
"theme": "Flatland Dark.sublime-theme",
カラースキーマはMonokai
カラースキーマは、デフォルトであった「Monokai」を利用しています。
ただ、通常のままだと、コメントが、ちょっと暗くて見えづらかったので
コメント色を適当な明るめの色に変更しています。
変更方法は、ポータブル版のSublime Text3の場合、「インストールフォルダ/Data/Packages/User/Color Highlighter/themes」フォルダ（うまくいかない場合は「インストールフォルダ/Data/Packages/User/SublimeLinter」フォルダなど）の中にある、「Monokai.tmTheme」、「Monokai Bright.tmTheme」などを編集して利用しています。
編集部分は、「comment」と検索をすると出てきます。
<dict>
<key>name</key>
<string>Comment</string>
<key>scope</key>
<string>comment</string>
<key>settings</key>
<dict>
<key>foreground</key>
<string>#8BC288</string>
</dict>
</dict>
「Preference → Settings – User」の設定項目に、以下のコードを追加します。（※メニューからでも設定できます。）
"color_scheme": "Packages/User/Color Highlighter/themes/Monokai Bright.tmTheme",
Sublime Textの設定
最後に、「Preference → Settings – User」に自分の好みの設定を記入します。
僕は、以下のような設定をペタッと貼り付けています。
{
//ミニマップを常に表示
"always_show_minimap_viewport": true,
//オートコンプリート機能を有効
"auto_complete": true,
//オートコンプリートのトリガーとなる文字などを設定
"auto_complete_triggers":
[
{
"characters": "<",
"selector": "text.html"
},
{
"characters": ".",
"selector": "source.js"
}
],
//サイドバーのフォルダを太文字にする
"bold_folder_labels": true,
//カラースキーマaの変更（Sublime Text3ポータブル版カラー設定変更の場合）
"color_scheme": "Packages/User/Color Highlighter/themes/Monokai Bright.tmTheme",
//ミニマップ上でのファイルの現在の表示範囲をボーター表示
"draw_minimap_border": true,
//プログラミングフォントを使用（要フォントインストール）
"font_face": "Myrica M",
//フォントサイズ
"font_size": 19,
//キャレットのある行をハイライト
"highlight_line": true,
//編集用加えたタブを強調表示
"highlight_modified_tabs": true,
//無視するパッケージ
"ignored_packages":
[
"Vintage"
],
//スクロールの速度を0にするとスムーズスクロールが無効
"scroll_speed": 0.1,
//Shift＋Tabでアンインデントする
"shift_tab_unindent": true,
//タブスクロールの表示
"enable_tab_scrolling": false,
//タブのインデント幅
"tab_size": 2,
//Sublime Textテキストテーマ
"theme": "Flatland Dark.sublime-theme",
//タブをスペースに変換（tab_sizeで指定したインデント幅に変換されます）
"translate_tabs_to_spaces": true,
//文字列を必ず折り返す
"word_wrap": true
}
僕は、小さい文字だと目が疲れるので、フォントサイズを大きくして、プログラミング用フォントを利用しています。
パッケージ
インストールしたパッケージは、以下になります。
{
"in_process_packages":
[
],
"installed_packages":
[
"AlignTab",
"All Autocomplete",
"ApacheConf.tmLanguage",
"AutoFileName",
"BracketHighlighter",
"Color Highlighter",
"ConvertToUTF8",
"CSS Format",
"Emmet",
"Goto-CSS-Declaration",
"IMESupport",
"jQuery",
"Package Control",
"SublimeCodeIntel",
"Theme - Flatland",
"TrailingSpaces",
"wpseek.com WordPress Developer Assistant",
]
}
まとめ
とりあえず、これだけで、今のところ何不自由なく、Wordpressテーマの開発ができています。
WordPress（PHP、JavaScript、HTML）以外の言語でもSublime Textを利用するなら、他にもインストールしたほうがいいパッケージもあるかもしれません。けれど、Wordpress関連のファイルを編集するだけなら、これで十分かと個人的には思っています。
Sublime Textは基本的に全機能を無料で使用できますが（たまに購入を促すダイアログが出るくらい）、気に入ったら購入しておくことをおすすめします。
ライセンスのFAQにも書いてあるのですが、
- ライセンスに期限がない（Sublime Text3で購入したとしても4になっても使える）
- 個人での利用の場合、1つのライセンスで複数環境で利用できる
こんなおいしいライセンスが70ドルとは、お買い得だと思います。今後、値段が上がる可能性もないわけじゃないので、使用して気に入った場合は、Helpメニューから購入ページに行けるのでどうぞ。PayPalで手軽に決済できます。
