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

BlackFlagBin 發布于2019-08-21 10:43 / 735人閱讀

摘要：為此，我實現一個插件，它使用和相同來對資源進行解析，通過使用和一點簡單的配置，我的就可以像一樣對代碼進行智能感知了。

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

以后不用再費勁的找文檔或者翻代碼了:)

GPU云服務器云服務器基于人工智能的智能家居基于php的源代碼人工智能感知智能 web前端和前端的區別

文章版權歸作者所有，未經允許請勿轉載,若此文章存在違規行為，您可以聯系管理員刪除。

轉載請注明本文地址：http://specialneedsforspecialkids.com/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