用emacs打造node.js开发环境

对于使用emacs来开发javascript的人来说js2-mode应该是必备神奇，此工具可以提示js语法错误， 并用红色下滑线给予提示(当初像我这样js语法都没有过关的人来讲确实帮助挺大的^^)

配置过程：

$ svn checkout http://js2-mode.googlecode.com/svn/trunk/ js2-mode
$ cd js2-mode
$ emacs --batch -f batch-byte-compile js2-mode.el
$ cp js2-mode.elc ~/.emacs.d/

有的童鞋可能会问怎么修改~/.emacs 文件，下面我会一起提供

刚接触node的人对缩进会有些头痛，这个插件就帮我们搞定node的缩进

$wget http://download.savannah.gnu.org/releases-noredirect/espresso/espresso.el
$cp ./espresso.el ~/.emacs.d/

因为使用espresso的时候可能会跟yasnippet的快捷键冲突，建议大家按照下面进行修改

首先创建nodejs.el文件

$touch ~/.emacs.d/nodejs.el

把以下内容拷贝到nodejs.el里面

;;;; load & configure js2-mode 
(autoload ‘js2-mode "js2-mode" nil t)
(add-to-list ‘auto-mode-alist ‘("\\.js$" . js2-mode))
 
;;; espresso mode
(autoload ‘espresso-mode "espresso")
 
(add-hook ‘js2-mode-hook
(lambda ()
(yas-global-mode 1)))
 
(eval-after-load ‘js2-mode
‘(progn
(define-key js2-mode-map (kbd "TAB") (lambda()
(interactive)
(let ((yas/fallback-behavior ‘return-nil))
(unless (yas/expand)
(indent-for-tab-command)
(if (looking-back "^\s*")
(back-to-indentation))))))))
 
 
 
(defun my-js2-indent-function ()
(interactive)
(save-restriction
(widen)
(let* ((inhibit-point-motion-hooks t)
(parse-status (save-excursion (syntax-ppss (point-at-bol))))
(offset (- (current-column) (current-indentation)))
(indentation (espresso--proper-indentation parse-status))
node)
 
(save-excursion
 
;; I like to indent case and labels to half of the tab width
(back-to-indentation)
(if (looking-at "case\\s-")
(setq indentation (+ indentation (/ espresso-indent-level 2))))
 
;; consecutive declarations in a var statement are nice if
;; properly aligned, i.e:
;;
;; var foo = "bar",
;; bar = "foo";
(setq node (js2-node-at-point))
(when (and node
(= js2-NAME (js2-node-type node))
(= js2-VAR (js2-node-type (js2-node-parent node))))
(setq indentation (+ 4 indentation))))
 
(indent-line-to indentation)
(when (> offset 0) (forward-char offset)))))
 
(defun my-indent-sexp ()
(interactive)
(save-restriction
(save-excursion
(widen)
(let* ((inhibit-point-motion-hooks t)
(parse-status (syntax-ppss (point)))
(beg (nth 1 parse-status))
(end-marker (make-marker))
(end (progn (goto-char beg) (forward-list) (point)))
(ovl (make-overlay beg end)))
(set-marker end-marker end)
(overlay-put ovl ‘face ‘highlight)
(goto-char beg)
(while (< (point) (marker-position end-marker))
;; don‘t reindent blank lines so we don‘t set the "buffer
;; modified" property for nothing
(beginning-of-line)
(unless (looking-at "\\s-*$")
(indent-according-to-mode))
(forward-line))
(run-with-timer 0.5 nil ‘(lambda(ovl)
(delete-overlay ovl)) ovl)))))
 
(defun my-js2-mode-hook ()
(require ‘espresso)
(setq espresso-indent-level 2
indent-tabs-mode nil
c-basic-offset 2)
(c-toggle-auto-state 0)
(c-toggle-hungry-state 1)
(set (make-local-variable ‘indent-line-function) ‘my-js2-indent-function)
(define-key js2-mode-map [(meta control |)] ‘cperl-lineup)
(define-key js2-mode-map [(meta control \;)]
‘(lambda()
(interactive)
(insert "/* -----[ ")
(save-excursion
(insert " ]----- */"))
))
(define-key js2-mode-map [(return)] ‘newline-and-indent)
(define-key js2-mode-map [(backspace)] ‘c-electric-backspace)
(define-key js2-mode-map [(control d)] ‘c-electric-delete-forward)
(define-key js2-mode-map [(control meta q)] ‘my-indent-sexp)
(if (featurep ‘js2-highlight-vars)
(js2-highlight-vars-mode))
(message "My JS2 hook"))
 
(add-hook ‘js2-mode-hook ‘my-js2-mode-hook)

(provide ‘nodejs)

然后最后修改~/.emacs 文件,增加以下内容

(require ‘nodejs)

此工具给我们提供跳到函数定义处类似的功能 , 不过如果出现同名函数的话还是会出现误跳的现象。

所以如果对函数名命名的时候多加考虑的话一般还是可以准确的跳转到定义处的。

$sudo apt-get install exuberant-ctags
$cd your_project_dir
$ctags -e --recurse (跟目录下会创建TAGS索引文件)
打开编辑器， 光标移动到要找的函数名处， "M-." 触发查找tag命令, 第一次会让你选择索引文件，就把刚才创建的TAGS文件找出来打开就可以了。

当写node的时候嵌套很多层，有时候自己也犯迷糊，所以自动高亮显示光标所在变量的话也会很有帮助的

$wget http://mihai.bazon.net/projects/editing-javascript-with-emacs-js2-mode/js2-highlight-vars-mode/js2-highlight-vars.el
$cp js2-highlight-vars.el ~/.emacs.d

修改~/.emacs文件

;; ;;js2-highlight vars
(require ‘js2-highlight-vars)
(if (featurep ‘js2-highlight-vars)
    (js2-highlight-vars-mode))

遇到多级项目工程目录结构，是否“C-x C-f" 按到手痛？或者添加 bookmark ?

这个插件就是帮我们索引项目文件的，就像source insight那样，只要输入文件名任意字段(当然支持RegExp)，就帮你定位到那个文件里。

配置过程：

$wget https://find-file-suggest.googlecode.com/files/find-file-suggest_2010-03-02.zip
$unzip find-file-suggest_2010-03-02.zip
$cp find-file-suggest_2010-03-02 ~/.emacs.d

然后修改~/.emacs,把以下内容添加进去

;;find-file-suggest
(require ‘find-file-suggest)
(global-set-key [(control x) (meta f)] ‘find-file-suggest)
(global-set-key [(control x) (meta g)] ‘ffs-grep)

然后就是要建立搜引，以下给出两个node工程和C/C++工程的例子

;;c/c++ 工程创建索引(参数：别名, 工程目录, 要索引的文件名后缀, 要过滤的文件夹)
(ffs-create-file-index "ejoy" "~/code/github/ejoy2d" "\\.h\\|\\.c\\|\\.lua" "\\doc$\\|\\.git$")
;;js/node.js 工程创建索引
(ffs-create-file-index "sails" "/usr/local/lib/node_modules/sails/lib" "\\.js\\|\\.ejs\\|\\.html" "") 

用法：

- 打开emacs， 输入 "M-x ffs-use-file-index" 回车
- 输入 ejoy2d(之前建立的工程别名) 回车
- "C-x M-f" 之后会显示所有索引到的文件列表
- 直接输入想要查找的文件名（C-n 向下， C-p 向上），回车

多层嵌套的问题，对刚学node的人来说会有些头疼，1个 tab 2个空格已经够头痛了，还多层嵌套 -_-!，

括号就更看不清了。所以把这个插件推荐给大家！（话说node嵌套问题，已经有了很多解决方案了 async, step, eventproxy…有兴趣童鞋可以查找相关资料）

$wget http://nschum.de/src/emacs/highlight-parentheses/highlight-parentheses.el
$cp highlight-parentheses.el ~/.emacs.d
修改~/.emacs
(require ‘highlight-parentheses)
打开emacs
(M-x highlight-parentheses-mode) 来触发该功能

emscs23 以上版本开始已经把tramp集成进去了，所以免额外的配置过程，直接使用。

从TextMate继层过来的非常有用的一个功能，提供各种语言的模板代码。

$wget http://yasnippet.googlecode.com/files/yasnippet-0.6.1c.tar.bz2
$cp yasnippet-0.6.1c ~/.emacs.d
$cd ~/.emacs.d
$mv yasnippet-0.6.1c yasnippet
修改~/.emacs
(add-to-list ‘load-path
             "~/.emacs.d/yasnippet")
(require ‘yasnippet) ;; not yasnippet-bundle
(yas-global-mode 1)

当我们安装js2-mode之后，我们需要手动创建一个js2-mode相关的snippets

$cd ~/.emacs.dyasnippet/snippets
$cp -r js-mode js2-mode