the glue

やってみたことで忘れそうなこと、役立ちそうなことなどをまとめています。たまに何気ない日常の話もします。

Sublime Text 3 を便利に使おう

エディタ

NeoBundleを入れてVim戦闘力が徐々に上がりつつありますが、 自分はまだまだでSublime Textのほうが使いやすいなぁなんて思っている系クラスタなので、Sublime Textを使っています。

今更感というか何番煎じだよ感が否めないですが、よく思い出すのにあっちこっち調べて大変なのでSublime Text 3の設定をまとめておきます。

ちなみにVim戦闘力は仕事仲間のpockeさんが作ってくれたこちらのアプリで計測できます。
Vim Scouter


プルリク募集中だそうなので是非飛ばしてあげてください。

さて、本題のSublime Textの設定ですが、今回は Sublime Text 3を使います。

環境

設定

Package Control の導入

まずはPackage Controlを導入して、いろいろな便利なプラグインを導入しやすくしましょう。

ViewメニューからShow Consoleを選択し、Consoleを表示させます。

f:id:sweep3092:20150108133144p:plain:w400

Consoleを表示させたら、以下をConsoleに入力し、Enterを押します。
（hashが定期的に更新されているようなので、ここからコピペしたほうが確実です）

import urllib.request,os,hashlib; h = 'eb2297e1a458f27d836c04bb0cbaf282' + 'd0e7a3098092775ccb37ca9d6b2e4b7d'; pf = 'Package Control.sublime-package'; ipp = sublime.installed_packages_path(); urllib.request.install_opener( urllib.request.build_opener( urllib.request.ProxyHandler()) ); by = urllib.request.urlopen( 'http://packagecontrol.io/' + pf.replace(' ', '%20')).read(); dh = hashlib.sha256(by).hexdigest(); print('Error validating download (got %s instead of %s), please try manual install' % (dh, h)) if dh != h else open(os.path.join( ipp, pf), 'wb' ).write(by)

f:id:sweep3092:20150108133503p:plain:w400

これでPackage Controlがインストールされます。 Sublime Text を再起動すればインストール完了です。

Sublime Textの設定

Sublime Textの設定をします。

サイドバーに開いているファイル一覧およびツリー表示をする

サイドバーを表示して、開いているファイルの一覧やディレクトリツリーの表示などを行えるようにしましょう。

まずはViewメニューからSide Bar -> Show Side Bar を選択し、サイドバーを表示させます。 f:id:sweep3092:20150401004501p:plain:w400

サイドバーには、エディタで開いているファイルや、サイドバーにドラッグアンドドロップしたディレクトリがツリー構造となって表示されます。
また、サイドバーの項目は通常の設定ではSublime Textを再起動してもそのまま残ります。 f:id:sweep3092:20150401004938p:plain:w400

Sublime Textの各種設定

Sublime Textメニューから、Preferences -> Settings - User を選択します。 JSON形式で記述する設定ファイルがエディタ部分に表示されるので、これを編集していきます。 ちなみにJSON形式ですがコメントは許可されています。

f:id:sweep3092:20150108210558p:plain:w400

以下は自分の設定です。参考にしてみてください。

{
  // デフォルトの改行コード
  "default_line_ending": "unix",
  // インデントの表示
  "draw_indent_guides": true,
  // 関数折りたたみなどのボタン表示
  "fold_buttons": true,
  // フォント描画の設定（Windowsで日本語がキレイに描画される）
  "font_options":
  [
    "directwrite"
  ],
  // フォントサイズ
  "font_size": 12,
  // 選択中の行をハイライトする
  "highlight_line": true,
  // タブサイズ
  "tab_size": 2,
  // 保存時にタブをスペースに変換する
  "translate_tabs_to_spaces": true,
  "trim_automatic_white_space": true,
  // 行末スペースを保存時に削除する
  "trim_trailing_white_space_on_save": true,
  "use_tab_stops": true,
  // エンコードを表示する
  "show_encoding": true,
  // 改行コードを表示する
  "show_line_endings": true,
  // 未保存のタブをハイライトする
  "highlight_modified_tabs": true,
  "ignored_packages":
  [
    "Vintage"
  ],
  // Color Scheme
  "theme": "Cobalt2.sublime-theme"
}

パッケージ（プラグイン）を導入する

Shift + Command(Ctrl) + Pでコマンドパレットが表示されます。
ここで下記のようにinstまで入力すればPackage Control: Install Packageが表示されますので、Enterしてください。 f:id:sweep3092:20150108215747p:plain:w400

するとコマンドパレットがインストール可能なパッケージ一覧に切り替わりますので、インストールしたいパッケージ名を入力、選択してEnterでインストールできます。

下記におすすめのパッケージを挙げておきます。

  • ConvertToUTF8
  • TrailingSpaces
    • 全角スペースや行末スペースがあるとハイライトして表示してくれる
  • IMESupport
    • Windowsだと日本語のインライン表示が出来ないので、できたっぽくしてくれるやつ
    • Macでは不要
  • BracketHighlighter
    • 対応する括弧をハイライトしてくれる
  • SublimeLinter
    • リアルタイムで間違ったコードを指摘してくれる
    • 詳しい説明は以下

テーマを適用する

おすすめのテーマはCobalt2です。 ほとんどのテーマはPackage Controlからインストールできます。

Cobalt2

Theme - Cobalt2 - Packages - Package Control

  • 色合いはそこそこ好み
  • ファイル種類ごとにツリーのアイコン表示が変わるのがとてもとてもありがたい

さきほどのPackage Installの手順から、cobalt2と入力し、テーマをインストールします。 インストール後、"theme": "Cobalt2.sublime-theme"を設定ファイルに追記し、Sublime Textを再起動するとテーマが適用されます。

それぞれの設定は先ほどの設定ファイル例にコメントアウトしてある部分ですが、詳しくは直接パッケージの説明をみて自分好みにしていくのがいいかと思います。

SublimeLinterを使おう

f:id:sweep3092:20150109044018p:plain:w400

SublimeLinterはリアルタイムにコードをチェックしてくれるプラグインです。 使うにはそれぞれの言語のLinterを導入する必要があります。

自分がよく使うのがRuby / jsなので、以下を導入しています。

  • SublimeLinter-ruby
    • Ruby用のLinter
    • Rubyがインストールされていれば動く
  • SublimeLinter-jshint
    • JavaScript用のLinter
    • jshintがインストールされていれば動く
    • $ npm install jshint --global
  • SublimeLinter-json

とりあえずこんな感じで以上です。 あとはpockeさんがいい感じのVimの記事でも挙げてくれればなんて思っています。