AtomでReact×ES6×JSXを書くヒトがpackage「language-babel」を入れた際にErrorが出た際の放水の仕方


# 火事です。AtomでReact×ES6×JSXを書くヒトがpackage「language-babel」を入れた際に火が出た際の放水の仕方(Cannot find module 'eslint-plugin-react' or 'Cannot find module 'babel-eslint' or ESLint not found, Please install or make sure Atom is getting $PATH correctly or AssertionError: ImportDeclaration should appear when the mode is ES6 and in the module context.)


Atom側の設定とこちらの参照ファイルのPathを適切にすることで解決します。

ここで解決するエラーたち
・Cannot find module 'eslint-plugin-react'
・Cannot find module 'babel-eslint'
・AssertionError: ImportDeclaration should appear when the mode is ES6 and in the module context.
・ESLint not found, Please install or make sure Atom is getting $PATH correctly


## language-babel

![スクリーンショット 2016-03-05 10.29.56.png](https://qiita-image-store.s3.amazonaws.com/0/64377/8c634ddb-8e65-e72f-7077-ca354578e4ea.png)

このようなものがあったのですね。
早速入れました。

```
apm install language-babel 
```

もしもAtomを再起動した際に添付のように燃え上がったら
When If you restart the Atom, you get an Error, such as photos

![スクリーンショット 2016-03-05 10.49.54.png](https://qiita-image-store.s3.amazonaws.com/0/64377/019c571c-c0a4-5652-fd4a-eae3c1b516c3.png)


Error
・Cannot find module 'eslint-plugin-react'
・Cannot find module 'babel-eslint'
・AssertionError: ImportDeclaration should appear when the mode is ES6 and in the module context.


## やること
※globalにあるeslintを参照するか、プロジェクトルートにあるeslintを参照するかで違います
※ここではglobalにある.eslintrcを参照する方法を記します。(プロジェクトルートは後日記述)


### ホームディレクトリにnvmをcloneする

``` 
git clone git://github.com/creationix/nvm.git ~/.nvm
```
### nvmコマンドを使えるようにする
bash使いなら(その他ならその設定ファイルに)

```
sudo vim ~/.bash_profile
```
※sudoとvimはいらない人はいらない。要は~/.bash_profileを何かしらのエディタで開いてねってことです
以下をコピペ

```
if [[ -s /Users/[yourHome]/.nvm/nvm.sh ]] ; then source /Users/[yourHome]/.nvm/nvm.sh ; fi
```

### １・ユーザールート直下(cd ~)に.eslintrcファイルを作る。



### 2 コマンドで

```
npm install -g babel eslint babel-eslint
```

### 3 Atomのプラグインlinter-eslint　の設定
Atom側にlinter、linter-eslintをインストール

以下はコマンド。(GUIからでも可)
```
apm install linter linter-eslint
```

linter-eslintをinstall
↓
installしたlinter-eslintを探す。(pakeages→installedPackeagesで)
![スクリーンショット 2016-03-06 12.51.08.png](https://qiita-image-store.s3.amazonaws.com/0/64377/060a5065-e5b7-bf97-5fb7-c91ece008728.png)
settingを押下
↓

![スクリーンショット 2016-03-06 12.25.03.png](https://qiita-image-store.s3.amazonaws.com/0/64377/e706ef58-5bb2-6c1f-35d0-99074d2d4716.png)

青枠のところ。

「Global Node Path」に、コマンドで

```
npm config get prefix
```

で得られるパスを入力(添付のパスは各々違います)。
もしここでエラーでたら```node -v ```やってみてバージョンが出なかったら下記リンク先参照


### 4・Atom再起動

結構ハマった。英語記事読んだけど全然関係ないAtomとeslintrcのパスがうまくいっていなかった。
ここでやっていることは/にある.eslintrcをAtomが参照してlinterするってことで、どこにあるeslintrcを参照するかは環境によると思うので決めてね



### ５・まだエラー出る方。（ESLint not found, Please install or make sure Atom is getting $PATH correctly ）
https://github.com/AtomLinter/linter-eslint/issues/261

試してみて
1、node modulesにパッケージとしてインストールされてる？

```
sudo npm install -g eslint
```

２、.eslintrcがちゃんとある？

```
cd ~
ls -la
```
ありますか？


３、Atomのlinter-eslintのsettingのUse global ESlint instrationにチェック入っている？？


## Projectにeslintrcを置く場合
https://github.com/AtomLinter/linter-eslint/issues/259




参照
[http://kenokabe-techwriting.blogspot.jp/2015/08/javascriptes6react-jsxes5-atom-3-32015.html](http://kenokabe-techwriting.blogspot.jp/2015/08/javascriptes6react-jsxes5-atom-3-32015.html)