Upgrade to Pro — share decks privately, control downloads, hide ads and more …

LiveStyle for Vim - Quick start

LiveStyle for Vim - Quick start

LiveStyle for Vim の使い方。
kanazawa.rb meetup 12 発表資料。

Cb057b585817007ba2a931a81ef9398f?s=128

Tomokazu Kiyohara

August 24, 2013
Tweet

Transcript

  1. LiveStyle for Vim Quick start 2013/08/24 - kanazawa.rb meetup 12

  2. Emmet LiveStyle http://livestyle.emmet.io/ "Instant updates: see changes as-you-type. No file

    saving, no page reloading."
  3. Demo Movie http://www.youtube.com/watch?v=iQLhGbkupS4

  4. Quick start http://livestyle.emmet.io/usage/ "1. Install “LiveStyle” plugin from Package Control

    in Sublime Text."
  5. Quick start http://livestyle.emmet.io/usage/ "1. Install “LiveStyle” plugin from Package Control

    in Sublime Text."
  6. None
  7. None
  8. LiveStyle for Vim https://github.com/mattn/livestyle-vim

  9. LiveStyle for Vim https://github.com/mattn/livestyle-vim http://mattn.kaoriya.net/ mattn_jp

  10. LiveStyle for Vim http://mattn.kaoriya.net/ mattn_jp https://github.com/mattn/livestyle-vim also Emmet.vim http://mattn.github.io/emmet-vim/

  11. Quick start for Vim

  12. Quick start for Vim Vim livestyle-vim livestyled (included in livestyle-vim)

    Google Chrome LiveStyle Extension
  13. Quick start for Vim Vim livestyle-vim livestyled (included in livestyle-vim)

    Google Chrome LiveStyle Extension
  14. livestyle-vim Vundle.vim Bundle 'mattn/livestyle-vim' NeoBundle.vim NeoBundle 'mattn/livestyle-vim'

  15. Quick start for Vim Vim livestyle-vim livestyled (included in livestyle-vim)

    Google Chrome LiveStyle Extension
  16. livestyled LiveStyle connection handling server Compile required ${bundle_dir}/livestyle-vim/livestyled/livestyled.go

  17. livestyled LiveStyle connection handling server Compile required ${bundle_dir}/livestyle-vim/livestyled/livestyled.go

  18. Setup Go lang (osx) $ brew install go

  19. Setup depend libs (osx) $ brew install mercurial $ mkdir

    ~/.go $ export GOPATH=~/.go $ go get code.google.com/p/go.net/websocket
  20. Compile livestyled $ cd ${bundle_dir}/livestyle-vim/livestyled $ go build livestyle.go

  21. Quick start for Vim Vim livestyle-vim livestyled (included in livestyle-vim)

    Google Chrome LiveStyle Extension
  22. LiveStyle Extension https://chrome.google.com/webstore/detail/emmet- livestyle/diebikgmpmeppiilkaijjbdgciafajmg

  23. LiveStyle Extension https://chrome.google.com/webstore/ Search 'Emmet LiveStyle'

  24. How to Use

  25. Flow Access site w/ Chrome Open Developer tool (LiveStyle panel)

    Launch Vim & livestyled Bind css via LiveStyle panel Edit Edit Edit
  26. Flow Access site w/ Chrome Open Developer tool (LiveStyle panel)

    Launch Vim & livestyled Bind css via LiveStyle panel Edit Edit Edit
  27. Access site w/ Chrome

  28. Flow Access site w/ Chrome Open Developer tool (LiveStyle panel)

    Launch Vim & livestyled Bind css via LiveStyle panel Edit Edit Edit
  29. Open Developer tool(LiveStyle Panel)

  30. Open Developer tool(LiveStyle Panel)

  31. Flow Access site w/ Chrome Open Developer tool (LiveStyle panel)

    Launch Vim & livestyled Bind css via LiveStyle panel Edit Edit Edit
  32. Launch Vim & livestyled

  33. Launch Vim & livestyled

  34. Launch Vim & livestyled

  35. Launch Vim & livestyled

  36. Flow Access site w/ Chrome Open Developer tool (LiveStyle panel)

    Launch Vim & livestyled Bind css via LiveStyle panel Edit Edit Edit
  37. Bind css via LiveStyle panel

  38. Bind css via LiveStyle panel

  39. Flow Access site w/ Chrome Open Developer tool (LiveStyle panel)

    Launch Vim & livestyled Bind css via LiveStyle panel Edit Edit Edit
  40. Edit Edit Edit

  41. Edit Edit Edit

  42. Caution

  43. Restriction

  44. Happy coding !!

  45. "kanazawa.rb ?"

  46. scss/sass supported

  47. scss/sass supported scss/sass command required set ft=scss/sass Heavy ...

  48. Thank you Tomokazu Kiyohara http://github.com/kiyohara http://facebook.com/tomokazu.kiyohara