Tern for Vim - Speaker Deck

Slide 1

Slide 1 text

Tern for Vim

Slide 2

Slide 2 text

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

Slide 3

Slide 3 text

Demo

Slide 4

Slide 4 text

What's the Point? ● Better Omni completion for JavaScript ● Look up documentation ● Jump to definitions ● Comment parsing for type hints (JSDoc)

Slide 5

Slide 5 text

● 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

Slide 6

Slide 6 text

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

Slide 7

Slide 7 text

● 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

Slide 8

Slide 8 text

Create a .tern-project file: { "libs": [ "browser", "jquery" ], "plugins": { "node": {} } } Quick Start

Slide 9

Slide 9 text

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)

Slide 10

Slide 10 text

Keyboard Shortcuts td :TernDoc Documentation under cursor tb :TernDocBrowse Browse documentation tt :TernType Type hints td :TernDef Jump to definition tpd :TernDefPreview Jump to definition inside preview tsd :TernDefSplit Definition in new split ttd :TernDefTab Definition in new tab tr :TernRefs All references under cursor tR :TernRename Rename variable

Slide 11

Slide 11 text

Omni Completion CTRL-X CTRL-O Docs Completion

Slide 12

Slide 12 text

Type Hints :TernType tt Hints

Slide 13

Slide 13 text

index.js user.js require() and RequireJS

Slide 14

Slide 14 text

Browser/ES5 Features Docs :TernDoc td

Slide 15

Slide 15 text

{ "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...

Slide 16

Slide 16 text

● 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

Slide 17

Slide 17 text

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