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

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

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

npmは、Node Packaged Modulesの略。Node.jsのライブラリ・パッケージを管理できるツールです。様々なモジュールを簡単にインストールでき、自分でモジュールを作成し公開する際にも使用できます。

ESLint

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

Yarn

Yarnは、Facebook/Exponent/Google/Tildeが開発したJavaScriptのパッケージマネージャ。npmよりもインストールが速く、厳密にモジュールのバージョンを固定できるなど、npmの問題を解決。npmと互換性があり、同じpackage.jsonを使用できます。

TypeScript

TypeScriptは、マイクロソフトによって開発された フリーでオープンソースのプログラミング言語です。 TypeScriptは、JavaScriptの構文の拡張であるので、既存の JavaScriptのコードにわずかな修正を加えれば動作します。

React.js

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

Q&A

0回答

625閲覧

eslintとprettierの設定をした後にnpm startするとコンパイルエラーが出る原因について

KobeanH

総合スコア6

npm

npmは、Node Packaged Modulesの略。Node.jsのライブラリ・パッケージを管理できるツールです。様々なモジュールを簡単にインストールでき、自分でモジュールを作成し公開する際にも使用できます。

ESLint

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

Yarn

Yarnは、Facebook/Exponent/Google/Tildeが開発したJavaScriptのパッケージマネージャ。npmよりもインストールが速く、厳密にモジュールのバージョンを固定できるなど、npmの問題を解決。npmと互換性があり、同じpackage.jsonを使用できます。

TypeScript

TypeScriptは、マイクロソフトによって開発された フリーでオープンソースのプログラミング言語です。 TypeScriptは、JavaScriptの構文の拡張であるので、既存の JavaScriptのコードにわずかな修正を加えれば動作します。

React.js

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

0グッド

0クリップ

投稿2022/05/18 13:21

困っていること

create-react-appでreact環境を作った後、eslintとprettierの設定を行いました。設定後にnpm startをしてみると2回に一度、以下のエラーが出ます。どのように直せば良いでしょうか?

イメージ説明

現在のコード

eslint

1module.exports = { 2 // 環境設定 3 env: { 4 es6: true, 5 browser: true, 6 node: true, 7 }, 8 parser: 'babel-eslint', 9 plugins: ['react'], 10 parserOptions: { 11 ecmaVersion: 2021, 12 sourceType: 'module', 13 ecmaFeatures: { 14 jsx: true, 15 }, 16 }, 17 extends: [ 18 'some-other-config-you-use', 19 'prettier' 20 ] 21}; 22

package.json

1{ 2 "name": "frontend", 3 "version": "0.1.0", 4 "private": true, 5 "dependencies": { 6 "@testing-library/jest-dom": "^5.16.4", 7 "@testing-library/react": "^13.2.0", 8 "@testing-library/user-event": "^13.5.0", 9 "react": "^18.1.0", 10 "react-dom": "^18.1.0", 11 "react-router-dom": "^6.3.0", 12 "react-scripts": "5.0.1", 13 "styled-components": "^5.3.5", 14 "styled-reset": "^4.4.0", 15 "web-vitals": "^2.1.4" 16 }, 17 "scripts": { 18 "start": "react-scripts start", 19 "build": "react-scripts build", 20 "test": "react-scripts test", 21 "eject": "react-scripts eject" 22 }, 23 "eslintConfig": { 24 "extends": [ 25 "react-app", 26 "react-app/jest" 27 ] 28 }, 29 "browserslist": { 30 "production": [ 31 ">0.2%", 32 "not dead", 33 "not op_mini all" 34 ], 35 "development": [ 36 "last 1 chrome version", 37 "last 1 firefox version", 38 "last 1 safari version" 39 ] 40 }, 41 "devDependencies": { 42 "eslint-config-prettier": "^8.5.0", 43 "eslint-plugin-prettier": "^4.0.0", 44 "eslint-plugin-react": "^7.29.4", 45 "prettier": "^2.6.2" 46 } 47} 48

prettier

1{ 2 "printWidth": 100, 3 "trailingComma": "es5", 4 "tabWidth": 2, 5 "semi": true, 6 "singleQuote": true 7} 8

試したこと

eslint-config-prettierのバージョンが8以上だとeslintrcのextendsを以下のようにしないといけないと書いてあったので試してみましたが、解決できませんでした。

eslintrc.js

1module.exports = { 2 // 環境設定 3 env: { 4 es6: true, 5 browser: true, 6 node: true, 7 }, 8 parser: 'babel-eslint', 9 plugins: ['react'], 10 parserOptions: { 11 ecmaVersion: 2021, 12 sourceType: 'module', 13 ecmaFeatures: { 14 jsx: true, 15 }, 16 }, 17 extends: ['some-other-config-you-use', 'plugin:prettier/recommended'], 18}; 19

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

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

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

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

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

y_waiwai

2022/05/18 13:30

質問は編集できます 無駄に質問建てないで追記修正しましょう
KobeanH

2022/05/18 13:36

編集できること知りませんでした。 申し訳ありません
technocore

2022/05/18 14:49

extends: [ 'some-other-config-you-use', これは何のオプションですか?
guest

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

まだ回答がついていません

会員登録して回答してみよう

アカウントをお持ちの方は

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

ただいまの回答率
85.48%

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

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

質問する

関連した質問