LoginSignup
10
10

More than 5 years have passed since last update.

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

Last updated at Posted at 2016-03-05

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

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

sudo npm install -g eslint

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

cd ~
ls -la

ありますか?

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

Projectにeslintrcを置く場合

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

10
10
0

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
10
10