EmacsのESLint環境をセットアップした
以前、EmacsでReact(JSX)コーディングする環境について調べた際に、JSXの構文チェックとして JSXHint を使うようにしました。
ところが、こちらの記事によると、どうやらすでにJSXHintはDeprecatedになっていて、ESLintへの移行を促しているとのこと。
ESLintがJSXにも対応していることは前回把握していたものの、一通り設定をするのが面倒だったので採用していませんでしたが、そろそろES6も触ってみたいこともあり、このタイミングでESLintの環境を用意しておくことにしました。
ESLintの導入
npmからESLintをインストールしておきます。
$ npm install -g eslint
Flycheck for JavaScript
Emacsのコーディング検証のFlycheckは元々使っていたので導入済み。
ただ、JavaScript用のFlycheckはESLintをサポートしているものの、デフォルトではJSHintの優先度が高くなっているようなので、.emacsでJSHintを無効にするようにしました。
(eval-after-load 'flycheck '(custom-set-variables '(flycheck-disabled-checkers '(javascript-jshint javascript-jscs)) ))
詳しいことは、以下のブログがとても参考になりました。
ついでに、上記記事にあったjs2-modeで競合してしまう機能についてもオフにしておくことにしました。
(setq js2-include-browser-externs nil) (setq js2-mode-show-parse-errors nil) (setq js2-mode-show-strict-warnings nil) (setq js2-highlight-external-variables nil) (setq js2-include-jslint-globals nil)
内包している項目もあるようなので、こんな感じにしておけば良さそう。
FlyCheck for web-mode
Reactの開発でJSXのコーディングをするときには、web-modeを使っています。
ここで、以前はJSXHintを使っていたわけですが、これもESLintを使うようにしました。
(add-hook 'web-mode-hook (lambda () (when (equal web-mode-content-type "jsx") (flycheck-add-mode 'javascript-eslint 'web-mode) (flycheck-mode))))
flycheck-add-mode
という関数でチェッカーを設定してあげれば良いようです。
これについては、以下のブログがとても参考になりました。
なお、ESLintはデフォルトでは何もチェックをしてくれないため、設定ファイルを用意して、さらにJSX向けチェックを有効にしてあげる必要があります。
.eslintrc
{ "env" : { "es6": true }, "ecmaFeatures": { "jsx": true } }
まだこれだけでは不十分ですが、とりあえずESLintが動く環境にはなったので、これから色々と設定をしていこうと思います。
参考
- ESLint - Pluggable JavaScript linter
- Syntax checking for GNU Emacs — Flycheck
- 自動フォーマット駆動の JavaScript 開発環境 - build error
- Emacs の web-mode で jsx 書くとき コメントが『/ coment /』になるので 『// comment』にするメモ - 牌語備忘録 -pygo
- JSX - ESLintについての細かいあれこれ - Qiita
- vim + syntastic + jshint だと JSX がエラーになる問題 | はなたんのブログ
速習ECMAScript6: 次世代の標準JavaScriptを今すぐマスター!
- 作者: 山田祥寛
- 出版社/メーカー: WINGSプロジェクト
- 発売日: 2015/08/28
- メディア: Kindle版
- この商品を含むブログを見る
- 作者: 佐藤鉄平,小林明大,石村真吾,坂上卓史,上原誠,鳥居英,佐藤歩,泉水翔吾,うさみけんた,伊藤直也,高橋侑久,佐藤太一,hayajo,橋本翔,西尾泰和,中島聡,はまちや2,WEB+DB PRESS編集部
- 出版社/メーカー: 技術評論社
- 発売日: 2015/06/24
- メディア: 大型本
- この商品を含むブログ (1件) を見る