Tide: 比lsp-mode更好的JavaScript智能补全插件

LSP (Language Server Protocol) 是微软领导开发的编程语言语法补全和代码分析框架, 好处是全世界黑客都一起开发 LSP 后端, 不论你用的是 Emacs, Vim 还是 Sublime, VSCode, Elicpse, IntelliJ 等编程工具, 都可以享受同等智能的语法补全后端.

Emacs 的 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 使用的是 tsserver, 也就是微软给 VSCode 开发的JavaScript智能补全后端, 可以很好的支持 JavaScript 和 TypeScript.

安装方法

1. 安装 tsserver 补全后端

npm install -g typescript
npm install jquery --save

1. typescript 这个包会安装 tsserver
2. 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 补全

其他比较有用的命令:

1. tide-jump-to-definition: 跳转到函数或变量定义的地方
2. tide-jump-back: 跳转定义以后再跳转回来
3. tide-rename-symbol: 语法重命名符号
4. 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" ]
  }
}