Sublime Textの初期設定

Sublime Textをインストールしたらまずやる事のまとめ。
パッケージのインストールや覚えておきたい操作など。

インストール・初期設定

概要など

まずはインストール

本家サイト
有償ですが、試用版でも機能制限なし。
Sublime Text2もありますが、最新バージョンの3を使います。

オレオレユーザー設定

[Preference] > [Setting – User] に以下を記載

オレオレスニペット

https://github.com/WebNAUT-BW/snippets-st-frontend

インストール方法

/Users/【ユーザー名】/Library/Application Support/Sublime Text/Packages/User/snippet/
に***.sublime-snippetファイルを格納。このディレクトリ以下であれば自由にフォルダに分けてOK。

呼び出し方

[cmd] + [shift] + [p] → 各スニペットファイルのtabTriggerで設定した名前を入力(予測変換するので途中までの入力でOK)

押さえておきたい基本機能

操作・表示系

名前 詳細
Multiple Selections [cmd](windowsなら[ctrl])を押しながら、複数ヶ所を同時に選択して編集することが出来る
SoftUndo [cmd] + [u] 「選択」「カーソルの位置」なども戻すことができる、便利な「戻る」機能
フォルダによるファイル管理 基本的な作業はフォルダをアプリにドラッグしてサイドバーに設定から行う
Minimap コードの全体像が把握可能

ショートカット

Sublime Textのキーボードショートカット一覧 (Mac OS X)

よく使うショートカット:

名前 詳細
[cmd] + [d] 一回で単語を選択、二回目から選択中の文字列を検索して順次選択
[cmd] + [alt]+ (数字キー) ウィンドウを横n等分
[cmd]+ [/] コメントアウト(コメント解除)
[ctrl]+ [t] 選択された二箇所の文字を交換する
[cmd] + [shift]+ [a] 親のタグまで選択
[cmd] + [shift]+ [d] カーソル位置の行を下に複製
[cmd] + [alt]+ [f] 置換パネルを開く
検索パネルで[enter] 次を検索
検索パネルで[shift]+ enter 前を検索
[tab]/[shift] + [tab] インデント/アンインデント

パッケージ

Package Control

パッケージを管理しやすくするパッケージ。まずはこれを入れないと始まらない。

機能概要:

設定方法:

  • 公式サイトにアクセス(必ず最新の情報でインストールすること)
  • Sublime Text3のタブが選択されているのを確認して、Installationの項目の「import urllib〜」で始まるコードをコピー。
  • [View] > [Show Console] をクリック
  • コピーしたインストール用のコマンドを貼り付けて[enter]
  • インストールが走っている間しばし待つ
  • 「Package Control: No updated packages」と表示されて処理が止まった所で完了

Package Controlを使ったパッケージのインストール方法:

  • [command] + [shift] + [p] > 「Install Package」 と入力(変換候補が出るので”install”まででOK)
  • [enter] を押してしばらく待つ(ステータスバーがLoading中の動きになります。)
  • インストールしたいパッケージの名前を入力して [enter]

Emmet

Zen-codingの現行版

使い方:

1.ショートコードでタグを展開([ctl] + [e])
例:

↓[ctl] + [e]で展開

2.wrap with abbreviation(後からタグで括る)

  • 括りたい範囲を選択して、[ctl] + [alt] + [enter]
  • ウィンドウの下に「Enter abbreviation」が出るので、指定したいタグを入力して[enter]
  • 複数行をliなどで括る場合はul>li#と入れると行単位でliを指定可能
  • クラスやIDも1.のショートコード同様指定可能

Emmet Cheat Sheet

http://docs.emmet.io/cheat-sheet/

Bracket Highlighter

htmlのタグ、jsの括弧のペアをハイライトしてくれる

SideBarEnhancements

サイドバーの強化、右クリックで操作できる事が増える

AutoFileName

imgタグやcssなどで、パスを入力する時に、ファイル名を補完してくれる素晴らしいパッケージ

※ユーザ設定に下記を追加するとimgタグのwidthとheightの順番がwidthが先になります。
[Preference] > [Setting – User]

Abacus

イコールとかコロンとかを綺麗に揃える

▼例:使い方

↓整えたい行を選択して、[cmd] + [alt] + [ctrl] + ]

ConvertToUTF8

Sublime TextはデフォルトでShift-JISやEUCに対応しておらず、そのまま開くと文字化けしてしまいます。
それらのファイルを開いた時に文字エンコードをUTF8に変換し、保存時にまたエンコードを戻してくれるというパッケージです。

各種シンタックス

  • SCSS(SASSを入れてしまうと.scssでemmetを使った時にセミコロンが自動で付かない)
  • Compass
  • LESS

各種スニペット

  • HTML Snippets
  • CSS Snippets
  • jQuery Snippets pack
  • JavaScript Snippets

JSHint

JavaScriptのリアルタイム構文チェックを行うパッケージです。
なお、これを使うためには別途Node.js経由でJSHintをインストールする必要があります。

紹介記事

追加するパッケージ

  • SublimeLinter
  • SublimeLinter-jshint

TrailingSpaces

全角スペースをハイライト表示するパッケージ
インストールしただけではうまく動かず、

[PackageSetting] > [TrailingSpaces] > [Setting – User] に

を記載します。これでOK

参考サイト

上記設定を追記する先が
[PackageSetting] > [Package Control] > [Setting – User] と書かれていますが、正しくは
[PackageSetting] > [TrailingSpaces] > [Setting – User] ですのでご注意。

カラーテーマ設定

おすすめ

[Monokai Dark]、[Flatland]
参考サイト

オリジナルなテーマ設定を行う方法

紹介記事:Sublime Textのテーマをカスタマイズできる「Color Scheme Editor for Sublime」 – へっぽこプログラマーの日記

まずはこちらにアクセス

  • 左上の[Gallery]で既存のテーマを選択
  • 細かい色の調整(必要に応じて)
  • [download]して**.tmThemeファイルをダウンロード
  • [Preferences] > [Brouwse Packages] でFinderにPackage内容を表示
     /Users/【ユーザー名】/Library/Application Support/Sublime Text/Packages/User/**.tmTheme ここにファイルを格納
  • すると [Preferences] > [Color Scheme] > [User] にテーマ**が選択できるようになる