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.

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