質問をすることでしか得られない、回答やアドバイスがある。

15分調べてもわからないことは、質問しよう!

ただいまの
回答率

90.38%

  • Atom (テキストエディタ)

    679questions

  • ESLint

    42questions

    ESLintは、JavaScriptのための構文チェックツール。全検証ルールを自由に on/offでき、独自のプロジェクトに合わせたカスタムルールを容易に設定することが可能。公開されている様々なプラグインを組み込んで使用することもできます。

atomのeslintが仕事しない

受付中

回答 2

投稿 編集

  • 評価
  • クリップ 0
  • VIEW 2,513

cloudspider

score 80

npm,reactともに初心者です。

現在atomを使ってreactの勉強をしているのですが、エラーが上手く表示されないのでeslintを使ってみようと思っていろいろ調べてみたのですが、なかなかうまくいきません。

osはmacを使っています。

パッケージの導入にあたり主に以下のサイトを参考にしました
ES6とReactのAirbnbのスタイルガイドを適用したいと思っています。
https://mae.chab.in/archives/2874
https://teratail.com/questions/20108

myreという名前のフォルダ上で作業しています。
myre
├── 1.2.hello.html
├── 1.2.hello.js
├── babel
├── react-dom.js
├── react.js
└── style.css

何回か試した手順は以下のような感じです。

・端末から$ atom ./myre
・atom上でパッケージ「linter」「linter-eslint」を入れる。
$ npm init
$ npm install --save-dev eslint
$ eslint -v→ v4.5.0
$ npm install --save-dev eslint-config-airbnb eslint-plugin-import eslint-plugin-react eslint-plugin-jsx-a11y eslint
$ touch .eslintrc

.eslintrcに

{
  "extends": "airbnb"
}

以上です。

またパッケージのsettingはデフォルトのままで
linter-eslintのsettingでチェックされている項目は
・Disable when no ESLint config is found
・Show Rule ID in Messages
の2つのみです。

参考にしたサイトではインストールさえすればjsファイルなどを開くと自動的にeslintがリアルタイムでエラーを指摘してくれるとあるのですが、全く何の変化もありません。

表示されているファイルにエラーがないことはないと思うのですが(行末のセミコロンを消したりつけたりしても何の変化もなし)、だとしてもatomの画面上のどこかに変化があっても良いはずだと思います。

【補足】
fiwa様のリンクを参照した結果を載せます。
コマンドパレットからLinter Eslint: Debugを実行した結果。

Atom version: 1.19.3
linter-eslint version: 8.2.1
ESLint version: 4.5.0
Hours since last Atom restart: 0
Platform: darwin
Using global ESLint from: /Users/cloudspider/.nodebrew/node/v8.1.1/lib/node_modules/eslint
Current file's scopes: [
  "source.js.jsx",
  "meta.method-call.with-arguments.js",
  "meta.function.method.js",
  "meta.method-call.with-arguments.js",
  "meta.brace.curly.litobj.js"
]
linter-eslint configuration: {
  "globalNodePath": "/Users/cloudspider/.nodebrew/node/v8.1.1",
  "useGlobalEslint": true,
  "lintHtmlFiles": false,
  "showRuleIdInMessage": true,
  "disableWhenNoEslintConfig": true,
  "eslintrcPath": "",
  "advancedLocalNodeModules": "",
  "eslintRulesDir": "",
  "disableEslintIgnore": false,
  "disableFSCache": false,
  "fixOnSave": false,
  "scopes": [
    "source.js",
    "source.jsx",
    "source.js.jsx",
    "source.babel",
    "source.js-semantic"
  ],
  "rulesToSilenceWhileTyping": [],
  "rulesToDisableWhileFixing": []
}

Editor: Log Cursor Scopeの結果

Scopes at Cursor
・source.js.jsx
・meta.method-call.with-arguments.js
・meta.function.method.js
・punctuation.terminator.statement.js


のようになりました

どこに原因があるんでしょうか。

ご存じの方がいらっしゃれば、ご教示願えませんでしょうか。
よろしくお願いします。

  • 気になる質問をクリップする

    クリップした質問は、後からいつでもマイページで確認できます。

    またクリップした質問に回答があった際、通知やメールを受け取ることができます。

    クリップを取り消します

  • 良い質問の評価を上げる

    以下のような質問は評価を上げましょう

    • 質問内容が明確
    • 自分も答えを知りたい
    • 質問者以外のユーザにも役立つ

    評価が高い質問は、TOPページの「注目」タブのフィードに表示されやすくなります。

    質問の評価を上げたことを取り消します

  • 評価を下げられる数の上限に達しました

    評価を下げることができません

    • 1日5回まで評価を下げられます
    • 1日に1ユーザに対して2回まで評価を下げられます

    質問の評価を下げる

    teratailでは下記のような質問を「具体的に困っていることがない質問」、「サイトポリシーに違反する質問」と定義し、推奨していません。

    • プログラミングに関係のない質問
    • やってほしいことだけを記載した丸投げの質問
    • 問題・課題が含まれていない質問
    • 意図的に内容が抹消された質問
    • 広告と受け取られるような投稿

    評価が下がると、TOPページの「アクティブ」「注目」タブのフィードに表示されにくくなります。

    質問の評価を下げたことを取り消します

    この機能は開放されていません

    評価を下げる条件を満たしてません

    評価を下げる理由を選択してください

    詳細な説明はこちら

    上記に当てはまらず、質問内容が明確になっていない質問には「情報の追加・修正依頼」機能からコメントをしてください。

    質問の評価を下げる機能の利用条件

    この機能を利用するためには、以下の事項を行う必要があります。

回答 2

0

Atom の Preferences → Packages → linter-eslint の Settings のところで、"Global Node Installation Path"は指定しているでしょうか。npm get prefixの出力と同じものを入力しておけばよいようです。

linter-eslint-settings

投稿

編集

  • 回答の評価を上げる

    以下のような回答は評価を上げましょう

    • 正しい回答
    • わかりやすい回答
    • ためになる回答

    評価が高い回答ほどページの上位に表示されます。

  • 回答の評価を下げる

    下記のような回答は推奨されていません。

    • 間違っている回答
    • 質問の回答になっていない投稿
    • スパムや攻撃的な表現を用いた投稿

    評価を下げる際はその理由を明確に伝え、適切な回答に修正してもらいましょう。

  • 2017/08/24 15:31

    実行してみても何も表示されませんでした。
    グローバルにインストールするのはあまりよくないみたいなので
    npm uninstall -g
    なども実行し、その後質問文の通りに実行してみたりしたのですが、やはり変わりありませんでした・・。

    キャンセル

  • 2017/08/24 22:38

    すでに閉じられているissueですが、ちょっと似た話があることに気付きました。
    https://github.com/AtomLinter/linter-eslint/issues/834
    プロジェクトフォルダにおいてAtomで何かテストする.jsファイルを開いてコードのどこかにカーソルを置いた状態で、Packages → Command Palette → Toggle でコマンドパレットを開き、`Linter Eslint: Debug`を実行すると、どういった表示になるでしょうか?

    キャンセル

  • 2017/08/25 00:06

    ご回答ありがとうございます。
    コメントだと見にくくなると思い質問文に捕捉させていただきました。
    参照のリンクを見ながら奮闘してみます。

    キャンセル

0

ATOMのlinterで表示させたいってことであれば
.eslintrc.jsをちゃんと書いてないだけかと

投稿

  • 回答の評価を上げる

    以下のような回答は評価を上げましょう

    • 正しい回答
    • わかりやすい回答
    • ためになる回答

    評価が高い回答ほどページの上位に表示されます。

  • 回答の評価を下げる

    下記のような回答は推奨されていません。

    • 間違っている回答
    • 質問の回答になっていない投稿
    • スパムや攻撃的な表現を用いた投稿

    評価を下げる際はその理由を明確に伝え、適切な回答に修正してもらいましょう。

15分調べてもわからないことは、teratailで質問しよう!

  • ただいまの回答率 90.38%
  • 質問をまとめることで、思考を整理して素早く解決
  • テンプレート機能で、簡単に質問をまとめられる

同じタグがついた質問を見る

  • Atom (テキストエディタ)

    679questions

  • ESLint

    42questions

    ESLintは、JavaScriptのための構文チェックツール。全検証ルールを自由に on/offでき、独自のプロジェクトに合わせたカスタムルールを容易に設定することが可能。公開されている様々なプラグインを組み込んで使用することもできます。