基于tern和webpack的前端代码智能感知

代码智能感知一直被各种 IDE 工具所津津乐道，基于智能感知我们可以实现一些极大提高开发效率的事：

• 方法、变量名智能补全

• 点击跳转到定义处

• 参数返回值类型提示

• 变量重命名

Tern 是一个完全开源免费的javascript解析引擎，同时它也为很多文本编辑都提供了 插件，它不止能实现上面那些功能，而且还内置了 node文档 和 mdn 的链接，通过插件我们最快的看到官方的文档。通过这个视频 https://vimeo.com/67215272 可以更直观的了解。

记得1年多以前我在 vim 下用 tern 的时候经常出现编辑器卡死、服务器没有响应等状况，所以就放弃了，但是最近使用感觉完全不同了，以前糟糕的情况再没有出现。

Tern 可以理解浏览器的API，通过设置插件理解 node 模块的 API, 但是它对于 webpack 这种前端构建工具是无知的，所以我们需要一种方法让它也能理解 webpack 依赖解析逻辑。为此，我实现一个 Tern 插件 https://gist.github.com/chemzqm/7ceee3040f1377a534e6，它使用和 webpack 相同 enhanced-resolve 来对资源进行解析，通过使用neocomplete和一点简单的配置，我的 vim 就可以像 IDE 一样对代码进行智能感知了。

下面是智能补全和函数定义提示的截图，overlay 是 npm 上面的 component 组件 overlay-component

下面是函数跳转的动态图，可以看到 Emitter 组件是在 package.json 里面通过 browser 属性链接的 component-emitter

最后分享下 tern-for-vim 的配置：

" 鼠标停留在方法内时显示参数提示
let g:tern_show_argument_hints = 'on_hold'
" 补全时显示函数类型定义
let g:tern_show_signature_in_pum = 1
" 跳转到浏览器
nnoremap <leader>tb :TernDocBrowse<cr>
" 显示变量定义
nnoremap <leader>tt :TernType<cr>
" 跳转到定义处
nnoremap <leader>tf :TernDef<cr>
" 显示文档
nnoremap <leader>td :TernDoc<cr>
" 预览窗口显示定义处代码
nnoremap <leader>tp :TernDefPreview<cr>
" 变量重命名
nnoremap <leader>tr :TernRename<cr>
" location 列表显示全部引用行
nnoremap <leader>ts :TernRefs<cr>

以后不用再费劲的找文档或者翻代码了:)