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