joppot

コピペで絶対動く。説明を妥協しない

ソフトウェア

Emacsでreact+es6に対応したflycheck + eslintの環境を構築する

投稿日:

Pocket

概要

みなさんこんにちはcandleです。
今回は以外に難しい、emacs + eslintの導入をしてみましょう。
emacsは他にもjsHintやjsxHintなどjavascriptの記法をチェックするパッケージがあります。
噂によるとReactやes6など最新のjavascriptの書き方にうまく対応できなかったり、
設定が難しかったりするらしいです。

近年はeslintが主流になってきて、emacsに限らずあらゆる場面で使われるようになってきました。

私もemacsユーザーとして導入してみました。
また、私自身はElispにもnode系のJSのプロフェッショナルではないので、
無駄な記述や間違った書き方をしているかもしれません。よろしくお願いします。

注意
私はターミナルのemacsではうまくいきましたが、Mac GUI版のEmacsではeslintとうまくつなげられませんでした。もしも、この記事を閲覧された方で方法がわかる方がいらっしゃったら、コメ欄かtwitterで補足していただけると幸いです。

前提

nodeがインストールされている
emacsがインストールされている

SPONSORED LINK


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/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

私が調べた範囲で解説します。

“env” : {
“es6”: true
},

はes6で書いていることの宣言。

“plugins”: [
“react”
],

冒頭でインストールしたeslintのreactプラグインを使うことの宣言

“parserOptions”: {
“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を使えば、余計なコードやファイル毎に違う規則でコードを書かなくなるので、より洗練されたプログラムがかけるでしょ。

スポンサードリンク

「為になったなぁ」と思ったら、シェアお願いします。

-ソフトウェア
-, ,

執筆者:


comment

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です

関連記事

Mac OS Mavericksのテキスト音声入力を試す

概要 どうもみなさんこんにちわcandleです。今回は文字やテキストをキーボードから打ち込むのではなく、マイクから入力する方法を試したいと思います。 条件 OSがMavericksであること 音声拡張 …

emacsのバージョンを確認する

概要 emacsのバージョンを簡単に確認しましょう。 記事にするほどものではありませんが、備忘録にまとめておきます。 emacsのメジャーなバージョンは22と23に大きく分かれており、最近では24もリ …

mac のiterm2でaltキーをescに割り当て、カーソル移動を早くする

概要 皆さんこんにちはcandleです。今回はiterm2のキーを設定して、カーソル移動を楽にします。 emacsユーザーなら分かると思いますが、カーソルの高速移動はalt+fで前へalt+bで後ろへ …

Mac OSで使われているポート番号を確認する(portsscan)

概要 みなさんこんにちはcandleです。今回はMacで使われているポートの確認方法を紹介します。 ポート番号とはパソコンがインターネット(とは限らないのですが)、外部からのアクセスを受け付けている番 …

Aptana Studio 3でソースコードのどこにカーソルがあっても改行する方法

概要 みなさんこんにちはcandleです。今回はAptana Studio 3の素晴らしい機能の1つを紹介します。 改行はソースコードを書く上では大変重要になります。 新しくコードを書いている時は改行 …

  • English
  • 日本語

プロフィール


ベンチャー企業のCTOをやってます。大学時代にプログラミングを始め、javaから入門し、C++へて、PHPへと進み、会社ではRailsを使用。自動化が大好きなプログラマー

twitter

スポンサードリンク

アーカイブ