1. Qiita
  2. 投稿
  3. ATOM

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

  • 10
    いいね
  • 0
    コメント

火事です。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

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

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

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

1・ユーザールート直下(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
settingを押下

スクリーンショット 2016-03-06 12.25.03.png

青枠のところ。

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

npm config get prefix

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

4・Atom再起動

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

5・まだエラー出る方。(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

2、.eslintrcがちゃんとある?

cd ~
ls -la

ありますか?

3、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