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

React.js + Vim

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.

Jake Worth

September 27, 2017
Tweet

More Decks by Jake Worth

Other Decks in Programming

Transcript

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

    Vim: some familiarity React.js + Vim - Jake Worth 7
  2. 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
  3. 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
  4. 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
  5. Legendarily Challenging » Basics are hard: 'How to exit the

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

    » Configurability React.js + Vim - Jake Worth 18
  7. Areas of Optimization 1. Appearance 2. Ease of use 3.

    Quality & consistency of code React.js + Vim - Jake Worth 21
  8. 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
  9. Appearance: JSX Syntax Highlighting " ~/.vimrc " Allow Vim-JSX to

    highlight *.js files let g:jsx_ext_required = 0 React.js + Vim - Jake Worth 33
  10. Appearance: Matching Tags " ~/.vimrc " Allow MatchTagAlways to highlight

    JSX let g:mta_filetypes = { \ 'javascript.jsx' : 1, \} React.js + Vim - Jake Worth 36
  11. 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