使用 Vim 搭建 JavaScript 開發環境


原文鏈接: https://spacevim.org/cn/use-vim-as-a-javascript-ide/

SpaceVim 是一個模塊化的 Vim IDE,針對 JavaScript 這一語言的支持主要依靠 lang#javascript 模塊以及與之相關的其它模塊。
的這篇文章主要介紹如何使用 SpaceVim 搭建 JavaScript 的開發環境,側重介紹跟 JavaScript 開發相關使用技巧。
在閱讀這篇文章之前,可以先閱讀《使用 Vim 搭建基礎的開發環境》,對語言相關以外的功能有一個大致的了解。

安裝模塊

SpaceVim 初次安裝時默認並未啟用 JavaScript 相關語言模塊。首先需要啟用
lang#javascript 模塊, 通過快捷鍵 SPC f v d 打開配置文件,添加:

[[layers]]
  name = "lang#javascript"

啟用 lang#javascript 模塊后,在打開 JavaScript 文件時,就可以使用語言專屬快捷鍵,這些快捷鍵都是以 SPC l 為前綴的。

代碼自動補全

代碼自動補全依賴 autocomplete 模塊,該模塊默認已經啟動了,為 SpaceVim 提供了自動補全功能。
該模塊會根據當前環境自動在多種補全引擎之間選擇合適的,
默認的補全引擎有:deoplete、neocomplete、ycm、asyncomplete 以及 neocomplcache。
幾種自動補全引擎當中,要數 deoplete 的體驗效果最好。

jside

語法檢查

checkers 模塊為 SpaceVim 提供了語法檢查的功能,該模塊默認已經載入。該模塊默認使用 neomake
這一異步語法檢查工具。對於 JavaScript 的支持是通過異步調用 eslint 命令來完成的。

可通過以下命令安裝:

npm install -g eslint-cli

eslint

工程文件跳轉

SpaceVim 自帶工程管理插件,可以識別項目根目錄,自動跳轉alternate文件。
可以在工程根目錄添加 .project_alt.json 文件,並加入以下內容:

{
  "src/*.js": {"alternate": "test/{}.js"},
  "test/*.js": {"alternate": "src/{}.js"}
}

通過以上的配置,就可以使用命令 :A 在源文件和測試文件之間進行跳轉。

快速運行

在編輯 JavaScript 文件時,可以快速運行當前文件,這個功能有點類似於 vscode 的 code runner 插件,默認的快捷鍵是 SPC l r。按下后,
會在屏幕下方打開一個插件窗口,運行的結果會被展示在窗口內。於此同時,光標並不會跳到該插件窗口,避免影響編輯。在這里需要說明下,
這一功能是根據當前緩存器調用相對應的 node 命令,無需保存文件。

jsrunner

代碼格式化

JavaScript 代碼格式化,主要依賴 format 模塊,同時需要安裝相關的后台命令 js-beautify

[[layers]]
  name = "format"

安裝 js-beautify

npm install -g js-beautify

交互式編程

在編輯 JavaScript 文件時,可通過快捷鍵 SPC l s i 啟動 node -i 交互窗口,之后使用快捷鍵將代碼發送至解釋器。默認快捷鍵都以 SPC l s 為前綴。

jsrepl


免責聲明!

本站轉載的文章為個人學習借鑒使用,本站對版權不負任何法律責任。如果侵犯了您的隱私權益,請聯系本站郵箱yoyou2525@163.com刪除。



 
粵ICP備18138465號   © 2018-2025 CODEPRJ.COM