Tern for Vim

An introduction to Tern and the Tern Vim plugin

Transcript

1. Tern for Vim
2. Background • Tern analyses JavaScript • Created by Marijn Haverbeke • Crowd-funded • Raised €16,535 (goal was €10,000) • Confused? Try the demo: ternjs.net/doc/demo.html
3. Demo
4. What's the Point? • Better Omni completion for JavaScript • Look up documentation • Jump to definitions • Comment parsing for type hints (JSDoc)
5. • Node program invoked by a Vim plugin ◦ Plugins for other editors are also available • Uses Acorn1 to parse ECMAScript • Uses documentation from Mozilla, Node, and more npmjs.org/package/acorn How Tern Works
6. Architecture and Terminology "Plugins" • Programs that extend functionality • Example: JSDoc parser, enabled by default • Dependency resolution for Node and AMD "Libraries" • JSON descriptions found in defs/ • Documentation and type hints
7. • Requires Node • github.com/marijnh/tern_for_vim • Install Node component using npm (don't need to download Tern separately) cd .vim/bundle/tern_for_vim npm install Installation
8. Create a .tern-project file: { "libs": [ "browser", "jquery" ], "plugins": { "node": {} } } Quick Start
9. Enable keyboard shortcuts: let g:tern_map_keys=1 Automatic hints after a delay: let g:tern_show_argument_hints='on_hold' Configuration (in your .vimrc)
10. Keyboard Shortcuts <Leader> td :TernDoc Documentation under cursor <Leader> tb :TernDocBrowse Browse documentation <Leader> tt :TernType Type hints <Leader> td :TernDef Jump to definition <Leader> tpd :TernDefPreview Jump to definition inside preview <Leader> tsd :TernDefSplit Definition in new split <Leader> ttd :TernDefTab Definition in new tab <Leader> tr :TernRefs All references under cursor <Leader> tR :TernRename Rename variable
11. Omni Completion CTRL-X CTRL-O Docs Completion
12. Type Hints :TernType <Leader> tt Hints
13. index.js user.js require() and RequireJS
14. Browser/ES5 Features Docs :TernDoc <Leader> td
15. { "files": [{ "text": "var fs = require('fs');\nfs.readF\n", "type": "full", "name": "index.js" }], "query": { "end": { "line": 1, "ch": 8 }, "docs": true, "lineCharPositions": true, "file": "#0", "type": "completions", "types": true } } Server Protocol Example Full source code, sent by Vim Query type: documentation, refs, rename, files...
16. • Parser is "error-resilient", but files with syntax errors can cause unpredictable results • Large files and complex projects don't always seem to work as expected (increase timeout?) • Community? (more plugins...?) Caveats
17. More Information Tern: ternjs.net Tern for Vim: github.com/marijnh/tern_for_vim Slides: speakerdeck.com/aryoung/tern-for-vim @alex_young dailyjs.com