emacs+node.jsでJavaScriptのリアルタイム構文チェック

| コメント(0) | トラックバック(0)

コードを書いている途中で、エラーが起きてたら該当行を赤く表示してくれる、超便利なemacs + flymake!!

下記環境で作ったので公開してみます。

  • node.js
  • jshint-mode
  • js2-mode
  • flymake

(js2-mode だけでも十分かもしれないけど、node.jsを動かしてみたかったのです!)

必要な環境構築のため下記を行ったのでメモ

環境確認

node.js のインストールのため pythonが2.6 or 2.7が必要

必要な環境の確認

 $ python -V
 $ rpm -qa | grep python 
 $ rpm -qa | grep bzip2

bzip2 install

入ってなかったのでインストール

$ cd /usr/local/src
$ wget http://bzip.org/1.0.6/bzip2-1.0.6.tar.gz
$ tar xvzf bzip2-1.0.6.tar.gz
$ cd bzip2-1.0.6
$ ./configure
$ make install

python2.7 install

入ってなかったのでインストール

$ cd /usr/local/src
$ wget http://python.org/ftp/python/2.7.2/Python-2.7.2.tgz
$ tar xvzf Python-2.7.2.tgz
$ cd Python-2.7.2
$ ./configure
$ make
$ make install

python path変更 2.4を2.7に上書きのため

$ which python
$ ls -l /usr/bin/python 
$ rm /usr/bin/python
$ ln -s  /usr/local/bin/python2.7 /usr/bin/python
$ python -V

node.jsのインストール

$ cd /usr/local/src
$ wget http://nodejs.org/dist/v0.7.5/node-v0.7.5.tar.gz
$ tar -xvzf node-v0.7.5.tar.gz
$ cd node-v0.7.5
$ ./configure
$ make
$ make install

jshint-mode

emcasのファイル置き場に移動

$ cd ~/.emacs.d/
$ mkdir js
$ cd js
$ npm install jshint-mode     #path は /usr/local/bin/npm 一般権限で実行
$ vi  node_modules/jshint-mode/jshint-mode.js

なぜか、動かなかったので一部コード修正

ARGVの大文字を小文字化、node.jsで仕様が変わったのか?

・変更前

function getOpt(key) {
    var index = process.ARGV.indexOf(key);
    return index !== -1 ? process.ARGV[index + 1] : false;
}

・変更後

function getOpt(key) {
    var index = process.argv.indexOf(key);
    return index !== -1 ? process.argv[index + 1] : false;
}

node.jsが動くか確認

$ node  node_modules/jshint-mode/jshint-mode.js
# 下記表示がでればOK
Started JSHint server at http:// 127.0.0.1:3003

iptablesやらhosts.allow

httpサーバーを立てるので、環境により解除。

js2-mode

emcasのファイル置き場に移動後DL

$ cd  ~/.emacs.d/
$ wget http://js2-mode.googlecode.com/files/js2-20090723b.el
$ mv js2-20090723b.el js2-el

emacsからbyte-compile

M-x byte-compile-file RET <path-to-js2.el> RET

flymake

emcasのファイル置き場に移動後DL

$ cd  ~/.emacs.d/
$ wget 'http://cvs.savannah.gnu.org/viewvc/*checkout*/emacs/emacs/lisp/progmodes/flymake.el?revision=1.2.4.41'
$ mv flymake.el\?revision=1.2.4.41 flymake.el

emacsの設定

・.emacs

;; js2-mode
(autoload 'js2-mode "js2" nil t)
(setq auto-mode-alist
      (append
       '(
         ("\\.js$"    . js2-mode)
         ("\\.json$"  . js2-mode)
         )
       auto-mode-alist))

;; Flymake
(require 'flymake)

;; Flymake JavaScript jshint-mode
;;
;; install node.js
;;   $ npm install jshint-mode
;;
;; To run from the command line:
;;     $ node jshint-mode.js
;;     $ curl --form source="<t.js" --form filename="t.js" --form mode=jshint http://127.0.0.1:3003/check
(add-to-list 'load-path "(add-to-list 'load-path "~/.emacs.d/js/node_modules/jshint-mode")")
(require 'flymake-jshint)
(add-hook 'js2-mode-hook
          (lambda () (flymake-mode t)))

コマンドラインからの実行確認

 # node jshint-mode.js
 # curl --form source="<test.js" --form filename="test.js" --form mode=jshint http://127.0.0.1:3003/check

※test.js は適当に変える。

おまけ

node.jsを利用してJavaScriptをコマンドラインから実行

・test.js

console.log('Hello world !!')

・コマンド

$ node test.js

関連記事

トラックバック(0)

トラックバックURL: http://mukaer.com/cgi-bin/mt/mt-tb.cgi/44

コメントする

PR

PR





検索

Loading

メニュー

twitter