環境
{
"name": "client",
"version": "0.1.0",
"private": true,
"type": "module",
"scripts": {
"dev": "next dev",
"build": "next build",
"start": "next start",
"prepare": "husky install",
"format": "prettier . --write",
"lint": "eslint src",
"lintfix": "eslint src --fix"
},
"dependencies": {
"next": "^14.2.3",
"react": "^18",
"react-dom": "^18"
},
"devDependencies": {
"@types/node": "^20",
"@types/react": "^18",
"@types/react-dom": "^18",
"@typescript-eslint/eslint-plugin": "^7.8.0",
"@typescript-eslint/parser": "^7.8.0",
"autoprefixer": "^10",
"eslint": "^8.57.0",
"eslint-config-next": "13.5.6",
"husky": "^9.0.11",
"lint-staged": "^15.2.2",
"postcss": "^8",
"prettier": "^3.2.5",
"tailwindcss": "^3",
"typescript": "^5"
},
"lint-staged": {
"*.{js,jsx,ts,tsx}": [
"eslint --fix",
"prettier --write"
]
}
}
導入
最初に下記のコマンドを実行し、インストールをします。
npm i - D eslint
次に下記コマンドを実行し、初期化を行います。
npx eslint --init
そして、いくつか質問をされますが、ここはご自身の設定に合わせて回答してください。下記は自身の解答例を貼っておきます。
↓私の回答
✔ How would you like to use ESLint? · problems
✔ What type of modules does your project use? · esm
✔ Which framework does your project use? · react
✔ Does your project use TypeScript? · No / Yes
✔ Where does your code run? · browser
✔ What format do you want your config file to be in? · JavaScript
解凍した後に最後の質問で下記の内容を質問されるので、誤字シイの設定に合わせて回答してください。自身の回答も貼っておきます。
@typescript-eslint/eslint-plugin@latest eslint-plugin-react@latest @typescript-eslint/parser@latest
↓私の回答
✔ Would you like to install them now? · No / Yes
✔ Which package manager do you want to use? · npm
そしてパッケージをインストールしたのかなと思い、package.json内のscripsフィールドにlintの"lint": "eslint src",記述を追記して実行すると下記のワーニングが出ました。
Oops! Something went wrong! :(
ESLint: 8.57.0
ESLint couldn't find the plugin "@typescript-eslint/eslint-plugin".
(The package "@typescript-eslint/eslint-plugin" was not found when loaded as a Node module from the directory "/Users/minto_000/Documents/ideaProjects/full/couple-compass-app/client".)
It's likely that the plugin isn't installed correctly. Try reinstalling by running the following:
npm install @typescript-eslint/eslint-plugin@latest --save-dev
The plugin "@typescript-eslint/eslint-plugin" was referenced from the config file in ".eslintrc.cjs".
If you still can't figure out the problem, please stop by https://eslint.org/chat/help to chat with the team.
要するに、**@typescript-eslint/eslint-plugin**パッケージが見つからないのでコマンドを下記のコマンドを実行してくれというものでした。
npm install @typescript-eslint/eslint-plugin@latest --save-dev
コマンドを実行すると下記のエラーが出ました。
npm ERR! code ERESOLVE
npm ERR! ERESOLVE could not resolve
npm ERR!
npm ERR! While resolving: client@0.1.0
npm ERR! Found: @typescript-eslint/parser@6.21.0
npm ERR! node_modules/@typescript-eslint/parser
npm ERR! @typescript-eslint/parser@"^5.4.2 || ^6.0.0" from eslint-config-next@13.5.6
npm ERR! node_modules/eslint-config-next
npm ERR! dev eslint-config-next@"13.5.6" from the root project
npm ERR!
npm ERR! Could not resolve dependency:
npm ERR! dev @typescript-eslint/eslint-plugin@"7.8.0" from the root project
npm ERR!
npm ERR! Conflicting peer dependency: @typescript-eslint/parser@7.8.0
npm ERR! node_modules/@typescript-eslint/parser
npm ERR! peer @typescript-eslint/parser@"^7.0.0" from @typescript-eslint/eslint-plugin@7.8.0
npm ERR! node_modules/@typescript-eslint/eslint-plugin
npm ERR! dev @typescript-eslint/eslint-plugin@"7.8.0" from the root project
npm ERR!
npm ERR! Fix the upstream dependency conflict, or retry
npm ERR! this command with --force or --legacy-peer-deps
npm ERR! to accept an incorrect (and potentially broken) dependency resolution.
要するに**@typescript-eslint/parser**のバージョンが7以上必要みたいでした。下記のコマンドを実行してバージョンを7以上にしました。
npm install @typescript-eslint/parser@latest --save-dev
その後に、再び下記のコマンドを実行してパッケージをインストールしました。
npm install @typescript-eslint/eslint-plugin@latest --save-dev
最後にnpm run lintを実行して、下記のエラーが出る場合は.eslint.cjs内の記述を追記してみてください。
↓エラー内容例
5:5 error 'React' must be in scope when using JSX react/react-in-jsx-scope
module.exports = {
env: {
browser: true,
es2021: true,
},
extends: [
"eslint:recommended",
"plugin:@typescript-eslint/recommended",
"plugin:react/recommended",
],
overrides: [
{
env: {
node: true,
},
files: [".eslintrc.{js,cjs}"],
parserOptions: {
sourceType: "script",
},
},
],
parser: "@typescript-eslint/parser",
parserOptions: {
ecmaVersion: "latest",
sourceType: "module",
},
plugins: ["@typescript-eslint", "react"],
rules: {
"react/react-in-jsx-scope": "off",
},
};
最後のrulesの部分に書いてある内容を追記することで今回のエラーをスキップできます。また、今回のエラーは無視しても動くように対応されているので、スキップしていい内容になります。