WordPress制作用のエディターをSublime Text3に移行したので設定のまとめ

サイバーマンデー
Amazonプライム会員限定の大セール「サイバーマンデー」開催中!プライム会員限定の大セール

4021813470_90f76ddc77_b

僕はこれまで、Wordpress関係の編集をするのに、Sublime Text2などを使っていました。

けど先日、Sublime Text3に移行するのに伴い、設定や、パッケージなどを見直し、1から設定をし直したので、その設定方法をまとめておきたいと思います。

僕は、こういったWEB制作用のエディターは、Wordpressテーマ開発でしかほとんど利用していません。ですので、この記事の設定を行うと、ほぼWordpress開発用設定になると思います。

photo by Takamorry

スポンサーリンク
レクタングル(大)広告

まずは日本語化

Sublime Textは、英語のままで、利用しても十分使いやすいとは思います。

ただ、日本人の僕としては、日本語で書かれてあったほうが、ネイティブな分英語よりは理解が早いので、日本語化して利用しています。

日本語化の方法は結構簡単で、以下に書かれている通り行えば、5分ぐらいで終わると思います。

簡単5分!WindowsでSublime Text3ポータブル版を日本語化する方法
僕は、HTMLやCSSを書くとき、Sublime Textを利用しています。 というのも、Emmetという少ない文字入力で、素早く大量...

日本語化されたコマンドも、わかりやすく表示されます。

Sublime Text3日本語化

パッケージのインストール

WordPress編集に特化させるには、以下のパッケージがお勧めです。

Wordpress開発がサクサク捗るSublime Textおすすめパッケージ30個まとめ
今回は、Sublime Textと組み合わせて利用すると、Wordpressのテーマ編集などで便利なパッケージをまとめてみました。 普...

中でも特に以下の7つのパッケージが重宝しています。

  1. Emmet(入力補助)
  2. All Autocomplete(入力補助)
  3. AutoFileName(ファイル名入力補助)
  4. wpseek.com WordPress Developer Assistant(Wordpress入力補助)
  5. SublimeCodeIntel(関数の定義場所に飛ぶ機能)
  6. Goto-CSS-Declaration(クラスの定義場所に飛ぶ機能)
  7. Color Highlighter(色がわかりやすい)

これらを使って、Wordpress開発を行うと、サクサク入力できるので、もう以前には戻れません。

テーマ、カラースキーマ

Sublime Textもテーマ・カラースキーマは、僕の場合黒背景のものを利用しています。

というのも、夜中に電気を消してコードを書くこともあるので、白背景のものよりは、目に優しいからです。

僕の場合、テーマ、カラースキーマは、以下のものを利用しています。

Flatland Theme

Flatland Theme

thinkpixellab/flatland

Sublime Textのカラーテーマは、Flatlandを利用しています。

Flatlandにしているのは、よくある黒系テーマでは、背景色との関係上、文字色が見づらいものが多く、スクロールバーも見にくいからです。

黒系テーマのサイドバー

Flatlandのサイドバーは、字もスクロールバーも見やすいです。

Flatlandのサイドバー

設定は、Flatlandパッケージをインストールして、「基本設定→基本設定 – ユーザー」の設定項目に、以下のコードを追加します。

カラースキーマ

カラースキーマ

Monokai

カラースキーマは、デフォルトであった「Monokai」を利用しています。

ただ、通常のままだと、コメントが、ちょっと暗くて見えづらかったので

通常のスキーマのコメント

コメント色を適当な明るめの色に変更しています。

明るめのカラースキーマに変更

変更方法は、ポータブル版のSublime Text3の場合、「インストールフォルダ/Data/Packages/User/SublimeLinter」フォルダの中にある、「Monokai (SL).tmTheme」などを編集して利用しています。

編集部分は、「comment」と検索をすると出てきます。

「基本設定→基本設定 – ユーザー」の設定項目に、以下のコードを追加します。(※メニューからでもできます)

その他のテーマ

カラーテーマの好みは人それぞれなので、テーマ・スキーマなどを探すには、以下のページがお勧めです。

Sublime Textのユーザー設定

基本設定、ユーザー設定

今回設定を、改めて見直してみて、Sublime Text2であった設定項目が、Sublime Text3でなくなっていたりするものもあります。

ただ、無くなった設定も含めてSublime Text2の設定を、「基本設定→基本設定 – ユーザー」の設定に貼り付けても、特に問題はありません。

僕の場合、デフォルトの設定から変更しているものは、以下のように設定しています。

その他の便利なリンク

Sublime Textを利用するなら、ブックマークしておくと便利なサイトです。

Emmet Cheat Sheet

Cheat Sheet

Emmet Cheat Sheet

Emmet公式のチートシートです。とりあえず入力方法がわからない、Emmet記述があれば、ここで調べます。

Colorsublime

Colorsublime

Colorsublime

先程も書いたけど、カラーテーマを探すなら。

Periodic table of the Keyboard Shortcuts

Sublime Text  Periodic table of the Keyboard Shortcuts.

Sublime Text | Periodic table of the Keyboard Shortcuts.

MacとWindows両方のSublime Textショートカット一覧を見ることができます。

まとめ

Sublime Text3は、この記事を書いた時点では、まだベータ版です。

Sublime Text 3 is currently in beta. The latest build is 3065.

ですので、Sublime Text2で利用できていた、パッケージで利用できないものもあると聞いていました。ただ、パッケージ27個まとめで紹介しているものあれば、ちゃんと動作しているように思います。

不具合なども、パッケージとの競合により設定時に出るものはあるものの、通常の編集で利用している限りでは、今のところ目立った不具合はないように感じます。

現在Sublime Text2を利用している場合は、わざわざ変更する必要もないと思いますが、これからSublime Textを始める場合は、3からでも全然大丈夫かと思います。

とりあえず、Wordpress制作で利用している限りは、今のところ全然不具合も出ていません。

『WordPress制作用のエディターをSublime Text3に移行したので設定のまとめ』へのコメント

  1. 名前:ケイタ 投稿日:2014/12/30(火) 17:40:07 ID:f5df59eeb

    私もテーマは「Flatland」を利用しています。
    いろいろ試したけど、これに勝るテーマは現時点でないですね。

  2. わいひら 名前:わいひら 投稿日:2014/12/30(火) 19:16:02 ID:8d70fd517

    僕もいろいろ試して「Flatland」に落ち着きました。
    こういうのを、触りだすと開発そっちのけで、凝ってしまいますね;
    「Flatland」見やすいですよね。