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

React.js + Vim

A9689bb4f705b8bede56deddf66c87ef?s=47 Jake Worth
September 27, 2017

React.js + Vim

Do you write React.js? Have you tried writing it… in Vim?

In this talk, we’ll explore how a 25-year-old text editor integrates with React.js, Facebook’s open-source JavaScript library for building user interfaces. We’ll transform a blank-ish slate into a supercharged development machine, leveraging the latest Vim plugins, settings, and workflows.

Expect to come away from this talk with a deeper knowledge and appreciation of this classic text editor, and a toolbelt for writing exceptional front-end code with it.

A9689bb4f705b8bede56deddf66c87ef?s=128

Jake Worth

September 27, 2017
Tweet

Transcript

  1. React.js + Vim Jake Worth 1

  2. About Me Developer at Hashrocket http://jakeworth.com @jwworth React.js + Vim

    - Jake Worth 2
  3. React.js + Vim - Jake Worth 3

  4. React.js + Vim - Jake Worth 4

  5. React.js + Vim - Jake Worth 5

  6. React.js + Vim - Jake Worth 6

  7. Who Is This Talk For? » React.js: some familiarity »

    Vim: some familiarity React.js + Vim - Jake Worth 7
  8. React.js + Vim == a fantastic development experience React.js +

    Vim - Jake Worth 8
  9. Slides » PDF: https://speakerdeck.com/jwworth React.js + Vim - Jake Worth

    9
  10. Agenda 1. Why Vim? 2. Building an Environment React.js +

    Vim - Jake Worth 10
  11. Why Vim? React.js + Vim - Jake Worth 11

  12. What is Vim? A FOSS advanced text editor released by

    Bram Moolenaar in 1991. Based in the Vi text editor. 1. Modal. 2. Highly configurable. 3. Legendarily challenging. React.js + Vim - Jake Worth 12
  13. Modality Big idea! ! 1. We spend more time reading

    code than writing it. 2. An editor should be optimized for what you do most often. React.js + Vim - Jake Worth 13
  14. Modality Mode Entry Command What is it for? Normal (default)

    ESC Reading++ Visual v Selecting Insert i Writing Command : Meta commands React.js + Vim - Jake Worth 14
  15. React.js + Vim - Jake Worth 15

  16. Highly Configurable » Settings (~/.vimrc) » Mappings (nnoremap) » Functions

    » Plugins React.js + Vim - Jake Worth 16
  17. Legendarily Challenging » Basics are hard: 'How to exit the

    Vim editor?' (+1M SO views) » 'Vertical learning curve' React.js + Vim - Jake Worth 17
  18. Why bother using Vim? » Speed » Adoption » Depth

    » Configurability React.js + Vim - Jake Worth 18
  19. Why Vim? https://hashrocket.com/blog/posts/why-vim React.js + Vim - Jake Worth 19

  20. Building an Environment React.js + Vim - Jake Worth 20

  21. Areas of Optimization 1. Appearance 2. Ease of use 3.

    Quality & consistency of code React.js + Vim - Jake Worth 21
  22. Appearance: Overview » Dictated by plugins » Plugins are written

    in VimScript » Plugins managed by plugin managers (vundle, vim-pathogen, vim-plug) React.js + Vim - Jake Worth 22
  23. Appearance: Toggling Plugins " ~/.vimbundle Plug 'sbdchd/neoformat', { 'on': 'ToggleNeoformat'

    } React.js + Vim - Jake Worth 23
  24. Appearance: Plug Status :PlugStatus - neoformat: OK (not loaded) :ToggleNeoformat

    React.js + Vim - Jake Worth 24
  25. Appearance: Plug Status :PlugStatus - neoformat: OK React.js + Vim

    - Jake Worth 25
  26. Appearance: No Settings or Initialization $ vim -u NONE src/containers/search_bar.js

    React.js + Vim - Jake Worth 26
  27. React.js + Vim - Jake Worth 27

  28. Appearance: Basic Plugins Only $ vim src/containers/search_bar.js React.js + Vim

    - Jake Worth 28
  29. React.js + Vim - Jake Worth 29

  30. Appearance: JS Syntax Highlighting https://github.com/pangloss/vim-javascript :ToggleVimJavaScript React.js + Vim -

    Jake Worth 30
  31. React.js + Vim - Jake Worth 31

  32. Appearance: JSX Syntax Highlighting https://github.com/mxw/vim-jsx React.js + Vim - Jake

    Worth 32
  33. Appearance: JSX Syntax Highlighting " ~/.vimrc " Allow Vim-JSX to

    highlight *.js files let g:jsx_ext_required = 0 React.js + Vim - Jake Worth 33
  34. React.js + Vim - Jake Worth 34

  35. Appearance: Matching Tags https://github.com/valloric/MatchTagAlways React.js + Vim - Jake Worth

    35
  36. Appearance: Matching Tags " ~/.vimrc " Allow MatchTagAlways to highlight

    JSX let g:mta_filetypes = { \ 'javascript.jsx' : 1, \} React.js + Vim - Jake Worth 36
  37. React.js + Vim - Jake Worth 37

  38. React.js + Vim - Jake Worth 38

  39. React.js + Vim - Jake Worth 39

  40. React.js + Vim - Jake Worth 40

  41. React.js + Vim - Jake Worth 41

  42. React.js + Vim - Jake Worth 42

  43. React.js + Vim - Jake Worth 43

  44. Ease of Use: JavaScript Snippets https://github.com/epilande/vim-es2015-snippets React.js + Vim -

    Jake Worth 44
  45. DEMO React.js + Vim - Jake Worth 45

  46. Ease of Use: React.js Snippets https://github.com/epilande/vim-react-snippets React.js + Vim -

    Jake Worth 46
  47. DEMO React.js + Vim - Jake Worth 47

  48. Ease of Use: File Navigation https://github.com/tpope/vim-projectionist React.js + Vim -

    Jake Worth 48
  49. Ease of Use: File Navigation .projections.json { "app/javascript/packs/components/*.js": { "command":

    "component" } } React.js + Vim - Jake Worth 49
  50. DEMO React.js + Vim - Jake Worth 50

  51. Quality & Consistency: Autoformatting https://github.com/prettier/prettier https://github.com/sbdchd/neoformat React.js + Vim -

    Jake Worth 51
  52. DEMO React.js + Vim - Jake Worth 52

  53. Quality & Consistency: Best Practices https://github.com/neomake/neomake ESlint or JSHint React.js

    + Vim - Jake Worth 53
  54. DEMO React.js + Vim - Jake Worth 54

  55. Conclusion React.js + Vim - Jake Worth 55

  56. Thanks! Jake Worth http://jakeworth.com @jwworth React.js + Vim - Jake

    Worth 56
  57. Resources » https://gist.github.com/jwworth/aaf063d9e0137e05369613749e5cf997 » https://github.com/epilande/vim-es2015-snippets » https://github.com/epilande/vim-react-snippets » https://github.com/eslint/eslint »

    https://github.com/hashrocket/dotmatrix » https://github.com/hashrocket/dotmatrix » https://github.com/jshint/jshint » https://github.com/junegunn/fzf.vim » https://github.com/junegunn/vim-plug » https://github.com/mxw/vim-jsx » https://github.com/neomake/neomake » https://github.com/pangloss/vim-javascript » https://github.com/prettier/prettier » https://github.com/sbdchd/neoformat » https://github.com/valloric/MatchTagAlways » https://hashrocket.com/blog/posts/writing-prettier-javascript-in-vim » https://stackoverflow.com/questions/11828270/how-to-exit-the-vim-editor » https://unsplash.com/@samuelzeller React.js + Vim - Jake Worth 57