Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.

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

4,373 views

Published on

2014.08.09 Re:Creator's Kansai 『SUBLIME SONIC 2014』 のスライドです。

Published in: Software
  • Be the first to comment

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

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

×