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

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

新規登録して質問してみよう
ただいま回答率
85.50%
ESLint

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

JavaScript

JavaScriptは、プログラミング言語のひとつです。ネットスケープコミュニケーションズで開発されました。 開発当初はLiveScriptと呼ばれていましたが、業務提携していたサン・マイクロシステムズが開発したJavaが脚光を浴びていたことから、JavaScriptと改名されました。 動きのあるWebページを作ることを目的に開発されたもので、主要なWebブラウザのほとんどに搭載されています。

React.js

Reactは、アプリケーションのインターフェースを構築するためのオープンソースJavaScriptライブラリです。

Q&A

解決済

1回答

893閲覧

BabelとESLintでJSXがエラーになる

makkuro

総合スコア57

ESLint

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

JavaScript

JavaScriptは、プログラミング言語のひとつです。ネットスケープコミュニケーションズで開発されました。 開発当初はLiveScriptと呼ばれていましたが、業務提携していたサン・マイクロシステムズが開発したJavaが脚光を浴びていたことから、JavaScriptと改名されました。 動きのあるWebページを作ることを目的に開発されたもので、主要なWebブラウザのほとんどに搭載されています。

React.js

Reactは、アプリケーションのインターフェースを構築するためのオープンソースJavaScriptライブラリです。

0グッド

2クリップ

投稿2019/05/17 11:58

編集2019/05/17 23:31

追記しましたが、ESLintの問題ではないようです。

Babelのコンパイルも失敗してしまいます。


ESLintをReactに適用すると、以下のようにJSXがエラーになってしまいます。

react

1ReactDOM.render( 2 <h1>Hello React</h1>, // < Parsing error: Unexpected token /eslint 3 document.getElementById('root') 4);

調べたらすぐに原因はわかって、ESLintがデフォルトでJSX記法に対応していないので設定を追加する必要があるとのことでした。

#####参考にしたサイト

しかし、設定を記述した後も相変わらずエラーが出るので困っています。

使っている.eslintrc.jsonpackage.jsonを載せておきます。

#####環境

node v8.15.0 VSCode+拡張(ESLint)

.eslintrc.json

{ "env": { "browser": true, "es6": true, "node": true }, "extends": [ "standard", "eslint:recommended", "plugin:react/recommended" ], "globals": { "Atomics": "readonly", "SharedArrayBuffer": "readonly" }, "parserOptions": { "ecmaFeatures": { "jsx": true }, "ecmaVersion": 2018, "sourceType": "module" }, "plugins": [ "react" ], "rules": { "no-console": "warn", "react/jsx-uses-react": "error", "react/jsx-uses-vars": "error", "react/no-set-state": "error" } }

package.json

{ ... "devDependencies": { "eslint": "^5.16.0", "eslint-config-standard": "^12.0.0", "eslint-plugin-import": "^2.17.2", "eslint-plugin-node": "^9.0.1", "eslint-plugin-promise": "^4.1.1", "eslint-plugin-react": "^7.13.0", "eslint-plugin-standard": "^4.0.0", "express": "^4.17.0", "node-sass": "^4.12.0", "react": "^16.8.6", "react-dom": "^16.8.6", "typescript": "^3.4.5", "webpack": "^4.31.0", "webpack-cli": "^3.3.2", "webpack-dev-server": "^3.3.1" ... } }

eslintとそのモジュールはグローバルにはインストールしておらず、ローカルにインストールしています。npx eslint --debug srcで実行したところ、プラグインの読み込み等は正常に行われているようです。

長いですが、一応コマンドの出力も全文載せておきます。

bash

1$ npx eslint --debug src 2 eslint:cli CLI args: [ '--debug', 'src' ] +0ms 3 eslint:cli Running on files +4ms 4 eslint:glob-utils Creating list of files to process. +0ms 5 eslint:ignored-paths baseDir = "/Users/admin/dir" +0ms 6 eslint:ignored-paths addPatternRelativeToCwd: 7 eslint:ignored-paths original = "/node_modules/*" 8 eslint:ignored-paths cooked = "/node_modules/*" +1ms 9 eslint:ignored-paths addPatternRelativeToCwd: 10 eslint:ignored-paths original = "/bower_components/*" 11 eslint:ignored-paths cooked = "/bower_components/*" +0ms 12 eslint:ignored-paths addPatternRelativeToCwd: 13 eslint:ignored-paths original = ".*" 14 eslint:ignored-paths cooked = ".*" +0ms 15 eslint:ignored-paths addPatternRelativeToCwd: 16 eslint:ignored-paths original = "!../" 17 eslint:ignored-paths cooked = "!../" +0ms 18 eslint:ignored-paths Looking for ignore file in /Users/admin/dir +0ms 19 eslint:ignored-paths Could not find ignore file in cwd +0ms 20 eslint:ignored-paths addPatternRelativeToCwd: 21 eslint:ignored-paths original = "/node_modules/*" 22 eslint:ignored-paths cooked = "/node_modules/*" +1ms 23 eslint:ignored-paths addPatternRelativeToCwd: 24 eslint:ignored-paths original = "/bower_components/*" 25 eslint:ignored-paths cooked = "/bower_components/*" +0ms 26No files matching 'src' were found. 27admin-PC:dir admin$ npx eslint --debug ./src/index.jsx 28 eslint:cli CLI args: [ '--debug', './src/index.jsx' ] +0ms 29 eslint:cli Running on files +4ms 30 eslint:glob-utils Creating list of files to process. +0ms 31 eslint:ignored-paths baseDir = "/Users/admin/dir" +0ms 32 eslint:ignored-paths addPatternRelativeToCwd: 33 eslint:ignored-paths original = "/node_modules/*" 34 eslint:ignored-paths cooked = "/node_modules/*" +1ms 35 eslint:ignored-paths addPatternRelativeToCwd: 36 eslint:ignored-paths original = "/bower_components/*" 37 eslint:ignored-paths cooked = "/bower_components/*" +0ms 38 eslint:ignored-paths addPatternRelativeToCwd: 39 eslint:ignored-paths original = ".*" 40 eslint:ignored-paths cooked = ".*" +1ms 41 eslint:ignored-paths addPatternRelativeToCwd: 42 eslint:ignored-paths original = "!../" 43 eslint:ignored-paths cooked = "!../" +0ms 44 eslint:ignored-paths Looking for ignore file in /Users/admin/dir +0ms 45 eslint:ignored-paths Could not find ignore file in cwd +0ms 46 eslint:ignored-paths contains: +1ms 47 eslint:ignored-paths target = "/Users/admin/dir/src/index.jsx" +0ms 48 eslint:ignored-paths result = false +0ms 49 eslint:ignored-paths contains: +0ms 50 eslint:ignored-paths target = "/Users/admin/dir/src/index.jsx" +0ms 51 eslint:ignored-paths result = false +0ms 52 eslint:cli-engine Processing /Users/admin/dir/src/index.jsx +0ms 53 eslint:cli-engine Linting /Users/admin/dir/src/index.jsx +0ms 54 eslint:config Constructing config file hierarchy for /Users/admin/dir/src +0ms 55 eslint:config Using .eslintrc and package.json files +0ms 56 eslint:config Loading /Users/admin/dir/.eslintrc.json +1ms 57 eslint:config-file Loading JSON config file: /Users/admin/dir/.eslintrc.json +0ms 58 eslint:plugins Loaded plugin react (eslint-plugin-react@7.13.0) (from /Users/admin/dir/node_modules/eslint-plugin-react/index.js) +0ms 59 eslint:config-file Loading plugin:react/recommended +112ms 60 eslint:config-file Attempting to resolve eslint-plugin-react +1ms 61 eslint:config-file Loading JS config file: /Users/admin/dir/node_modules/eslint-plugin-react/index.js +0ms 62 eslint:config-file Loading /Users/admin/dir/node_modules/eslint/conf/eslint-recommended.js +15ms 63 eslint:config-file Loading JS config file: /Users/admin/dir/node_modules/eslint/conf/eslint-recommended.js +0ms 64 eslint:config-file Loading standard +16ms 65 eslint:config-file Attempting to resolve eslint-config-standard +0ms 66 eslint:config-file Loading JS config file: /Users/admin/dir/node_modules/eslint-config-standard/index.js +1ms 67 eslint:plugins Loaded plugin import (eslint-plugin-import@2.17.2) (from /Users/admin/dir/node_modules/eslint-plugin-import/lib/index.js) +152ms 68 eslint:plugins Loaded plugin node (eslint-plugin-node@9.0.1) (from /Users/admin/dir/node_modules/eslint-plugin-node/lib/index.js) +65ms 69 eslint:plugins Loaded plugin promise (eslint-plugin-promise@4.1.1) (from /Users/admin/dir/node_modules/eslint-plugin-promise/index.js) +6ms 70 eslint:plugins Loaded plugin standard (eslint-plugin-standard@4.0.0) (from /Users/admin/dir/node_modules/eslint-plugin-standard/index.js) +2ms 71 eslint:config Using /Users/admin/dir/.eslintrc.json +434ms 72 eslint:config-ops Using config from partial cache +0ms 73 eslint:config-ops Apply environment settings to config +1ms 74 eslint:config-ops Creating config for environment es6 +0ms 75 eslint:config-ops Creating config for environment node +0ms 76 eslint:config-ops Creating config for environment browser +0ms 77 eslint:linter Linting code for /Users/admin/dir/src/index.jsx (pass 1) +0ms 78 eslint:linter Generating fixed text for /Users/admin/dir/src/index.jsx (pass 1) +10ms 79 eslint:source-code-fixer Applying fixes +0ms 80 eslint:source-code-fixer shouldFix parameter was false, not attempting fixes +0ms 81 eslint:cli-engine Linting complete in: 455ms +450ms 82 83/Users/admin/dir/src/index.jsx 84 5:19 error Parsing error: Unexpected token / 85 861 problem (1 error, 0 warnings)

頑張って調べたのですが、理由が全くわからないので、どなたか教えていただきたいです。
よろしくお願いします。

##追記

この質問はReact開発環境構築2018初めてのReact項目を進める上で、ESLintがエラーになって質問させていただいたのですが、ESLintのエラーは後回しにしてBabelで指示通りにコンパイルしてもJSX記法で以下の様にエラーが出ます。

$ npm run dev > dir@1.0.0 dev /Users/admin/dir > babel-node server/server.js app listening on 3000 ✖ 「wdm」: Hash: 28f93ada8d77d7952359 Version: webpack 4.31.0 Time: 310ms Built at: 2019-05-18 08:19:04 Asset Size Chunks Chunk Names bundle.js 6.09 KiB main [emitted] main Entrypoint main = bundle.js [0] multi ./src 28 bytes {main} [built] [./src/index.jsx] 1.93 KiB {main} [built] [failed] [1 error] ERROR in ./src/index.jsx Module build failed (from ./node_modules/babel-loader/lib/index.js): SyntaxError: /Users/admin/dir/src/index.jsx: Unexpected token (5:2) 3 | 4 | ReactDOM.render( > 5 | <h1>Hello React</h1>, | ^ 6 | document.getElementById('root') 7 | ); at Parser.raise (/Users/admin/dir/node_modules/@babel/parser/lib/index.js:6322:17) at Parser.unexpected (/Users/admin/dir/node_modules/@babel/parser/lib/index.js:7638:16) at Parser.parseExprAtom (/Users/admin/dir/node_modules/@babel/parser/lib/index.js:8799:20) at Parser.parseExprSubscripts (/Users/admin/dir/node_modules/@babel/parser/lib/index.js:8385:23) at Parser.parseMaybeUnary (/Users/admin/dir/node_modules/@babel/parser/lib/index.js:8365:21) at Parser.parseExprOps (/Users/admin/dir/node_modules/@babel/parser/lib/index.js:8252:23) at Parser.parseMaybeConditional (/Users/admin/dir/node_modules/@babel/parser/lib/index.js:8225:23) at Parser.parseMaybeAssign (/Users/admin/dir/node_modules/@babel/parser/lib/index.js:8172:21) at Parser.parseExprListItem (/Users/admin/dir/node_modules/@babel/parser/lib/index.js:9449:18) at Parser.parseCallExpressionArguments (/Users/admin/dir/node_modules/@babel/parser/lib/index.js:8592:22) @ multi ./src main[0] ℹ 「wdm」: Failed to compile.

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

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

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

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

guest

回答1

0

自己解決

Babel7以前の情報とBabel7を切り分けて考える必要があったのと、コピペだけでは無くある程度の構文を理解するよう心がけて粘ったら、よくわからないけど解決しました。

投稿2019/05/20 05:58

makkuro

総合スコア57

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

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

ただいまの回答率
85.50%

質問をまとめることで
思考を整理して素早く解決

テンプレート機能で
簡単に質問をまとめる

質問する

関連した質問