Sublime Textで更新されたHTMLファイルをすばやくブラウザでプレビューする方法

• Browser Refresh ってパッケージをぶっこむ。
• そしてkeybindをいじる。
• やりかたの参考はこちら -> Sublime Text 2で素早くブラウザプレビューする方法

んで、これだけだとhtmlとかphp以外のファイルでも、更新のたびにブラウザがリロードされちゃってうざいんで、keybindに以下のcontextを設定する。これで、html, php, css, scssの時だけ保存と同時にブラウザを更新できるよー。

// Browser Refresh
{ "keys": ["super+s"], "command": "browser_refresh",
  "args": {
    "auto_save": true,
    "delay": 0.0,
    "activate_browser": false,
    "browser_name" : "Google Chrome"
  },
   "context": [
    {
      "key": "selector",
      "operator": "equal",
      "operand": "text.htm,text.html,source.php,source.scss,source.css"
    },
    { "key": "selector", "operator": "not_equal", "operand": "text.html.markdown" }
  ]
},

以上おしまい。

追記) markdownの保存時にもブラウザが更新されてウザイので、上記コードを一部変更しました。

Sublime Text 3 で MarkDown をサクサク書くよ。

SublimeText で MarkDown ドキュメント書く場合、ブラウザでプレビューするパッケージ入れてもいいんだけど、いちいちブラウザ出てくるとうざいんだよね。そこで、Marked でプレビューする方が圧倒的におすすめ。たしか450円ぐらいしたけどね。

やりかたはココにスクリーンキャストが落ちてるから見てちょ。
https://tutsplus.com/lesson/sublime-and-markdown-with-marked/

んで、Markedの設定を半透明＆OnTopにしておくとよい。Tool > Build System > Automatic を選択し、⌘-BでビルドするとMarkedが立ち上がってプレビューしてくれる。ついでに SublimeOnSaveBuild ってパッケージをぶっこんであげると、保存する度にプレビューが更新されるて便利だよ(リアルタイムプレビューではないんだけど)。

ところでSublimeTextガシガシ使ってる人は
"trim_trailing_white_space_on_save": true
とかやって行末の余計な空白を自動削除したりしてると思うんだけど、それだとwhitespace使ったMarkDownの改行が使えなくなっちゃうのですね。

その場合は、、、
パッケージが入ってるフォルダにMarkdown.sublime-settingsってファイルを作って、

{
"trim_trailing_white_space_on_save": false
}

って設定を書き込んであげましょう。するとどうでしょう、MarkDown編集時のみ文末空白の自動削除が無効になりますよー。すごい！

これでMOUとかKOBITOとか使ってる人をバカにできますね。

Sublime Text 3 設定

バージョンアップしたのでメモっておく。

{

 //エディタ表示関連
 "color_scheme": "Packages/Railscasts.tmTheme",

 "font_face": "Ricty",
 "font_size": 14.0,
 "font_options":
  [ "no_italic", "no_round" ],
 "line_padding_bottom": 3,
 "line_padding_top": 3,

 "margin": 0,    // Spacing btw gutter & text
 "rulers": [ 80, 100, 120 ],
 "word_wrap": true,
 "highlight_line": true,
 "scroll_past_end": true,
 "draw_white_space": "all", // "none", "all", "selection"

 // エディタ操作関連
 "spell_check": true,
 "indent_to_bracket": true, // Adds whitespace up to first open bracket
 "match_brackets_angle": true,
 "move_to_limit_on_up_down": true,
 "trim_trailing_white_space_on_save": true,
 "tab_completion": true,  // shift+tab for explicit tab


 // UI関連
 "theme": "Soda Dark.sublime-theme",
 "highlight_modified_tabs": true,
 "bold_folder_labels": true,


 // Application Behavior Settings
 "open_files_in_new_window": false,
 "preview_on_click": false,
 "enable_telemetry": false,
 "ignored_packages":
 [
  "Auto Encoding for Ruby",
  "All Autocomplete",
  "Vintage",
  "Ruby on Rails snippets",
  "RubyFormat",
  "LESS",
  "AppleScript",
  "LESS-build"
 ],


 // その他、よくわからんの。
 "build_env": {
  "PATH": "/usr/local/bin:/usr/local/sbin:/usr/local/share:/usr/bin:/bin:/usr/sbin:/sbin:/opt/X11/bin"
 },
 "detect_slow_plugins": false,
 "disable_formatted_linebreak": true,
 "vintage_ctrl_keys": false
}

追記：
SublimeCodeIntelを有効にするとなぜかコンテクストメニューが使えなくなるので、Disableした。それと、BracketHighlighterが機能していなかったので、ST3ブランチを入れなおした。

SublimeText2からDashを使う方法

DashというDocumentViewerが非常に便利。
ついでにSublimeTextからショートカットで開けるようにすると、とっても捗るよ。

まずは Package Control から DashDoc というプラグインをインストールして、以下の keybind を設定。

Preferences > Package Settings > DashDoc > Key Bindings – Default にて以下をコメントアウト

[
  // { "keys": ["ctrl+h"], "command": "dash_doc"},
  // { "keys": ["ctrl+alt+h"], "command": "dash_doc",
  //                           "args": { "syntax_sensitive": "true" } }
]

Preferences > Package Settings > DashDoc > Key Bindings – User に以下を追加(末尾に追加する場合は最後の","をつけないようにね)。

{ "keys": ["command+shift+h"], "command": "dash_doc" },
{ "keys": ["command+h"], "command":"dash_doc",
    "args": { "syntax_sensitive": true } },

これで ⌘+h または ⌘+shift+h で一発で Dash が開くよ。
ついでにDashの Preference > General > Window style を "HUD"モードにしておくと、SublimeText をフルスクリーンで使ってる時にも同じ画面上に Dash を表示できて素晴らしい。

以上おしまい。

ref) Dash - Documentation Browser, Snippet Manager - Kapeli http://kapeli.com/dash
ちなみに今、DashのPremiumライセンスが600円の期間限定セール中。

SublimeText2でCoffeeScript

以下のプラグインをインストール
- CoffeeScript
- CoffeeScriptCompile
- SublimeOnSaveBuild → 保存する度に自動コンパイル

SublimeText2のショートカットを強化した

マルチレイアウトでファイル間を行ったり来たりしながら作業するときに、グループの切り替えが非常に面倒だったので、このパッケージを追加したら超快適になった。

chrisguilbeau / cg-sublime / changeset / 9d5e18232892 — Bitbucket http://goo.gl/Yk91N

next_groupのショートカットは、Ctrl-Lが空いていたのでそれを設定したのだ。

SublimeText2とTerminal用にRictyフォントをインストールした

まずはFontforgeをインストール

> brew install fontforge

Rictyフォルダを適当に作ってそこにInconsolataフォントを突っ込む

> curl -o inconsolata.otf -LO 'http://levien.com/type/myfonts/Inconsolata.otf'

Migu-1M フォントも突っ込む

> curl -o migu-1m.zip -LO 'http://sourceforge.jp/frs/redir.php?m=jaist&f=%2Fmix-mplus-ipa%2F56156%2Fmigu-1m-20120411-2.zip'

Miguはzipなので解凍

> unzip migu-1m.zip

Rictyを生成する

> sh ricty_generator.sh inconsolata.otf migu-1m-20120411-2/migu-1m-regular.ttf migu-1m-20120411-2/migu-1m-bold.ttf

出来上がったフォントをFontBookに突っ込んで、terminal/sublで設定する。
ちなみにSublime TextはPreference > Settings - Userに次の一行を追加。

"font_face": "Ricty",

以上おしまい。