概要
みなさんこんにちはcandleです。
今回は以外に難しい、emacs + eslintの導入をしてみましょう。
emacsは他にもjsHintやjsxHintなどjavascriptの記法をチェックするパッケージがあります。
噂によるとReactやes6など最新のjavascriptの書き方にうまく対応できなかったり、
設定が難しかったりするらしいです。
近年はeslintが主流になってきて、emacsに限らずあらゆる場面で使われるようになってきました。
私もemacsユーザーとして導入してみました。
また、私自身はElispにもnode系のJSのプロフェッショナルではないので、
無駄な記述や間違った書き方をしているかもしれません。よろしくお願いします。
私はターミナルのemacsではうまくいきましたが、Mac GUI版のEmacsではeslintとうまくつなげられませんでした。もしも、この記事を閲覧された方で方法がわかる方がいらっしゃったら、コメ欄かtwitterで補足していただけると幸いです。
前提
nodeがインストールされている
emacsがインストールされている
eslintのインストール
はじめに、eslintをインストールします。
emacsのeslint構文チェックはemacs単体の機能ではありません。
裏ではeslintを動かしてそのAPIに対してemacsから値を投げて結果を受け取りコードをチェックします。
私はeslintをMac PCのグローバルにインストールします。
-gフラグを立てることで、PC全てで使えるようになります。
npm install -g eslint
続いて、eslintのreactプラグインをインストールします。
npm install -g eslint-plugin-react
同じく-gフラグをつけることで、グローバルに使用できるようになります。
インストールが終わったらeslintと打ち込んでコマンドが使えるか確認します。
eslint
eslintの準備ができました。
flycheckのインストール
それではemacs側に移動しましょう。
emacsの構文チェックではflycheckを使います。
melpaでインストール
melpaをつかっていう方は「M-x package-list-packages」でパッケージを表示し、
「C-s flycheck」で検索し、flyckeckの所にカーソルを合わせ、「i」と打ち込み、「x」でインストールの実行します。
~/.emacs.d/init.elを開いて、以下を記述します。
;;;flycheck (require 'flycheck) (add-hook 'after-init-hook #'global-flycheck-mode)
el-getでインストール
el-getの方は
.emacs/init.elを開いて、以下を記述します。
;;;flycheck (el-get-bundle flycheck) (add-hook 'after-init-hook #'global-flycheck-mode)
flycheckの設定
http://umi-uyura.hatenablog.com/entry/2015/10/28/182320
上のブログによると、flycheckはeslintをサポートしているものの、優先度的にはjshintを使うらしいので、以下の設定でjshint、jscsを無効にします。
ただ、後でわかったことなのですが、jshintもjscsもそれがnode側で環境が組まれていないと機能しないので、特に何もしてなければ関係無いことでした。
(eval-after-load 'flycheck '(custom-set-variables '(flycheck-disabled-checkers '(javascript-jshint javascript-jscs))))
設定は以上だと思います。
テストファイルを作成する
構文チェックを行うサンプルファイルを作成します。
場所はとりあえずどこでも良いので、デスクトップにでも作ります。
touch ~/Desktop/App.js
中身を以下のようにします。
import React from 'react'; class App extends React.Component{ constructor(){ super(); this.state = { txt: 'this is the state text' } } update(e){ this.setState({ txt: e.target.value }) } render(){ return( <div> <p>Text: {this.state.txt}</p> <input name="" type="text" onChange={this.update.bind(this)} /> </div> ) } } const Person = (props) => <h4>{props.name}</h4> export default App;
上の画像の矢印の所は「FlyC-」となっています。この「-」となっている状態はeslintがうまくいっていないことを表しています。
まだ、eslintの設定ができていないので、このように表示されています。
eslintの設定
eslintの設定ファイルはホームディレクトリにファイルを設置します。
ちなみに、検証していませんが、各Reacプロジェクトに設置することもできると思います。
ホームディレクトリに.eslintrcファイルを作成します。
touch ~/.eslintrc
僕は、どの様にeslintの構文チェック設定を書けば良いか分からないので、ほぼコピペです。
参考にしたサイト
https://github.com/yannickcr/eslint-plugin-react/issues/18#issuecomment-80754101
このように書きます。
{ "env" : { "es6": true }, "plugins": [ "react" ], "parserOptions": { "ecmaFeatures": { "jsx": true, "modules": true }, "sourceType": "module" }, "rules": { "strict": 0, "no-throw-literal": 1, "quotes": [1, "single"], "react/no-multi-comp": 1, "react/prop-types": 1, "react/display-name": 1, "react/wrap-multilines": 1, "react/self-closing-comp": 1, "react/no-did-mount-set-state": 1, "react/no-did-update-set-state": 1, "react/jsx-uses-react": 1, "react/jsx-uses-vars": 2, "react/react-in-jsx-scope": 1 } }
1つ注意事項があります。
"parserOptions": { "ecmaFeatures": { "jsx": true, "modules": true }, "sourceType": "module" },
の部分はeslintのバージョンによって書き方が違うらしく、もしも、うまくいか無い人はこのように書き換えてください。
"ecmaFeatures": { "jsx": true, "modules": true }, "parserOptions": { "sourceType": "module" },
このgithubのissueに書いてあります。
https://github.com/yannickcr/eslint-plugin-react/issues/447
私が調べた範囲で解説します。
“es6”: true
},
はes6で書いていることの宣言。
“react”
],
冒頭でインストールしたeslintのreactプラグインを使うことの宣言
“ecmaFeatures”: {
“jsx”: true,
“modules”: true
},
“sourceType”: “module”
},
jsxを使うことの宣言。
“sourceType”: “module”はこれが無いとreact componentのimport文で警告がでる。
rulesはeslintのルール
これらのルールの詳しい内容は公式サイトにあります。
http://eslint.org/docs/rules/
これで設定が終わりました。
確認してみる
それではeslintが機能するか確認します。
emacsで先ほど作成した~/Desktop/App.jsを開きます。
emacs ~/Desktop/App.js
この様に、「FlyC」のところが2箇所の警告を出していれば成功です。
警告の場所は const Personの所です。
試しにカーソルを警告の場所にあてると、警告文が表示されて問題がわかります。
どうやら、React componentを1ファイルに2つ書くなという警告ですね。
もう1つ、試してみましょう。.eslintrcファイルで文字列のクォートはシングルと宣言してるので、試しにダブルに変更すると、警告されます。
うまくいきました。
まとめ
eslintを使えば、余計なコードやファイル毎に違う規則でコードを書かなくなるので、より洗練されたプログラムがかけるでしょ。