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

BlackFlagBin 发布于2019-08-21 10:43 / 639人阅读

摘要：为此，我实现一个插件，它使用和相同来对资源进行解析，通过使用和一点简单的配置，我的就可以像一样对代码进行智能感知了。

代码智能感知一直被各种 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 tb :TernDocBrowse
" 显示变量定义
nnoremap tt :TernType
" 跳转到定义处
nnoremap tf :TernDef
" 显示文档
nnoremap td :TernDoc
" 预览窗口显示定义处代码
nnoremap tp :TernDefPreview
" 变量重命名
nnoremap tr :TernRename
" location 列表显示全部引用行
nnoremap ts :TernRefs

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

专线服务私有云基于人工智能的智能家居基于php的源代码人工智能感知智能 web前端和前端的区别

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/86076.html

个人使用的 vim 插件集合

摘要：扩展了的，用于快速跳转到配对的标签对编辑有很大帮助，新版以上自带该插件快速编写的神级插件，可支持快速编辑和的插件，可支持为文件提供函数提供快速对齐操作符解析颜色语法并用想对应颜色做为背景色显示，支持多种语法和文件类型，支持的代码段管 matchit.vim 扩展了 vim 的 %，用于快速跳转到配对的标签（对编辑 html 有很大帮助），新版 vim 7.0 以上自带该插件 emm...

李涛 2019-06-28 10:16 评论0 收藏0
我的VS CODE

摘要：对文件提供语法高亮和自动补全对小程序文件提供补全和语法高亮只需要键入就会有微信的提示使用做路径感知当我们在项目中集成的时候，经常会使用。在日常开发中，我使用的编辑器是 VS CODE。不仅界面简洁好看，而且插件丰富，是前端开发的首选工具之一。这些插件和工具的目的是为了提高我们的开发效率，下面就我日常开发切身使用到和感受到有帮助的插件和方法做个总结。 VS CODE 常用的个人在用的插...

X1nFLY 2019-08-26 13:29 评论0 收藏0
flint简单初体验

摘要：它能够使得在不刷新浏览器的情况下，更改本地的前端代码组件，浏览器自动更新预览。直接集成了这项技术，而且建立了专门的通道进行错误的实时反馈。命令行提供了三个主要的命令，。服务器关于服务器，其实是内部起了一个基于的服务器，外加进行消息的通讯。跟着初探了下flintjs，的确会很棒，超级热更新！学习地址： http://frontenddev.org/link/ali-11-11-...

Batkid 2019-08-19 17:13 评论0 收藏0
面向web前端及node开发人员的vim配置

摘要：之后，在终端输入如果你需要支持，安装支持到这里还没有完，作为前端人，这个还不能正常工作，它需要一些依赖，下面我们来安装这些依赖安装查看回到目录安装之后需要在您的项目根目录建立一个文件，没有内容，空白即可。鉴于 window 下基本用不到 vim，所以下面内容不再提及 window，具体可以在相应 github 中查看手册操作基础：已装有上有 nodejs(npm)。没装的可以移步官网...

mo0n1andin 2019-08-02 16:05 评论0 收藏0
面向web前端及node开发人员的vim配置

摘要：之后，在终端输入如果你需要支持，安装支持到这里还没有完，作为前端人，这个还不能正常工作，它需要一些依赖，下面我们来安装这些依赖安装查看回到目录安装之后需要在您的项目根目录建立一个文件，没有内容，空白即可。鉴于 window 下基本用不到 vim，所以下面内容不再提及 window，具体可以在相应 github 中查看手册操作基础：已装有上有 nodejs(npm)。没装的可以移步官网...

Zoom 2019-08-29 16:40 评论0 收藏0