Umi Uyuraのブログ

プログラミング関連の作業ログ

EmacsのESLint環境をセットアップした

以前、EmacsでReact(JSX)コーディングする環境について調べた際に、JSXの構文チェックとして JSXHint を使うようにしました。

umi-uyura.hatenablog.com

ところが、こちらの記事によると、どうやらすでに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が動く環境にはなったので、これから色々と設定をしていこうと思います。

参考

速習ECMAScript6: 次世代の標準JavaScriptを今すぐマスター!

速習ECMAScript6: 次世代の標準JavaScriptを今すぐマスター!

WEB+DB PRESS Vol.87

WEB+DB PRESS Vol.87