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

2014.08.09 Re:Creator's Kansai 『SUBLIME SONIC 2014』 のスライドです。
https://recreators.doorkeeper.jp/events/12276

Transcript

2. S u b l i m e Te x t を加速する パッケージの紹介 SUBLIME SONIC 2014 Re:Creator's Kansai 2014.08.09
3. 自己紹介
4. Sou-Lab. 森田 壮 @sou̲lab フリーランス デザインとかコーディングとか ディレクションとか Web制作者のための Sassの教科書 Web制作者のための SublimeTextの教科書
5. 今回は… ・Sublime Text3のパッケージを紹介しています。 ・フロントエンド向けパッケージを紹介しています。 ・スライドとデモを行き来してわちゃわちゃします🙇 !
6. S u b l i m e Te x t は
7. 拡 張 して な ん ぼ
8. コ ー ド を コ ピペ して
9. コ ー ド を コ ピペ して
10. 検索するだけ
11. まずは、ひとまず 入れとこう系パッケージ
12. なにはともあれ、Emmet
13. [tab] or [Control]+[E]
14. [tab] or [Control]+[E]
15. それさっき見たよ！
16. コード展開がメインですが、 それ以外にも色々できます
17. コード展開がメインですが、 それ以外にも色々できます ・画像サイズ取得 ・画像Data URI変換 ・数値の増減 ・ファジーサーチ（コードヒントも出る） ・コード選択や操作のパワーアップ などなど Sublime Textとの相性抜群
18. Emmet製その他パッケージ ・Emmet Style Reflector ・Emmet LiveStyle !
19. E m m e t Style Reflector htmlを展開と同時にセレクタを生成 （Sass/LESS用）
20. Emmet LiveStyle Sublime Text ⇔ ブラウザの 双方向編集が可能（ただし現状CSSのみ）
21. Emmet Re:View というのも出てましたね レスポンシブのブラウザ検証ツール （Chromeエクステンション）
22. Emmetと相性のいいパッケージ ・Auto File Name（ファイル名保管） ・Inc-Dec-Value（数値増減やテキスト入れ替え） ・Hayaku（CSSはこっち派の人も） !
23. Dreamweaverの あの機能が欲しい
24. ドキュメントをバリデート → W3CValidators
25. セレクタにジャンプ → Goto CSS declaration ! o r G o t o D e f i n i t i o n（ 標 準 機 能 ）
26. ソ ース フ ォ ー マ ッ ト の 適 用 → T a g o r H T M L B e a u t i f y（H T M L） → C S S F o r m a t（C S S）
27. 閉 じ タ グ コ メ ン ト（ 拡 張 機 能 ） → CloseCommentTag
28. F12でブラウザを開く → Sidebar Enhancements
29. サーバーにアップ/ダウンロード → SFTP
30. クリッカブルマップ こ れ はD w 最強
31. クリッカブルマップ こ れ はD w 最強 サイト全体のパスの書き換えや検索置換や クリッカブルマップあたりはSublimeは苦手
32. 最近よく聞く あのパッケージもある
44. すぐにパッケージが 開発される ありがたやありがたや
45. トレンドや新しいパッケージは wbond.netで確認できる
46. ポストプロセッサも便利
47. や で色々できる ポ ス トプ ロ セ ッ サ で す が
48. も簡単に ポ ス トプ ロ セ ッ サ れ ま す
49. ベ ン ダープ レフィ ッ ク ス の 調 整 → Autoprefixer ベンダープレフィックスの削除や追加、 ブラウザーのバージョンを指定可能。
50. CSSプロパティの順番調整 → CSS Comb ! プロパティの並び順は指定可能
51. メ デ ィ アク エ リ を ま と め る → SublimeCombineMediaQueries バラバラに書いたメディアクエリも、 これで気にしなくてオケ このパッケージはPackageControl未登録なので、Add Repositoryを https://github.com/astronaughts/SublimeCombineMediaQueries
52. コ ー ド の ミ ニ フ ァ イ（ 軽 量 化 ） → Minify ! Minify系パッケージは他にも沢山あり
53. ミニファイをもどす → HTML-CSS-JS Prettify ! Minifyされたファイルのとき便利
54. セレクタが4095個を超えた → BlessCss Sassってるとたーまになる
55. ! Sublime Textの教科書に 載ってない神パッケージ
56. Worksheet コードをREPLしてしてくれる 評価結果はコメントに書き込まれる
57. List stylesheet variables 変数を一覧表示＆呼び出し （Sass/Less/Stylus）
58. Style Stats CSSを評価するStyle Statsを Sublime Textで実行できる！ このパッケージはPackageControl未登録なので、Add Repositoryを https://github.com/astronaughts/SublimeStyleStats
59. ! パッケージを 沢山入れた時の問題解消
60. キ ー バイ ン ド の バ ッ テ ィ ン グ → FindKeyConflicts
61. 複数台に入れるのめんどい パ ッ ケージフォルダご と同 期 す れ ば 設 定 は同期できる → クラウドストレージにシンボリックリンク → G i tで同期（オススメ ） → S u b l i m a l l（容量 制限 あ り で 微 妙 ） ! !
62. その他オススメパッケージは こちらをご参考に
63. Q i i t a で も 一 覧 載 って ま す。 リンク付き⁝(ृ ｀ ᾥ ´)ु ⁝
64. ありがとうございました @sou̲lab