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

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

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

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

Next.js

Next.jsは、Reactを用いたサーバサイドレンダリングなどを行う軽量なフレームワークです。Zeit社が開発しており、nextコマンドでプロジェクトを作成することにより、開発環境整備が整った環境が即時に作成できます。

Node.js

Node.jsとはGoogleのV8 JavaScriptエンジンを使用しているサーバーサイドのイベント駆動型プログラムです。

TypeScript

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

React.js

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

Q&A

0回答

2646閲覧

eslint-config-prettierのエラーが対処できない。Error: "prettier/@typescript-eslint" has been merged into ...

kanabunhalosaka

総合スコア1

ESLint

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

Next.js

Next.jsは、Reactを用いたサーバサイドレンダリングなどを行う軽量なフレームワークです。Zeit社が開発しており、nextコマンドでプロジェクトを作成することにより、開発環境整備が整った環境が即時に作成できます。

Node.js

Node.jsとはGoogleのV8 JavaScriptエンジンを使用しているサーバーサイドのイベント駆動型プログラムです。

TypeScript

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

React.js

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

0グッド

0クリップ

投稿2021/05/10 11:03

create-next-appしたNext.jsの環境構築をしています。
ESLintとprettierをインストールし、eslintrc.jsonに以下の記述をしました。

json

1{ 2 "env": { 3 "es6": true, 4 "node": true, 5 "browser": true, 6 "commonjs": true 7 }, 8 "globals": { 9 "Atomics": "readonly", 10 "SharedArrayBuffer": "readonly", 11 "React": "writable" 12 }, 13 "parser": "@typescript-eslint/parser", 14 "parserOptions": { 15 "ecmaVersion": 2018, 16 "sourceType": "module", 17 "ecmaFeatures": { 18 "jsx": true 19 } 20 }, 21 "settings": { 22 "react": { 23 "version": "detect" 24 } 25 }, 26 "plugins": ["react-hooks", "react", "@typescript-eslint", "prettier"], 27 "extends": [ 28 "eslint:recommended", 29 "plugin:@typescript-eslint/eslint-recommended", 30 "plugin:@typescript-eslint/recommended", 31 "plugin:react/recommended", 32 "plugin:react-hooks/recommended", 33 "prettier", 34 //"prettier/react", 35 "prettier/@typescript-eslint"☆☆☆☆☆☆ 36 ], 37 "rules": { 38 "react/prop-types": "off", 39 "prettier/prettier": "error", 40 "react/react-in-jsx-scope": "off" 41 }, 42 "overrides": [ 43 { 44 "files": ["*.js"], 45 "rules": { 46 //"@typescript-eslint/no-var-requires": "off", 47 //"@typescript-eslint/explicit-function-return-type": "off" 48 } 49 } 50 ] 51} 52

npm run devでを実行すると、うまくいきますが、以下の警告文が読み込まれたファイル(tsx等処理を記述するファイル)分何度も表示されてしまいます。

######cannot read config file: node_modules\eslint-config-prettier@typescript-eslint.js
######Error: "prettier/@typescript-eslint" has been merged into "prettier" in eslint-config-prettier 8.0.0.
######See: https://github.com/prettier/eslint-config-prettier/blob/main/CHANGELOG.md#version-800-2021-02-21
######Referenced from: .eslintrc.json

原因は、
エラー文のリンクからeslint-config-prettierのバージョンが8.0.0になったことにより、prettier/reactやprettier/@typescript-eslintなどがprettierに統一されたことによるものだと考えています。

そのため、eslintrc.jsonからprettier/reactとprettier/@typescript-eslint(上記eslintrc.jsonの☆の行)の行を削除しましたが、next.config.jsの全ての行がエラーになってしまい、コンパイルに失敗してしまいます。

どのようにこのエラーを対処すればよいでしょうか。
ご教授の程よろしくお願いいたします。

以下に、package.jsonとnext.configファイルを記述させていただきます。

json

1{ 2//package.json 3 "name": "---", 4 "version": "0.1.0", 5 "private": true, 6 "scripts": { 7 "dev": "next dev", 8 "build": "next build", 9 "start": "next start" 10 }, 11 "dependencies": { 12 "@reduxjs/toolkit": "^1.5.1", 13 "@zeit/next-sass": "^1.0.1", 14 "add": "^2.0.6", 15 "dotenv": "^9.0.0", 16 "eslint-config-prettier": "^8.3.0", 17 "firebase": "^8.5.0", 18 "next": "10.2.0", 19 "node-sass": "^5.0.0", 20 "react": "17.0.2", 21 "react-dom": "17.0.2", 22 "react-hook-form": "^7.4.2", 23 "react-redux": "^7.2.4" 24 }, 25 "devDependencies": { 26 "@types/node": "^15.0.2", 27 "@types/react": "^17.0.5", 28 "@types/react-dom": "^17.0.3", 29 "@typescript-eslint/eslint-plugin": "^4.22.1", 30 "@typescript-eslint/parser": "^4.22.1", 31 "eslint": "^7.26.0", 32 "eslint-config-airbnb": "^18.2.1", 33 "eslint-loader": "^4.0.2", 34 "eslint-plugin-import": "^2.22.1", 35 "eslint-plugin-jsx-a11y": "^6.4.1", 36 "eslint-plugin-prettier": "^3.4.0", 37 "eslint-plugin-react": "^7.23.2", 38 "eslint-plugin-react-hooks": "^4.2.0", 39 "gulp": "^4.0.2", 40 "gulp-sass": "^4.1.0", 41 "prettier": "^2.3.0", 42 "typescript": "^4.2.4" 43 } 44} 45

js

1//next.config.js 2const withSass = require('@zeit/next-sass'); 3 4module.exports = withSass({ 5 cssModules: true, 6}); 7 8module.exports = { 9 cssModules: true, 10 webpack: (config) => { 11 config.module.rules.push({ 12 test: /.tsx?$/, 13 loader: 'eslint-loader', 14 exclude: /node_modules/, 15 }); 16 return config; 17 }, 18 env: { 19 FIREBASE_API_KEY: process.env.FIREBASE_API_KEY, 20 FIREBASE_AUTH_DOMAIN: process.env.FIREBASE_AUTH_DOMAIN, 21 FIREBASE_DATABASE_URL: process.env.FIREBASE_DATABASE_URL, 22 FIREBASE_PROJECT_ID: process.env.FIREBASE_PROJECT_ID, 23 FIREBASE_STORAGE_BUCKET: process.env.FIREBASE_STORAGE_BUCKET, 24 FIREBASE_MESSAGING_SENDER_ID: process.env.FIREBASE_MESSAGING_SENDER_ID, 25 FIREBASE_APP_ID: process.env.FIREBASE_APP_ID, 26 }, 27}; 28
  • eslint-config-prettierのバージョンを8.0.0より前の7.2.0に戻しましたが、next.config.jsやfirebaseの設定ファイルがエラーになってしまい失敗しました。
  • pettier/reactのみをeslintrc.jsonから削除した場合はうまくいきます。prettier/@typescript-eslintをどう消すかだと思っています。

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

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

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

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

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

guest

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

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

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

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

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

ただいまの回答率
85.35%

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

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

質問する

関連した質問