Furudateのブログ

プログラミングやネットワーク系の知識・技術がメインのブログ。技術メモ帳的な感じになるかと。岩手から発信していきます。

SublimeText 2 環境設定とプラグインについて

こんにちは。 今回はテキストエディタについてです。

WindowsからMacに移行してから、今まで使っていたさくらエディタからSublimeText 2 に乗り換えました。

SublimeTextは多機能なため、色々と設定項目やプラグインがあります。 そこで、今回はSublimeの設定とプラグインについてメモしておきたいと思います。

プラグインについて

まずはプラグインです。 他サイト様を参考に、よさ気なプラグインを入れましたので、リスト化したいと思います。 なお、各プラグインの細かい説明は省きますので、ググりましょう。

  • PackageControll

これ入れないと始まりません。

  • Flatland

テーマ。かっこいい。

  • SideBarEnhanceents

サイドバーの右クリックメニューの拡張をする

  • GitGutter

Git の変更行を視覚化する

  • TrailingSpaces

行頭や行末の不要なスペースをハイライト

Railsの最後のMigration表示

  • SyncedSideBar

サイドバーで現在開いているファイルをハイライト

  • BracketHighlight

対応括弧(HTMLの場合はタグも)ハイライト

  • SublimeCodeIntel

コードの補完を自動表示

  • SFTP

SFTPができるように。

ワードプレスのコード補完

  • ApacheConf.tmLanguage

コンフィグファイルの強調表示用

  • Emmet

Zen-Codingの後継

  • Abacus

イコールやコロンを綺麗に整形

  • CSSFormat

CSSを綺麗に整形

  • AutoFileName

画像などのファイルネームを自動補完

  • SublimeLinter

構文チェックをやってくれる。node.jsを入れないとだめ。

  • CSSsnipets

CSSの自動補完

HTML5の自動補完

jQueryの自動補完

  • IndentGuides

インデントに合わせてガイド線表示

  • Goto-CSS-Declaration

HTMLとCSSのタブを開いている時に、Command + → で該当ID(クラス)のCSSを表示してくれる。 デフォルトだと、Command + →で行末にカーソル移動ができなくなるので、 「Packages Setting -> Goto-CSS-Declaration -> Key Bindings(Default)」 でコマンドを置き換える。(Userとかにするとだめ)

  • Browser Refrech

バックグラウンドでブラウザを更新。

  • Hayaku

Emmetより柔軟に対応できるやつ。Emmetと合わせて使うと便利。

  • Placehod.it Image Tag Generator

ダミー画像を用意できる。

  • ZenkakuSpacet

全角スペースをハイライト。PackageControllにはないので、こちらから直接DLする。

CakePHPのスニペットやオートコンプリート集

  • Docblockr(日本語コメントが打てなくなるので保留)

関数のコメントを自動生成してくれるもの。便利そうではあるが保留で。

  • ConvertToUTF8

shift-jisのファイルを扱うために入れます。これで文字化けしないように。

設定項目について

次にSublimeTextの設定についてです。 Defaultを直接いじるとSublimeのアップデート時などにリセットされてしまうっぽいので、Defaultはいじらず、Userをいじります。

以下が実際の設定内容です。

{
    // カラースキーマ
  "color_scheme": "Packages/Theme - Flatland/Flatland Dark.tmTheme"

    // フォント指定
    "font_face": “Menlo”,
    "font_size": 13,
    // オプション一覧
    //  "no_bold", "no_italic", "no_antialias", "gray_antialias",
    // "subpixel_antialias", "no_round" (OS X only) and "directwrite" (Windows only)
    "font_options": [],

    // 行番号表示
    "line_numbers": true,

    // ガーター(左側領域)の表示
    "gutter": true,

    // ガーターとテキストエリアの間のマージン
    "margin": 1,

    // タブ文字の大きさ
    "tab_size": 4,

    // タブをスペースに変換
    "translate_tabs_to_spaces": true,

    // テキストを折り返す
    "word_wrap": true,

    // 現在行のハイライト
    "highlight_line": true,

    // スペースを常に表示
    "draw_white_space": "all",

    // インデントの補助線
    "draw_indent_guides": true,

    // インデントの補助線のアクティブなものを表示
    "indent_guide_options": ["draw_active"],

    // デフォルトエンコーディング
    "default_encoding": "UTF-8",

    // 補完候補にTabキーのみを用いる
    "auto_complete_commit_on_tab": false,

    // テーマ
    "theme":"Flatland Dark.sublime-theme",

    // サイドバーのフォルダ名を太字に
    "bold_folder_labels": true,

    // 新しいファイルを新規ウィンドウで開かないように  
    "open_files_in_new_window": false,

    // アプリ起動後に新規ウインドウを立ち上げる
    "create_window_at_startup": true,

    // ウィンドウのタブがなくなったらウィンドウを閉じる
    "close_windows_when_empty": true,

    // List any packages to ignore here. When removing entries from this list,
    // a restart may be required if the package contains plugins.
    "ignored_packages": [],

    // tabでの展開の上書きしない for Emmet
    "disable_tab_abbreviations": true,
    // 改行でのフォーマットをしない(日本語変換の確定のため) for Emmet
    "disable_formatted_linebreak": true.

    // キャレットの設定
    "caret_style": "phase",
    // ルーラーの設定
    "rulers": [80]
}

Google日本語入力に対応

最後に、Google日本語入力についてです。 自分はIMEをこれにしているのですが、Sublimeだと予測変換でTabキーを押すと、変換候補にカーソルがいくのではなく、タブが挿入されてしまいます。 それを防ぎたいと思います。

やり方は、「Preferences -> Key Bindings - Default」にいき、以下の行をコメントアウトします。

  // { "keys": ["tab"], "command": "insert_best_completion", "args": {"default": "\t", "exact": true} },
    // { "keys": ["tab"], "command": "insert_best_completion", "args": {"default": "\t", "exact": false},
    //  "context":
    //  [
    //      { "key": "setting.tab_completion", "operator": "equal", "operand": true }
    //  ]
    // },
    // { "keys": ["tab"], "command": "replace_completion_with_next_completion", "context":
    //  [
    //      { "key": "last_command", "operator": "equal", "operand": "insert_best_completion" },
    //      { "key": "setting.tab_completion", "operator": "equal", "operand": true }
    //  ]
    // },

自分の場合は93行目ぐらいにありましたが、環境によっては違うかもしれませんので、文字列検索してみてください。

これでやっと設定は終わりです。 これからSublime使っていきたいと思います。

それでは!

参考にさせていただいたサイト

Sublime Textの設定方法。細かく自分好みにチューニング!

”恋に落ちるエディタ”「Sublime Text」 完全入門ガイド!

SublimeText2/3 環境設定とか

Sublime Text 2 のDefault設定ファイルを眺める

Sublime Text2 使い方まとめ

Sublime Text 2 の設定 - Y.A.Mの雑記帳