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

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

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

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

photo by Takamorry

まずは日本語化

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

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

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

簡単5分！WindowsでSublime Text3ポータブル版を日本語化する方法

僕は、HTMLやCSSを書くとき、Sublime Textを利用しています。というのも、Emmetという少ない文字入力で、素早く大量...

nelog.jp

2016-06-28 22:20

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

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

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

WordPress開発がサクサク捗るSublime Textおすすめパッケージ30個まとめ

今回は、Sublime Textと組み合わせて利用すると、Wordpressのテーマ編集などで便利なパッケージをまとめてみました。 ...

nelog.jp

2018-11-27 18:04

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

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

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

テーマ、カラースキーマ

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

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

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

Flatland Theme

thinkpixellab/flatland

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

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

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

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

"theme": "Flatland Dark.sublime-theme",

カラースキーマ

Monokai

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

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

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

変更方法は、ポータブル版のSublime Text3の場合、「インストールフォルダ/Data/Packages/User/SublimeLinter」フォルダの中にある、「Monokai (SL).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>

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

"color_scheme": "Packages/User/SublimeLinter/Monokai (SL).tmTheme",//カラースキーマの変更（Sublime Text3ポータブル版カラー設定変更の場合）

その他のテーマ

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

Sublime Textのユーザー設定

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

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

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

{
    //ミニマップを常に表示
    "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/SublimeLinter/Monokai (SL).tmTheme",
    //ミニマップ上でのファイルの現在の表示範囲をボーター表示
    "draw_minimap_border": true,
    //フォントサイズ
    "font_size": 16,
    //キャレットのある行をハイライト
    "highlight_line": true,
    //編集用加えたタブを強調表示
    "highlight_modified_tabs": true,
    //無視するパッケージ
    "ignored_packages":
    [
        "Vintage"
    ],
    //スクロールの速度-0にするとスムーズスクロールが無効
    "scroll_speed": 0,
    //Shift＋Tabでアンインデントする
    "shift_tab_unindent": true,
    //タブのインデント幅
    "tab_size": 2,
    //Sublime Textテキストテーマ
    "theme": "Flatland Dark.sublime-theme",
    //タブをスペースに変換（tab_sizeで指定したインデント幅に変換されます）
    "translate_tabs_to_spaces": true,
    //文字列を必ず折り返す
    "word_wrap": true
}