サイでもわかる？！ ESLint 導入
Node.js学園祭2015に行ってからESLintを導入したかった
やっぱりJavaScriptって柔軟で優秀だから色んな書き方できるじゃないですか。
関数宣言の中に関数宣言やったり(うっ)
上記は関係ないんですけど、
私は自分のJavaScriptのコードに不安を感じることがあって
Lintの導入は考えていました。
JavaScriptですから潮流が激しくて色々なツールがありますよね。
JSHint, JSLint, JSCS, そして ESLint。
ありすぎんのよ…どれなんだよと…
環境の構築のこだわりすぎて
本当に作りたいものがおろそかになる気がして
Lintは考えることをやめていました（泣）
こんな私の火付け役、それが表題のNode.js学園祭2015です。
Node.js学園祭2015「フロントエンドに秩序を取り戻す方法」を聞いて、
駄目だこいつ（私のコード）…
早くなんとかしないと…
ということで本題。
ESLintを導入します。他言は無用だ。入れると言ったら入れるんだよ！！
下記の記事を読むと幸せになれるのかなって
目次
- インストール
.eslintrc作成- 動作検証
- 今後
インストール
ESLintはnpmでインストールします。
インストールするのはeslintとbabel-eslintです。
babel-eslintはbabelでES6をトランスコンパイルに使用している場合、
ESLint標準のパーサー(ASTを作るモジュール)では対応しきれないことがあります。
そのためにbabel-eslintを使用します。
$ npm i -g eslint babel-eslint $ eslint -v
.eslintrc作成
私はdotfile系はgitで管理しているため、そのパスに_eslintrcを作成しました。
.eslintrcを使いたい時はシンボリックリンクまたはファイルコピーで対応します。
.eslintrcの配置場所は基本的に２種類あります。（下記記載）
- ユーザーホーム直下
- プロジェクト直下
$ vim dotfiles/_eslintrc $ ln -s original_path linked_path
作成した_eslintrcは下記（基本的な記述のみ）
※.eslintrcを書き換えました。
修正理由については当記事のコメントを参照の程よろしくお願い致します。
"parser": "babel-eslint" -> "extends": "eslint:recommended"
動作検証
.eslintrcに配置したらチェック可能になりましたので実際にやってみます。
$ cd project $ eslint src/js/app.js ... react/project/todo/src/js/app.js 5:15 error Missing semicolon semi ✖ 1 problem (1 error, 0 warnings)
実際にセミコロンが足りていないというエラーが出ました（汗）
今後
念願ではあったLintの導入でした。
今後やりたいなーと思っているのは下記になりますが
ルールの設定は必須で行います。
- ルールの設定
gulpで自動化- ESLintのツール作ってみたいな(案はある)
