Use emacs to create a node. js Development Environment

1 Overview

Previously, because the project was built with node, related plug-ins were collected online, involving the entire development process. For more information, see

2 javascript/node. js syntax related 2.1 js2-mode

For those who use emacs to develop javascript, js2-mode should be a must-have, and this tool can prompt javascript syntax errors, use the red slide line to give a prompt (for those who didn't pass through js syntax like me, it really helped a lot ^)

Configuration process:

$ 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/

Some children's shoes may ask how to modify them ~ /. Emacs file, which will be provided together below

2.2 espresso

People who are new to node have a headache about indentation. This plug-in will help us deal with node indentation.

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

Because espresso may conflict with the shortcut key of yasnippet, we recommend that you modify it as follows:

First, create the nodejs. el file.

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

Copy the following content to 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 2indent-tabs-mode nilc-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)

And finally modify ~ /. Add the following content to the emacs file:

(require 'nodejs)

2.3 exuberant-ctags provides a function similar To Go To Definition.

This tool provides similar functions to jump to the function definition. However, if a function with the same name exists, it will still jump by mistake.

Therefore, when naming a function, you can jump to the definition accurately.

$ Sudo apt-get install exuberant-ctags $ cd your_project_dir $ ctags-e -- recurse (the TAGS index file will be created under the Directory) Open the editor and move the cursor to the name of the function to be searched, "M -. "trigger the tag search command. The first time you select the index file, you can find the created TAGS file and open it.

2.4 highlight function for variables in js2-highlight-vars Scope

When writing a node, It is nested with many layers, and sometimes you are confused, so it is helpful to automatically highlight the variable where the cursor is located.

$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

Modify ~ /. Emacs file

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

3. Other Common artifacts

This article introduces common essential emacs code-writing artifacts. I believe you will also need it ^

3.1 find-file-suggest

In the case of a multi-level project directory structure, is "C-x C-f" hitting a hand pain? Or add a bookmark?

This plug-in is used to index the project file. Just like source insight, you only need to enter any field in the file name (RegExp is supported of course) and locate it in that file.

Configuration process:

$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

Then modify ~ /. Emacs: Add the following content

;;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)

Then we need to establish a search reference. The following are two examples of the node project and the C/C ++ project.

; Create an index for the c/c ++ Project (parameter: alias, project directory, Suffix of the file name to be indexed, folder to be filtered) (ffs-create-file-index "ejoy ""~ /Code/github/ejoy2d ""\\. h \\| \\. c \\| \\. lua "" \ doc $ \ | \\. git $ "); js/node. create an index (ffs-create-file-index "sails" "/usr/local/lib/node_modules/sails/lib ""\\. js \\| \\. ejs \\| \\. html """)

Usage:

-Open emacs, enter "M-x ffs-use-file-index", Press enter, and enter ejoy2d (the previously created Project alias) press ENTER-"C-x M-f" to display the list of all indexed files-enter the file name (C-n down, C-p up) and press ENTER

3.2 highlight-parentheses highlight matching brackets (different colors)

The problem of multi-layer Nesting is a headache for those who have just learned node. One tab and two spaces are a headache, and multiple layers of nesting -_-!,

The brackets are even more invisible. So I recommend this plug-in to you! (There are already many solutions for node nesting, such as async, step, eventproxy... If you are interested, you can find the relevant materials)

$ Wget http://nschum.de/src/emacs/highlight-parentheses/highlight-parentheses.el?cp highlight-parentheses.el ~ /. Emacs. d modify ~ /. Emacs (require 'highlight-parentheses) Enable emacs (M-x highlight-parentheses-mode) to trigger this function

3.3 tramp directly modifies the server code or configuration file as if it were a local operation

Emscs23 and later versions have already integrated the tramp, so you can directly use it without additional configuration procedures.

3.3.1 Use tramp to improve root permission modification:

Open emacs "C-x C-f" Open File Operation "C-a C-k" delete current path input/su:/etc/press the Tab key to enter the password (of course, the premise is that the current user is sudoer. press Tab again to access all files through root.

3.3.2 use tramp to Modify remote server code

"C-x C-f" Open File Operation "C-a C-k" delete current path input/luckyan315@192.168.3.2:/home/press Tab press prompt input, for the first time, you may need to establish an ssh connection (enter yes or y as prompted). Then, enter the password and press Tab again to access the remote server directory. ^_^

3.4 yasnippet provides template code in various languages

A very useful feature from the TextMate step layer that provides template code in various languages.

$ 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 modify ~ /. Emacs (add-to-list 'Load-path "~ /. Emacs. d/yasnippet ") (require 'yasnippet); not yasnippet-bundle (yas-global-mode 1)

When we install the js2-mode, We need to manually create a js2-mode-related snippets

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

3.5 version control 3.5.1 psvn manages your code through SVN

Many people use svn to manage the original source code in the early stage, and psvn is enough for them.

$ Wget http://lifegoo.pluskid.org/wiki/lisp/psvn.el?cp./psvn. el ~ /. Emacs. d modify ~ /. Emacs, add the following content; svn support (require 'psvn)

Usage:

g     - svn-status-update:               run 'svn status -v'M-s   - svn-status-update:               run 'svn status -v'C-u g - svn-status-update:               run 'svn status -vu'=     - svn-status-show-svn-diff         run 'svn diff'l     - svn-status-show-svn-log          run 'svn log'i     - svn-status-info                  run 'svn info'r     - svn-status-revert                run 'svn revert'X v   - svn-status-resolved              run 'svn resolved'U     - svn-status-update-cmd            run 'svn update'M-u   - svn-status-update-cmd            run 'svn update'c     - svn-status-commit                run 'svn commit'a     - svn-status-add-file              run 'svn add --non-recursive'A     - svn-status-add-file-recursively  run 'svn add'+     - svn-status-make-directory        run 'svn mkdir'R     - svn-status-mv                    run 'svn mv'D     - svn-status-rm                    run 'svn rm'M-c   - svn-status-cleanup               run 'svn cleanup'b     - svn-status-blame                 run 'svn blame'X e   - svn-status-export                run 'svn export'RET   - svn-status-find-file-or-examine-directory^     - svn-status-examine-parent~     - svn-status-get-specific-revisionE     - svn-status-ediff-with-revisionX X   - svn-status-resolve-conflictss     - svn-status-show-process-buffere     - svn-status-toggle-edit-cmd-flag?     - svn-status-toggle-hide-unknown_     - svn-status-toggle-hide-unmodifiedm     - svn-status-set-user-marku     - svn-status-unset-user-mark$     - svn-status-toggle-elidew     - svn-status-copy-filename-as-killDEL   - svn-status-unset-user-mark-backwards\* !   - svn-status-unset-all-usermarks\* ?   - svn-status-mark-unknown\* A   - svn-status-mark-added\* M   - svn-status-mark-modified\* D   - svn-status-mark-deleted\* *   - svn-status-mark-changed.     - svn-status-goto-root-or-returnf     - svn-status-find-fileo     - svn-status-find-file-other-windowv     - svn-status-view-file-other-windowI     - svn-status-parse-infoV     - svn-status-svnversionP l   - svn-status-property-listP s   - svn-status-property-setP d   - svn-status-property-deleteP e   - svn-status-property-edit-one-entryP i   - svn-status-property-ignore-fileP I   - svn-status-property-ignore-file-extensionP C-i - svn-status-property-edit-svn-ignoreP k   - svn-status-property-set-keyword-listP y   - svn-status-property-set-eol-styleP x   - svn-status-property-set-executableh     - svn-status-use-historyq     - svn-status-bury-bufferC-x C-j - svn-status-dired-jump

3.5.2 git-emacs manage code through git

Many shortcut keys are the same as those of psvn. If you are familiar with psvn, you can use git-emacs to complete common operations without remembering the additional shortcut keys. (Yes, we are lazy -_-!).

$ Git clone https://github.com/tsgates/git-emacs.git?cp git-emacs ~ /. Emacs. d modify ~ /. Emacs (add-to-list 'Load-path "~ /. Emacs. d/git-emacs/") (require 'git-emacs)

Like psvn, go to M-x git-status to go to the control panel.

Common commands:

Command	Comment
P/n	Move up and down all files
P/N	Move up and down between changed files
	Go to the header/tail of the List
V	Open a file in read-only mode
M/u/SPC	Set/cancel/switch tags for Batch File Processing
A	Add files to Version Control
I	Add files to ignore
C	Submit

3.6 Unit Test3.6.1 Mocha yas Template

Because we have installed yasnippet before, we can find many templates online. The following is a mocha unit test template.

$ Git clone https://github.com/jamescarr/mochajs-snippets.git?cp-r mochajs-snippets/javascript /*~ /. Emacs. d/yasnippet/snippet/js2-mode if you have enabled emacs (automatically reload upon re-opening) "M-x yas-reload-all", you can use various asserted templates, which is very convenient ^

4. Summary

All the files involved above can be found in the https://github.com/luckyan315/site-lisp here, I hope this article will help you learn node or emacs! This is the day to continue ^

Author: luckyan315

Date: 2014-02-06 16:24:14 CST

HTML generated by org-mode 6.33x in emacs 23