STAFF BLOG スタッフブログ

Sublime Textを使うんだったら入れとくといいプラグイン

Sublime Text使ってますか。
使っているもののいまいち効率化できてないかも…という人や、
どのプラグインいれたらいいかわからない、あるいは入れてるけどあんまり使っていない...という人もいるのではと思います。
そんなわけで今回は特におすすめできるものをピックアップしてみました。

Emmet...Zen coding的なの

Emmet

Zen coding的なのというよりはZen codingが進化したやつがこれです。
個人的に、マークアップするなら絶対いれときたいやつNo1です。
Zen Codingのプラグインもありますが、それよりもこっちの方がおすすめです。
(もし既にZen Codingをインストールしてる場合はアンインストールしてこっちを使った方がいいかも。)
簡単に説明すると...

!

と入力してCtrl + E を押すと

<!doctype html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    &<title>Document</title>
</head>
<body>
 
</body>
</html>

という風にHTML5のひな形を一気に展開してくれる便利なやつです。

他にどういうのがあるか知りたい人はドキュメントをのぞいてみてください。
いちいち覚えなくてもチートシートを活用しつつ徐々になれていくといいと思います。
チートシートをみていただくとわかるかと思いますが、CSSの記述もびっくりするぐらい短くてすみます。
が、CSSはまた別に便利なプラグインがあったりします。

Hayaku...CSSの入力をスピーディーにする

Hayaku

個人的に、マークアップするなら絶対いれときたいやつNo2です。
数字込みの入力だとEmmetの方が効率的ですが、
それ以外だとこっちの方がいろいろ融通がききます。

たとえば、oh と打ってtabを打つだけで overflow: hidden; が展開されます。
短縮系がよくわからなくても適当に2、3文字ピックアップして試しに打ってみたら
かなりの確率で思うように展開されたりする、なかなか期待をうらぎらないやつです。

Emmetとの共用したい場合ショートカットがかぶるので、
Preference > Package Settings > Emmet > Setting - User から設定から、↓下記コード記述して、変更しておきましょう。

{
    // TABキーによる展開を対象の言語(ファイル)のときに無効化する
    "disable_tab_abbreviations_for_scopes": "css,less,sass,scss,stylus"
}

AutoFileName...画像ファイル保管機能

AutoFileName

個人的に、マークアップするなら絶対いれときたいやつNo3です。
画像のファイル名や、CSSの文字色、背景色、カラー値、画像の変換などをしてくれます。
“img”と入力し[Tab]キーを押します。
階層を指定すると、その階層にある画像ファイルのリストが表示され、
選択した画像のheightとWidthが自動補完されます。
なぜか順番がheight→Widthなので、これが気持ち悪いという人は
環境設定ファイルに

"afn_insert_width_first": true

を追加してください。

画像を差し替えてのサイズ変更は自動更新されないので、
そういうときは、EmmetのUpdate Image Size(Ctrl+Shift+I)を使うと便利です。

話はそれますが、Fireworksの拡張機能ImageSnippetも要所要所合わせて使うと便利かもです。

BoundKeys...パッケージのショートカットを一覧表示

BoundKeys

いろいろパッケージをいれていくと、ショートカットがかぶってて使えないこともでてきますよね。
そんなときにいれとくと便利です。

Inc-Dec-Value...CSS内の数値を↑↓キーで増減する

Inc-Dec-Value

数字、カラーコード、日付、曜日、true/false、left/rightの値を↑↓キーで増減できます。
デフォルトの増減値は変更はこんなかんじです。
1増減 option + ↑↓
10増減 Win + Alt + ↑↓
100増減 Ctrl + Win + ↑↓
ショートカットが一部Emmetのとかぶってる部分があるので注意してください。

Nettuts+ Fetch...フレームワークをすばやくいれる

Nettuts + Fetch

よく使うjQueryやリセット用のCSS、フレームワーク、Wordpress等のCMS等をあらかじめ設定しておくことで、コマンド素早くでダウンロード・展開してくれます。
初期状態ではjQueryとHTML5 Boilerplateが設定されてます。

{
    "files":
    {
        "jquery": "http://code.jquery.com/jquery.min.js"
    },
    "packages":
    {
        "html5-boilerplate": "http://github.com/h5bp/html5-boilerplate/zipball/v2.0stripped"
    }
}

お好みでnormalize.cssなどよく使うものを設定しておくといいです。

SideBarEnhancements...サイドバーメニュー拡張

SideBarEnhancements

サイドバー右クリックのメニューを拡張するプラグインです。
デフォルトではファイル名変更、削除、フォルダを開くしかないですが、
これを入れるとコピー、複製、移動、検索、プロジェクトの設定などができるようになります。
またProject→Edit Projects Preview URLs を選択し、
jsonファイルにローカルディレクトリとテストサーバのURLを入れておくことで
F12を押すとurl_testingに指定したURLが、
Alt+F12を押すとurl_productionで指定したURLで確認できます。

{
    "[プロジェクトのパス]": {
        "url_testing":"http://ローカルディレクトリのURL", // F12で起動
        "url_production":"http://テストサーバのURL" // Alt+F12で起動
    }
}

詳細は動画をチェックしてみてください。

Local History...ファイルの変更履歴管理

Local History

Gitがある場合はいらないかもですが、もしなければいれておくと便利かと思います。
保存する度に自動的にバックアップを取ってくれるだけでなく、差分表示もできます。
オプション設定では履歴を残す日数、上限のサイズ、履歴保存のタイミングなどを設定できます。

SublimeLinter...リアルタイムでコードの構文チェック

SublimeLinter

問題があった個所をハイライトしてくれるので便利です。
言語ごとに別途Linter もインストールする必要があります。

All Autocomplete...コード補完

All Autocomplete

デフォルトでは補完できない、ファイル中にあるワード(タグ、関数、クラス名等)を補完してくれます。

Markdown Preview...Markdownをブラウザで表示

Markdown Preview

MarkdownのテキストからHTMLを生成し、ブラウザーでプレビューできるツールです。
個人的に最近はメモをとるのにはだいたいMarkdown記法で書くようにしてます。
覚えることも少なく、早く、簡単に読みやすくできるのでおすすめです。

LiveReload...ブラウザを自動更新する

LiveReload

Sublime Textでファイルを保存すると、ブラウザで自動更新してくれます。
Chrome、Firefox、Safariでエクステンションのインストールが必要になります。

Live Style...Sublime Textとブラウザで相互編集

Live Style

まだベータ版ではありますが、Sublime TextとChromeまたはSafariのデベロッパーツールで相互に編集ができます。(ちなみにscssも使えます。)
動作については動画を確認してみてください。

以上、なるべくしぼったつもりが少し多くなってしまった感がありますね...。
まぁ、簡単にまとめると、Emmet、Hayaku、AutoFileNameはコーディングする上で入れとくといいよ!という話でした。

この他にも便利なプラグインはたくさんあるので、いろいろ探してみてはいかがでしょうか。

INDEXブログ一覧へ
CONTACTお問い合わせはこちら