用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