成人无码视频,亚洲精品久久久久av无码,午夜精品久久久久久毛片,亚洲 中文字幕 日韩 无码

資訊專欄INFORMATION COLUMN

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

BlackFlagBin / 791人閱讀

摘要：為此，我實(shí)現(xiàn)一個(gè)插件，它使用和相同來對(duì)資源進(jìn)行解析，通過使用和一點(diǎn)簡(jiǎn)單的配置，我的就可以像一樣對(duì)代碼進(jìn)行智能感知了。

代碼智能感知一直被各種 IDE 工具所津津樂道，基于智能感知我們可以實(shí)現(xiàn)一些極大提高開發(fā)效率的事：

方法、變量名智能補(bǔ)全

點(diǎn)擊跳轉(zhuǎn)到定義處

參數(shù)返回值類型提示

變量重命名

Tern 是一個(gè)完全開源免費(fèi)的javascript解析引擎，同時(shí)它也為很多文本編輯都提供了 插件，它不止能實(shí)現(xiàn)上面那些功能，而且還內(nèi)置了 node文檔 和 mdn 的鏈接，通過插件我們最快的看到官方的文檔。通過這個(gè)視頻 https://vimeo.com/67215272 可以更直觀的了解。

記得1年多以前我在 vim 下用 tern 的時(shí)候經(jīng)常出現(xiàn)編輯器卡死、服務(wù)器沒有響應(yīng)等狀況，所以就放棄了，但是最近使用感覺完全不同了，以前糟糕的情況再?zèng)]有出現(xiàn)。

Tern 可以理解瀏覽器的API，通過設(shè)置插件理解 node 模塊的 API, 但是它對(duì)于 webpack 這種前端構(gòu)建工具是無知的，所以我們需要一種方法讓它也能理解 webpack 依賴解析邏輯。為此，我實(shí)現(xiàn)一個(gè) Tern 插件 https://gist.github.com/chemzqm/7ceee3040f1377a534e6，它使用和 webpack 相同 enhanced-resolve 來對(duì)資源進(jìn)行解析，通過使用neocomplete和一點(diǎn)簡(jiǎn)單的配置，我的 vim 就可以像 IDE 一樣對(duì)代碼進(jìn)行智能感知了。

下面是智能補(bǔ)全和函數(shù)定義提示的截圖，overlay 是 npm 上面的 component 組件 overlay-component

下面是函數(shù)跳轉(zhuǎn)的動(dòng)態(tài)圖，可以看到 Emitter 組件是在 package.json 里面通過 browser 屬性鏈接的 component-emitter

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

" 鼠標(biāo)停留在方法內(nèi)時(shí)顯示參數(shù)提示
let g:tern_show_argument_hints = "on_hold"
" 補(bǔ)全時(shí)顯示函數(shù)類型定義
let g:tern_show_signature_in_pum = 1
" 跳轉(zhuǎn)到瀏覽器
nnoremap tb :TernDocBrowse
" 顯示變量定義
nnoremap tt :TernType
" 跳轉(zhuǎn)到定義處
nnoremap tf :TernDef
" 顯示文檔
nnoremap td :TernDoc
" 預(yù)覽窗口顯示定義處代碼
nnoremap tp :TernDefPreview
" 變量重命名
nnoremap tr :TernRename
" location 列表顯示全部引用行
nnoremap ts :TernRefs

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

文章版權(quán)歸作者所有，未經(jīng)允許請(qǐng)勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。

轉(zhuǎn)載請(qǐng)注明本文地址：http://m.hztianpu.com/yun/86076.html

相關(guān)文章

  • 個(gè)人使用的 vim 插件集合

    摘要：擴(kuò)展了的，用于快速跳轉(zhuǎn)到配對(duì)的標(biāo)簽對(duì)編輯有很大幫助，新版以上自帶該插件快速編寫的神級(jí)插件，可支持快速編輯和的插件，可支持為文件提供函數(shù)提供快速對(duì)齊操作符解析顏色語法并用想對(duì)應(yīng)顏色做為背景色顯示，支持多種語法和文件類型，支持的代碼段管 matchit.vim 擴(kuò)展了 vim 的 %，用于快速跳轉(zhuǎn)到配對(duì)的標(biāo)簽（對(duì)編輯 html 有很大幫助）， 新版 vim 7.0 以上自帶該插件 emm...

    李濤 評(píng)論0 收藏0

  • 我的VS CODE

    摘要：對(duì)文件提供語法高亮和自動(dòng)補(bǔ)全對(duì)小程序文件提供補(bǔ)全和語法高亮只需要鍵入就會(huì)有微信的提示使用做路徑感知當(dāng)我們?cè)陧?xiàng)目中集成的時(shí)候，經(jīng)常會(huì)使用。 在日常開發(fā)中，我使用的編輯器是 VS CODE。不僅界面簡(jiǎn)潔好看，而且插件豐富，是前端開發(fā)的首選工具之一。這些插件和工具的目的是為了提高我們的開發(fā)效率，下面就我日常開發(fā)切身使用到和感受到有幫助的插件和方法做個(gè)總結(jié)。 VS CODE 常用的個(gè)人在用的插...

    X1nFLY 評(píng)論0 收藏0

  • flint簡(jiǎn)單初體驗(yàn)

    摘要：它能夠使得在不刷新瀏覽器的情況下，更改本地的前端代碼組件，瀏覽器自動(dòng)更新預(yù)覽。直接集成了這項(xiàng)技術(shù)，而且建立了專門的通道進(jìn)行錯(cuò)誤的實(shí)時(shí)反饋。命令行提供了三個(gè)主要的命令，。服務(wù)器關(guān)于服務(wù)器，其實(shí)是內(nèi)部起了一個(gè)基于的服務(wù)器，外加進(jìn)行消息的通訊。 跟著初探了下flintjs，的確會(huì)很棒，超級(jí)熱更新！ 學(xué)習(xí)地址： http://frontenddev.org/link/ali-11-11-...

    Batkid 評(píng)論0 收藏0

  • 面向web前端及node開發(fā)人員的vim配置

    摘要：之后，在終端輸入如果你需要支持，安裝支持到這里還沒有完，作為前端人，這個(gè)還不能正常工作，它需要一些依賴，下面我們來安裝這些依賴安裝查看回到目錄安裝之后需要在您的項(xiàng)目根目錄建立一個(gè)文件，沒有內(nèi)容，空白即可。 鑒于 window 下基本用不到 vim，所以下面內(nèi)容不再提及 window，具體可以在相應(yīng) github 中查看手冊(cè)操作基礎(chǔ)：已裝有上有 nodejs(npm)。沒裝的可以移步官網(wǎng)...

    mo0n1andin 評(píng)論0 收藏0

  • 面向web前端及node開發(fā)人員的vim配置

    摘要：之后，在終端輸入如果你需要支持，安裝支持到這里還沒有完，作為前端人，這個(gè)還不能正常工作，它需要一些依賴，下面我們來安裝這些依賴安裝查看回到目錄安裝之后需要在您的項(xiàng)目根目錄建立一個(gè)文件，沒有內(nèi)容，空白即可。 鑒于 window 下基本用不到 vim，所以下面內(nèi)容不再提及 window，具體可以在相應(yīng) github 中查看手冊(cè)操作基礎(chǔ)：已裝有上有 nodejs(npm)。沒裝的可以移步官網(wǎng)...

    Zoom 評(píng)論0 收藏0

發(fā)表評(píng)論

0條評(píng)論

閱讀需要支付1元查看
<