Sublime Text を加速する パッケージの紹介

SUBLIME SONIC 2014 Re:Creator's Kansai

2014.08.09

Sou-Lab.!

@sou_lab フリーランスデザインとかコーディングとか ディレクションとか

Web制作者のための Sassの教科書 Web制作者のための SublimeTextの教科書

今回は… ・Sublime Text3のパッケージを紹介しています。

・フロントエンド向けパッケージを紹介しています。

・スライドとデモを行き来してわちゃわちゃします🙇

!

Sublime Textは

拡張してなんぼ

コードをコピペして

コードをコピペして

検索するだけ

まずは、ひとまず 入れとこう系パッケージ

なにはともあれ、Emmet

[tab] or [Control]+[E]

[tab] or [Control]+[E]

それさっき見たよ！

コード展開がメインですが、 それ以外にも色々できます

コード展開がメインですが、 それ以外にも色々できます ・画像サイズ取得 ・画像Data URI変換 ・数値の増減 ・ファジーサーチ（コードヒントも出る） ・コード選択や操作のパワーアップ などなどSublime Textとの相性抜群

Emmet製その他パッケージ ・Emmet Style Reflector ・Emmet LiveStyle !

Emmet Style Reflector

htmlを展開と同時にセレクタを生成 （Sass/LESS用）

Sublime Text ⇔ ブラウザの 双方向編集が可能（ただし現状CSSのみ）

Emmet LiveStyle

レスポンシブのブラウザ検証ツール （Chromeエクステンション）

Emmet Re:View というのも出てましたね

Emmetと相性のいいパッケージ・Auto File Name（ファイル名保管） ・Inc-Dec-Value（数値増減やテキスト入れ替え） ・Hayaku（CSSはこっち派の人も） !

Dreamweaverの あの機能が欲しい

ドキュメントをバリデート → W3CValidators

セレクタにジャンプ → Goto CSS declaration !

or Goto Definition（標準機能）

ソースフォーマットの適用 → Tag or HTMLBeautify（HTML） → CSS Format（CSS）

閉じタグコメント（拡張機能） → CloseCommentTag

F12でブラウザを開く → Sidebar Enhancements

サーバーにアップ/ダウンロード → SFTP

クリッカブルマップ これはDw最強

クリッカブルマップ これはDw最強

サイト全体のパスの書き換えや検索置換や クリッカブルマップあたりはSublimeは苦手

最近よく聞く あのパッケージもある

すぐにパッケージが 開発される ありがたやありがたや

トレンドや新しいパッケージは wbond.netで確認できる

ポストプロセッサも便利

　 や で色々できる ポストプロセッサですが

　 　も簡単に ポストプロセッサれます

ベンダープレフィックスの調整 → Autoprefixer

ベンダープレフィックスの削除や追加、 ブラウザーのバージョンを指定可能。

CSSプロパティの順番調整 → CSS Comb !

プロパティの並び順は指定可能

メディアクエリをまとめる → SublimeCombineMediaQueries

バラバラに書いたメディアクエリも、 これで気にしなくてオケ このパッケージはPackageControl未登録なので、Add Repositoryを https://github.com/astronaughts/SublimeCombineMediaQueries

コードのミニファイ（軽量化） → Minify !

Minify系パッケージは他にも沢山あり

ミニファイをもどす → HTML-CSS-JS Prettify !

Minifyされたファイルのとき便利

セレクタが4095個を超えた → BlessCss

Sassってるとたーまになる

!

Sublime Textの教科書に 載ってない神パッケージ

コードをREPLしてしてくれる 評価結果はコメントに書き込まれる

Worksheet

変数を一覧表示＆呼び出し （Sass/Less/Stylus）

List stylesheet variables

CSSを評価するStyle Statsを Sublime Textで実行できる！ このパッケージはPackageControl未登録なので、Add Repositoryを https://github.com/astronaughts/SublimeStyleStats

Style Stats

!

パッケージを 沢山入れた時の問題解消

Sublime重くならない？ → 非同期だから重くならない 　3からはプラグインプロセスが分離、　 　パッケージが原因クラッシュもしない（はず）

キーバインドのバッティング → FindKeyConflicts

複数台に入れるのめんどい パッケージフォルダごと同期すれば 設定は同期できる → クラウドストレージにシンボリックリンク → Gitで同期（オススメ） → Sublimall（容量制限ありで微妙） !!

その他オススメパッケージは こちらをご参考に

リンク付き…( ृ｀ᾥ ´) ु…

Qiitaでも一覧載ってます。

ありがとうございました@sou_lab