Tide: 比lsp-mode更好的JavaScript智慧補全外掛
LSP (Language Server Protocol) 是微軟領導開發的程式語言語法補全和程式碼分析框架, 好處是全世界黑客都一起開發 LSP 後端, 不論你用的是 Emacs, Vim 還是 Sublime, VSCode, Elicpse, IntelliJ 等程式設計工具, 都可以享受同等智慧的語法補全後端.
Emacs 的 ofollow,noindex">lsp-mode 是LSP協議在Emacs的客戶端實現.
lsp-mode現在能夠很好的支援 C++, Python, Ruby, Golang, Haskell, OCamel, Rust, PHP等語言.
當然也包括 JavaScript.
lsp-mode 對 JavaScript 的支援主要靠 javascript-typescript-langserver 這個後端來實現.
不過經過一個月的體驗, lsp-mode 現在對 JavaScript 的補全支援智慧做到基本, 並不夠智慧, 直到今天遇到 tide 這個外掛.
tide 使用的是 TypeScript/wiki/Standalone-Server-%28tsserver%29" target="_blank" rel="nofollow,noindex">tsserver , 也就是微軟給 VSCode 開發的JavaScript智慧補全後端, 可以很好的支援 JavaScript 和 TypeScript.
安裝方法
1. 安裝 tsserver 補全後端
npm install -g typescript npm install jquery --save
- typescript 這個包會安裝 tsserver
- jquery --save 這個包安裝以後, tsserver 就不會抱怨找不到 JQuery 的 $ 符號了 ;)
2. 安裝 tide
從 https://github.com/ananthakumaran/tide 下載原始碼後放到 Emacs 的載入目錄後, 把下面程式碼寫入 ~/.emacs 中:
(require 'tide) (dolist (hook (list 'js2-mode-hook 'rjsx-mode-hook 'typescript-mode-hook )) (add-hook hook (lambda () ;; 初始化 tide (tide-setup) ;; 當 tsserver 服務沒有啟動時自動重新啟動 (unless (tide-current-server) (tide-restart-server)) )))
體驗
開啟 *.js 檔案後, tide 會自動把當前目錄識別為 root 目錄 (這對於大部分的 WebPack 專案來說已經是足夠了的)
Tide 補全
其他比較有用的命令:
- tide-jump-to-definition: 跳轉到函式或變數定義的地方
- tide-jump-back: 跳轉定義以後再跳轉回來
- tide-rename-symbol: 語法重新命名符號
- tide-rename-file: 重新命名JS檔案
也可以像這樣用 tide-references 命令查詢符號所有語法引用的地方.
Tide 反向引用
更多命令請參考 Tide github
其他備註
如果你的Web專案比較複雜, 可以在專案 root 目錄設定 jsconfig.json, 內容如下:
{
"compilerOptions": {
"target": "es2017",
"allowSyntheticDefaultImports": true,
"noEmit": true,
"checkJs": true,
"jsx": "react",
"lib": [ "dom", "es2017" ]
}
}