4倍使いやすくなる!おすすめSublimetextパッケージ(アドオン)!

2014.9.15 webツール

近頃はLessを使っていることもありもっぱらSublimeText派になりました。

パッケージ(アドオン)もそこそこに導入し、だいたいほかのサイトで説明されているものは同じパッケージばかりで、あたかも分布図のように日本人的に人気がある/なしが解りやすいです。

というわけで例に習って、ではないですが僕も同じようなものを入れてみたので使い方をメモしていきます。

 

Sublimetextをなんとなくかっこ良くする「Theme Flatland」

「Package Control」から、「install Package」につづき、「Flatland」と検索しましょう。

「Theme – Flatland」と出てくるはずです。クリックしましょう。

その後、上部のメニューから「基本設定(Preferense)」>「Setting – User」の項目を選びます。
開かれる「Preferenses.sublime-settings」ファイルの記述を変更します。

{
    // テーマ
    "theme": "Flatland Dark.sublime-theme",
 
    // カラースキーム
    "color_scheme": "Packages/Theme - Flatland/Flatland Dark.tmTheme",
 
    // エディタのタブを四角にする
    "flatland_square_tabs": true,
 
    // その他の設定…
}

変更を保存すると…

名称未設定-1

かっこよくなりました!

どちらがお好みでしょうか?僕はBeforeのほうがすきです。

SideBarEnhancementsでサイドバーの「プロジェクト」エリアを便利に!

そもそも「プロジェクト」のエリアの存在をご存知でしょうか?

任意のフォルダをSublimetextの左端にドラッグ&ドロップすることで、サイドバーとしてディレクトリが表示されます。
そこからファイルの名前の変更、ディレクトリ内検索、画像のプレビューなどができるようになるわけです。

その他に、上部メニューの「プロジェクト(P)」>「Add Folder To Project」でもフォルダ追加が可能です。

それで、本題に入りますが…いかんせん、「プロジェクト」で右クリックをして出来ることが少ないのです。

こんなの右クリックじゃない!彼はもっと出来るんです!

という方のため、Package installから「SideBarEnhancements」と入力します。
最初の”side”ぐらいで一番上に出てくるかと思います。

これはインストールして特別なコマンド不要で実行されます。

では、サイドバーで右クリックしてみましょう。

2

しっかりDonate(寄付)まで…

しかしこれは大きな進展です!

「Sublime bookmark」で長くなったファイルの任意の場所にお手軽ジャンプ

「Install Package」>「Sublime bookmark」を検索し探し出します。

ファイルを開いた状態で「Ctrl+Shift+P」、開いた入力欄に「Add」とでも入力しましょう。

sublimebookmark

このような項目がハイライトされると思います。

この時点でカーソルがあった位置に名前を付けて、ブックマークとして保存できます。

で、なに?ッて感じですが、ファイルが長いとこれが役に立つのです。
例えば更新が頻繁に必要な場合とか、作業を翌日に持ち越す場合など「どこだっけ?」が無くなりますよね。

ジャンプの方法は簡単です!同じように「Ctrl+Shift+P」から「goto」と入れると

sublimebookmark2

このようにハイライトされると思います。ここからブックマーク一覧を、ブックマーク名とともに表示し、ジャンプすることが出来ます!

sublimebookmark3ご丁寧にファイルのアドレスまで…

順にジャンプするだけでいいって場合は「F2キー」だけでポポンっと飛び移ることが出来ます。

このid、classのCSSをすぐに確認したい…ときに「Goto-CSS-Declaration」

ちょっと検索しづらいのですが、「Install Package」>「Goto」とかで調べてみてください。

これを使うためには前提とする状況があります。

HTMLファイル、CSSファイルを同時に開いていることです。

この状態で、任意のclassやidにカーソルを置いた状態で「スーパーキー(Windowsキー)+ Alt + .」で、その要素のスタイルを指定しているCSSをハイライトしてくれます。

名称未設定-4

これは助かります!

このファイル…コーディングミスしちゃったまま進んでる…「Local History」で過去ファイルをバックアップしておこう

インストール後、任意のファイルで右クリックメニューから動作します。

Local history(Sublime Text)|ツーブロッカ

このまま進んでいくと、Local Historyが、問題があったであろうファイルの属するディレクトリをコピーしてくれており、「過去ファイル」のバックアップされたディレクトリにジャンプします。

これをクリックすると、選択したファイルを開くことが来ます。

 

以上です。また新しく見つけ次第書く感じです。

 

でわ!

プロフィール

東京でWebデザイナー・コーダーとして、フロントエンド的なことからグラフィックデザイン的なことをして、ごにょごにょと小さく活動中。Webクリエイターでは珍しい(?) HIPHOP, R&B好き。休日はよくカフェや漫画喫茶に出向いたりパン屋に行ったり、主に散歩しています。だいたいラーメンを食べて帰ってくる、そんな過ごし方です(都内のオススメ散歩コース募集中!)。デザインのトレンドやデザイン思考、HTML、CSSからSASS、Javascript、Wordpress構築などコーディングのTIPSなどをブログにアップしていきます。その他のことはtwitter( @satohmsys )まで。