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

来源:互联网 时间:1970-01-01

代码智能感知一直被各种 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>

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


相关阅读:
Top