Windows に JSHintをインストールしてみた

仕事のコードの 1/3 ぐらいは JavaScript らしい。チェックツールを入れておかないと、既存のコードのレベルのまま拡大していくと、ヤバそう。というか、今年の頭にちょっと既存コードが新しい環境で動かないというので対応を手伝ったけど、やばかった。

ということで、JavaScript のチェックをするツールを探してみたが、JSLint といういかにもそれらしい名前のやつから fork した JSHint ってのが主流っぽい。

Jenkins から JSLint or JSHint 叩いてる例も見られるので、これで良さそう。

開発環境と Jenkins サーバの Windows 7 にインストールしてみた。

Node.js, npm

JSHint のインストールガイドを見ると、Node.js の npm で入れる手順が最初に紹介されている。

JSHint 自体、JavaScript で書かれているそうな。最近話題の Node.js の環境で動くやつで、Node.js のパッケージ管理システム "npm" でインストールできるそうな。

なんかちょっと（JavaScript チェックしたいだけなのに）大がかりでめんどくさそうな印象だったけど、同僚が別プロジェクトで Grunt ってのを導入しようとしていて、これも npm でインストールするやつだったので、どっちにしろ社内 Jenkins さん管理者としてはやらないといけないので。

Node.js, npm をインストールする

公式サイトから Windows 用のインストーラで入れるだけ。

node.js

f:id:kawacho:20130719234113p:plain

環境変数 PATH への追加もやってくれる。

システムの PATH 環境変数に追加されるパス
- "C:\Program Files\nodejs\"
  - ここに node.exe や npm コマンドが入ってる
ユーザの PATH 環境変数に追加されるパス
- "C:\Users\{ユーザ名}\AppData\Roaming\npm"
  - npm で JSHint をインストールすると、ここに jshint コマンドが

コマンドプロンプトから、軽く、使えることを確認。

C:\Users\kawahara> node -v
v0.10.13

Hello World しとく。

C:\Users\kawahara> node
> console.log("Hello, World")
Hello, World
undefined

>
(^C again to quit)

>

C:\Users\kawahara> npm

Usage: npm <command>

where <command> is one of:
    add-user, adduser, apihelp, author, bin, bugs, c, cache,
    completion, config, ddp, dedupe, deprecate, docs, edit,
    explore, faq, find, find-dupes, get, help, help-search,
    home, i, info, init, install, isntall, issues, la, link,
    list, ll, ln, login, ls, outdated, owner, pack, prefix,
    prune, publish, r, rb, rebuild, remove, restart, rm, root,
    run-script, s, se, search, set, show, shrinkwrap, star,
    stars, start, stop, submodule, tag, test, tst, un,
    uninstall, unlink, unpublish, unstar, up, update, version,
    view, whoami

npm <cmd> -h     quick help on <cmd>
npm -l           display full usage info
npm faq          commonly asked questions
npm help <term>  search for help on <term>
npm help npm     involved overview

Specify configs in the ini-formatted file:
    C:\Users\kawahara\.npmrc
or on the command line via: npm <command> --key value
Config info can be viewed via: npm help config

npm@1.3.2 C:\Program Files\nodejs\node_modules\npm

C:\Users\kawahara>npm version
{ http_parser: '1.0',
  node: '0.10.13',
  v8: '3.14.5.9',
  ares: '1.9.0-DEV',
  uv: '0.10.12',
  zlib: '1.2.3',
  modules: '11',
  openssl: '1.0.1e',
  npm: '1.3.2' }

npm で JSHint をインストールする

npm でパッケージ（node モジュール？）をインストールするには、次のようにコマンドを打てばいいらしい。

> npm install パッケージ名 --global

--global を付けると、PATH が通されていた "C:\Users\{ユーザ名}\AppData\Roaming\npm" にインストールされる。付けないとカレントディレクトリ以下に入るよう。プロジェクト毎に必要な特定のライブラリ、特定のバージョンのライブラリとか入れたい場合は --global を付けず、JSHint みたいなコマンドラインツールを環境にインストールしたい場合は --global を付ける、みたいな感じなのかな！？

> npm install jshint --global
npm http GET https://registry.npmjs.org/jshint
npm http 200 https://registry.npmjs.org/jshint
npm http GET https://registry.npmjs.org/jshint/-/jshint-2.1.4.tgz
npm http 200 https://registry.npmjs.org/jshint/-/jshint-2.1.4.tgz
npm http GET https://registry.npmjs.org/shelljs
npm http GET https://registry.npmjs.org/underscore
npm http GET https://registry.npmjs.org/minimatch
npm http GET https://registry.npmjs.org/cli
npm http GET https://registry.npmjs.org/console-browserify
npm http 200 https://registry.npmjs.org/console-browserify
npm http GET https://registry.npmjs.org/console-browserify/-/console-browserify-0.1.6.tgz
npm http 200 https://registry.npmjs.org/underscore
npm http GET https://registry.npmjs.org/underscore/-/underscore-1.4.4.tgz
npm http 200 https://registry.npmjs.org/cli
npm http GET https://registry.npmjs.org/cli/-/cli-0.4.4-2.tgz
npm http 200 https://registry.npmjs.org/shelljs
npm http GET https://registry.npmjs.org/shelljs/-/shelljs-0.1.4.tgz
npm http 200 https://registry.npmjs.org/minimatch
npm http GET https://registry.npmjs.org/minimatch/-/minimatch-0.2.12.tgz
npm http 200 https://registry.npmjs.org/console-browserify/-/console-browserify-0.1.6.tgz
npm http 200 https://registry.npmjs.org/underscore/-/underscore-1.4.4.tgz
npm http 200 https://registry.npmjs.org/cli/-/cli-0.4.4-2.tgz
npm http 200 https://registry.npmjs.org/shelljs/-/shelljs-0.1.4.tgz
npm http 200 https://registry.npmjs.org/minimatch/-/minimatch-0.2.12.tgz
npm http GET https://registry.npmjs.org/lru-cache
npm http GET https://registry.npmjs.org/sigmund
npm http GET https://registry.npmjs.org/glob
npm http 200 https://registry.npmjs.org/sigmund
npm http GET https://registry.npmjs.org/sigmund/-/sigmund-1.0.0.tgz
npm http 200 https://registry.npmjs.org/lru-cache
npm http GET https://registry.npmjs.org/lru-cache/-/lru-cache-2.3.0.tgz
npm http 200 https://registry.npmjs.org/glob
npm http GET https://registry.npmjs.org/glob/-/glob-3.2.1.tgz
npm http 200 https://registry.npmjs.org/sigmund/-/sigmund-1.0.0.tgz
npm http 200 https://registry.npmjs.org/lru-cache/-/lru-cache-2.3.0.tgz
npm http 200 https://registry.npmjs.org/glob/-/glob-3.2.1.tgz
npm http GET https://registry.npmjs.org/graceful-fs
npm http GET https://registry.npmjs.org/inherits
npm http 200 https://registry.npmjs.org/inherits
npm http GET https://registry.npmjs.org/inherits/-/inherits-1.0.0.tgz
npm http 200 https://registry.npmjs.org/graceful-fs
npm http GET https://registry.npmjs.org/graceful-fs/-/graceful-fs-1.2.3.tgz
npm http 200 https://registry.npmjs.org/inherits/-/inherits-1.0.0.tgz
npm http 200 https://registry.npmjs.org/graceful-fs/-/graceful-fs-1.2.3.tgz
C:\Users\kawahara\AppData\Roaming\npm\jshint -> C:\Users\kawahara\AppData\Roaming\npm\node_modules\jshint\bin\jshint
jshint@2.1.4 C:\Users\kawahara\AppData\Roaming\npm\node_modules\jshint
├── console-browserify@0.1.6
├── underscore@1.4.4
├── shelljs@0.1.4
├── minimatch@0.2.12 (sigmund@1.0.0, lru-cache@2.3.0)
└── cli@0.4.4-2 (glob@3.2.1)

使えるようになったか確認。

> jshint --version
jshint v2.1.4

インストール先を変える方法

--global を付けたときのインストール先を変えたい場合は、設定の "prefix" の値を変えるといいらしい。jshint をコマンドラインから使うなら、このディレクトリにも PATH を通しておく。

> npm config set prefix "C:\DevTools\npm"

設定の値を確認したい場合は npm config list と打つ。詳細はヘルプとか参照。

※他にもっと適切な方法があるかもしれないけど、とりあえずユーザのホーム以外のところにインストールできたので、それ以上は調べていない。

使い方

jshint の使い方は jshint --help とか、JSHint のドキュメントを参照。

> jshint hogehoge.js

> jshint --reporter=jslint script_dir > jshint-report.xml

かわちょでぶろぐ

Visual Basic .NET を……、強いられているんだ！ → 強いられなくなった！ → ふたたび、強いられているんだ！ → 転職！

Windows に JSHintをインストールしてみた

Node.js, npm

Node.js, npm をインストールする

npm で JSHint をインストールする

インストール先を変える方法

使い方