React.js + Vim Jake Worth 1 

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

React.js + Vim - Jake Worth 3 

React.js + Vim - Jake Worth 4 

React.js + Vim - Jake Worth 5 

React.js + Vim - Jake Worth 6 

Who Is This Talk For? » React.js: some familiarity » Vim: some familiarity React.js + Vim - Jake Worth 7 

React.js + Vim == a fantastic development experience React.js + Vim - Jake Worth 8 

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

Agenda 1. Why Vim? 2. Building an Environment React.js + Vim - Jake Worth 10 

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

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 

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 

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 

React.js + Vim - Jake Worth 15 

Highly Configurable » Settings (~/.vimrc) » Mappings (nnoremap) » Functions » Plugins React.js + Vim - Jake Worth 16 

Legendarily Challenging » Basics are hard: 'How to exit the Vim editor?' (+1M SO views) » 'Vertical learning curve' React.js + Vim - Jake Worth 17 

Why bother using Vim? » Speed » Adoption » Depth » Configurability React.js + Vim - Jake Worth 18 

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

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

Areas of Optimization 1. Appearance 2. Ease of use 3. Quality & consistency of code React.js + Vim - Jake Worth 21 

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 

Appearance: Toggling Plugins " ~/.vimbundle Plug 'sbdchd/neoformat', { 'on': 'ToggleNeoformat' } React.js + Vim - Jake Worth 23 

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

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

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

React.js + Vim - Jake Worth 27 

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

React.js + Vim - Jake Worth 29 

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

React.js + Vim - Jake Worth 31 

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

Appearance: JSX Syntax Highlighting " ~/.vimrc " Allow Vim-JSX to highlight *.js files let g:jsx_ext_required = 0 React.js + Vim - Jake Worth 33 

React.js + Vim - Jake Worth 34 

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

Appearance: Matching Tags " ~/.vimrc " Allow MatchTagAlways to highlight JSX let g:mta_filetypes = { \ 'javascript.jsx' : 1, \} React.js + Vim - Jake Worth 36 

React.js + Vim - Jake Worth 37 

React.js + Vim - Jake Worth 38 

React.js + Vim - Jake Worth 39 

React.js + Vim - Jake Worth 40 

React.js + Vim - Jake Worth 41 

React.js + Vim - Jake Worth 42 

React.js + Vim - Jake Worth 43 

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

DEMO React.js + Vim - Jake Worth 45 

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

DEMO React.js + Vim - Jake Worth 47 

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

Ease of Use: File Navigation .projections.json { "app/javascript/packs/components/*.js": { "command": "component" } } React.js + Vim - Jake Worth 49 

DEMO React.js + Vim - Jake Worth 50 

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

DEMO React.js + Vim - Jake Worth 52 

Quality & Consistency: Best Practices https://github.com/neomake/neomake ESlint or JSHint React.js + Vim - Jake Worth 53 

DEMO React.js + Vim - Jake Worth 54 

Conclusion React.js + Vim - Jake Worth 55 

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

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