DreamWeaverをずっと使ってた私ですが去年Sublime Text2を使ってからというもの
これなしにコーディングするのは無理だというぐらい惚れ込んで使ってます。
今となってはDreamWeaverは複雑なtableを組む時以外使ってませんw

既にbizさんが記事で便利なパッケージをあげてくれているので今回はそれ以外のパッケージをあげたいと思います。
ちなみに私はほぼWindowsユーザーです。ショートカットキーをctrlで紹介してますが、Macユーザーの方はctrlをcommandに変えてください。

16進数を一瞬でrgbaに変換 – Hex-to-RGBA

コーディング中、この色をRGBに変えると数値はどうなるの?→ググって色を調べますよね。このフローを踏まなくてもOKです!16進数にカーソルを充ててctrl+shift+rで変換してくれるので時間の短縮に繋がります。

Hex-to-RGB

ファイル名だけじゃなくサイズも補完してくれる – AutoFileName

imgタグやcssでパスを入力する時に、ファイル名を補完してくれるパッケージ。サイズも補完してくれるのがいい所。
特にありがたみを感じるのがスマホサイトのコーディングです。
AutoFileNameで画像を入力して、例えばwidth=“50”と横幅が補完されたとします。
ここでwidth=“50/2” にと入力して、 / にカーソルをあわせてctrl+shift+y を押すと…なんとエディターが計算してくれてwidth=“25″になります!
頭を使いません!!!頭の退化を心配しますがすごく楽です!!!

ちなみに補完される height と width の順番を入れ替えるには
「Preferences」→「Settings-User」に以下を追加してください。

※既にbizさんの記事で紹介されてますがコーディングには欠かせないパッケージなので紹介させていただきました…!

ショートカットキーのコンフリクトを即座に解決 – FindKeyConflicts

いろんなパッケージを入れるようになるとサイトに書いてあるショートカットキーを打っているのに全然動かない問題に出くわしませんか?
ショートカットキーがコンフリクトを起こして別のパッケージが優先されたなという事は考えられますが実際どれが競合してるのかわからない!そんな問題を一発解決します!

ctrl + shift + p でパッケージコントロールを開いて
find key conflictsと打てばメニューが出てきます。むしろfindぐらいでメニューが出てきました。
FindKeyConflictsのクイックパネル

メニューから
FindKeyConflicts: All Conflicts
を選択すると競合する全てのショートカットキーの一覧を出してくれます。
競合がわかったら「Preferences」→「Key Bidings User」でショートカットキー設定を上書きしてしまいましょう。

またこのパッケージはコンフリクト調査以外にも、ショートカットキーを調べる事ができます。

FindKeyConflicts: Command Search 自分が使いたいパッケージのショートカットキーを調べる
FindKeyConflicts: All Key Maps to Buffer 競合関係なくショートカットキーの設定を全部一覧で出してくれる
FindKeyConflicts: All Key Maps to Quick Panel 競合関係なくショートカットキーの設定をクイックパネルに出してくれる

ブラウザ対応状況を即チェックできる – Can I Use

新米コーダーあるあるだと勝手に思っている事なのですが『このスタイルってIEブラウザ対応どこまでしてたっけ?』という疑問を持つことはありませんか?
でもわざわざブラウザを立ち上げてググルなんてめんどくさい!というめんどくさがりさんにぴったりなパッケージです。選択した要素のブラウザ対応状況を調べてくれます。

caniuse

調べたい部分を選択してから ctrl + alt + fを押します。するとborder-radiusを検索した結果のページを自動で立ち上げてくれます。

クラス選択をすればcssファイルへひとっ飛び – Goto-CSS-Declaration

htmlファイルを編集中にこのクラスのcssを今すぐ編集したい!
そんなときにショートカットキー一発でcssファイルに移動できる優れものです。
goto

まず前提としてcssファイルを開いておく必要があります。
htmlファイルで、idやclassをにカーソルを置き、ショートカットキーを打つと一瞬でcssファイルに移動してくれます!

Windows Mac
次の候補に進む super(※windowsキー) + alt + . command + →
次の候補に戻る super(※windowsキー) + alt + , command + ←

いつでもブックマークに移動できる – sublime bookmark

※Package Controlからインストールする場合、Sublime text2とSublime text3の仕様が少し違うようです。
また私の環境不備のせいかもしれませんが、MacだとSublime text3じゃないとブックマークを付けられませんでした。。

ctrl+pでファイル名やidの検索はできますがプロジェクト範囲内だけしかidの検索かけられないし…ファイルを検索して開いてから該当の部分を探して…
ちょっとめんどくさい。もっと一発で編集画面にたどり着きたいのに…!という時にブックマークした行に一発でたどり着けちゃう大活躍プラグインです。
デフォルトでブックマーク機能はSublime textにありますが絶対こちらの方が便利です。

ブックマークをつけ、ブックマークに移動する基本的な流れをご紹介します。

STEP1:ブックマークをする

ctrl+shift+pでパッケージコントロールを開き、 add b と打つと sublime bookmark addbokkmarkが出てきます。
Enterを押すと選択した行のテキストが下の欄に出てきます。そのままでもいいですがここは自分が覚えやすいブックマーク名にしておくと探すときにわかりやすいです。

7gyoume
7行目にbk-descriptionという名前を付けてブックマークしました。

7-2
ブックマークができたら左側にさんかくがつきます。

STEP2:ブックマークに移動する

ブックマークしたら、ctrl+shift+p →今度は goto b と打つとgo to bookmarkが出てきます。
Enterを押すとコマンドパレットが出てきてブックマークリストが出てくるので選べば一瞬で移動できます!
ブックマーク以外のファイルを編集中でもブックマーク箇所にすぐ戻ることができます。便利です!
image
先ほど作ったbk-descriptionが出てきました。ブックマークが複数ある場合、クイックパネルにブックマーク名を打てばすぐ検索できます

コマンドパレットで説明しましたが、コマンドパレットを呼び出さなくても
ショートカットキーでもブックマークをつけたり、ブックマークに移動できます。

Windows(ST2) Windows(ST3) Mac
ブックマークをつける F2 ctrl+shift+F2 ctrl+shift+F2
ブックマークをはずす ctrl+F2 ctrl+F2 ctrl+F2
次のブックマークに移動※1 alt+F2 shift+F2 shift+F2
前のブックマークに移動 ctrl+F2 ctrl+F2

※1 Sublime Text2 の場合ブックマークに移動となります。

最後に

本当に色んなプラグインが普及していて便利なSublime Textですが、これもあれもといれると結局軽さが売りのSublime Textが重くなってしまって意味がないです…!
なので結局自分の使い方にあったプラグインを選んで使っていくのが一番だと思います。いろいろ試してみて自分にあうプラグインを選んでください。

余談:Windows→Macに乗り換えたユーザー注意!
hot_exitでつまずいた

この記事を書いているときに、Macでの挙動を確認していたのですがSettings-Userをいじって…hot_exitを有効にすれば復元される…はずなのにMacだと復元されない!なんで?!!という罠に落ち入りました。

どうやら赤い×ボタンで終了すると前回の情報は残さずに新規の真っ白な状態から始まる仕様だそうです。せっかくサイドバーに表示したフォルダーの設定も全部消えてしまうので赤いボタンは押さないでcommand+Qで終了しましょう。。ちなみにhot_exitはデフォルトでtrueになってるので書く必要はなかったようです。

参考にさせて頂いた記事:[Sublime Text]終了時に開いていたタブが起動時に復元されない原因と対処法