As I work with TypeScript and Next.js, I decided to implement strict code formatting rules by adding the following configuration to my eslintrc.json file:
"rules": {
"prettier/prettier": "error"
}
However, when I ran npm run build, I encountered an error that stated:
1:1 Error: Definition for rule 'prettier/prettier' was not found.
Interestingly, these errors only appeared in the terminal and not in the code itself.
To address this issue, I took the step of including the necessary plugins in my eslintrc.json file:
"plugins": ["@typescript-eslint", "prettier"]
Upon running npm run build once more, I noticed that several formatting errors were highlighted, even some that were not supposed to be flagged (such as changing "react" to 'react'). In my project, 'react' is the correct syntax.
My question is: How can I ensure that only the correct errors are displayed? Any help on this matter would be greatly appreciated. Thank you.
Prettier Configuration
{
"tabWidth": 2,
"trailingComma": "es5",
"semi": true,
"singleQuote": true
}
eslintrc.json Configuration
{
"extends": [
"plugin:@typescript-eslint/recommended",
"next/core-web-vitals",
"prettier"
],
"rules": {
"prettier/prettier": "error"
},
"plugins": ["@typescript-eslint", "prettier"]
}
package.json Configuration
{
"name": "****",
"version": "0.1.0",
"private": true,
"scripts": {
"dev": "next dev",
"build": "next build",
"start": "next start",
"lint": "next lint",
"format": "prettier --write --ignore-path .gitignore --ignore-path .prettierignore './**/*.{js,jsx,ts,tsx,json,css}' && next lint --fix"
},
"dependencies": {
// List of dependencies omitted for brevity
},
"devDependencies": {
// List of devDependencies omitted for brevity
},
"volta": {
"node": "18.17.0"
}
}
If you have any insights or solutions to offer on this matter, I am eager to learn. Thank you for your assistance.