Prettier does not format on save in VSCode

[viral flax]

When I save a file in my NextJS 14 workspace, Prettier does not format the file, like it does in other projects. I got the Prettier plugin installed.

This is my package.json devDependencies:

"devDependencies": { "@types/node": "^20", "@types/react": "^18", "@types/react-dom": "^18", "autoprefixer": "^10.0.1", "eslint": "^8.57.0", "eslint-config-next": "14.1.0", "eslint-config-prettier": "^9.1.0", "postcss": "^8", "prettier": "^3.2.5", "tailwindcss": "^3.3.0", "typescript": "^5" }

This is my .prettierrc:

{ "trailingComma": "all", "singleQuote": true, "printWidth": 100, "useTabs": false, "tabWidth": 2, "endOfLine": "auto" }

This is my .eslintrc

{ "extends": ["next", "prettier"] }

This is my tsconfig.json

{ "compilerOptions": { "lib": ["dom", "dom.iterable", "esnext"], "allowJs": true, "skipLibCheck": true, "strict": true, "noEmit": true, "esModuleInterop": true, "module": "esnext", "moduleResolution": "bundler", "resolveJsonModule": true, "isolatedModules": true, "jsx": "preserve", "incremental": true, "plugins": [ { "name": "next" } ], "paths": { "@/*": ["./*"] } }, "include": ["next-env.d.ts", "**/*.ts", "**/*.tsx", ".next/types/**/*.ts"], "exclude": ["node_modules"] }

What could be the reason it does not format on save, like other workspaces do?

[dense meteor]

Hi @viral flax. I'm kapa.ai, your friendly support bot. I will try to answer your question by searching through the knowledge base. :wave:

---

Hmm, I don't know enough to give you a confident answer yet. The extracts provided do not contain specific information about configuring Prettier to format on save in VSCode for a Next.js project.

However, it's worth noting that the issue might not be directly related to Next.js but could be due to VSCode settings or Prettier configuration.

You might want to check if "Format On Save" is enabled in your VSCode settings. Also, ensure that there are no conflicting rules between ESLint and Prettier in your project setup.

For more detailed information, you can refer to the Prettier documentation (https://prettier.io/docs/en/install.html) and VSCode Prettier extension documentation (https://marketplace.visualstudio.com/items?itemName=esbenp.prettier-vscode).

Note: you can ask me a follow up question by @ mentioning me again :speech_balloon:

@viral flax kapa.ai is still learning and improving, please let us know how it did by reacting below

[viral flax]

@dense meteor In a NextJs 14 project, do I need to specify this in my eslintrc file:

"parser": "@typescript-eslint/parser",

[dense meteor]

Let me check the knowledge base for you. One moment! :books:

---

No, you don't need to manually specify "parser": "@typescript-eslint/parser" in your .eslintrc file when using Next.js 14 with eslint-config-next. The next configuration already handles setting default values for the parser, plugins, and settings properties.

Here's an example of how your .eslintrc file should look:

{
 "extends": ["eslint:recommended", "next"]
}

You only need to manually re-declare these properties if you need a different configuration for your use case. If you include any other shareable configurations, you will need to make sure that these properties are not overwritten or modified.

For more information, you can refer to the Next.js ESLint configuration documentation (https://nextjs.org/docs/app/building-your-application/configuring/eslint#additional-configurations).

Note: you can ask me a follow up question by @ mentioning me again :speech_balloon:

@viral flax kapa.ai is still learning and improving, please let us know how it did by reacting below

[viral flax]

@dense meteor what if I want to add rules to the .eslintrc file then?

[dense meteor]

Let me check the knowledge base for you. One moment! :books:

---

If you want to modify or add rules to your .eslintrc file, you can do so by using the rules property. Here's an example:

{
 "extends": "next",
 "rules": {
 "react/no-unescaped-entities": "off",
 "@next/next/no-page-custom-font": "off"
 }
}

In this example, the rules react/no-unescaped-entities and @next/next/no-page-custom-font are being turned off. You can add or modify rules according to your project's requirements.

For more information, you can refer to the Next.js ESLint configuration documentation (https://nextjs.org/docs/pages/building-your-application/configuring/eslint#disabling-rules).

Note: you can ask me a follow up question by @ mentioning me again :speech_balloon:

@viral flax kapa.ai is still learning and improving, please let us know how it did by reacting below

[viral flax]

@dense meteor I added these rules:

now I get these warnings in my layout.tsx file:
Definition for rule 'prettier/prettier' was not found.eslint(prettier/prettier)
Definition for rule '@typescript-eslint/array-type' was not found.eslint(@typescript-eslint/array-type)
Definition for rule '@typescript-eslint/await-thenable' was not found.eslint(@typescript-eslint/await-thenable)
Definition for rule '@typescript-eslint/ban-types' was not found.eslint(@typescript-eslint/ban-types)
Definition for rule '@typescript-eslint/consistent-type-definitions' was not found.eslint(@typescript-eslint/consistent-type-definitions)
Definition for rule '@typescript-eslint/default-param-last' was not found.eslint(@typescript-eslint/default-param-last)

[dense meteor]

Let me check the knowledge base for you. One moment! :books:

---

The warnings you're seeing suggest that the ESLint rules you're trying to use are not recognized. This is likely because the necessary ESLint plugins are not installed or not properly configured in your project.

The rules you're trying to use are from the prettier and @typescript-eslint ESLint plugins. To use these rules, you need to install the corresponding plugins and include them in your ESLint configuration.

Here's how you can do it:

1. Install the necessary plugins:

npm install --save-dev eslint-plugin-prettier @typescript-eslint/eslint-plugin

2. Update your .eslintrc file to include the plugins:

{
  "extends": "next",
  "plugins": ["prettier", "@typescript-eslint"],
  "rules": {
    // your rules here
  }
}

Please replace // your rules here with the actual rules you want to use.

Remember, the rules should be defined in the rules property of your .eslintrc file, and the plugins should be defined in the plugins property.

For more information, you can refer to the ESLint documentation on using plugins (https://eslint.org/docs/user-guide/configuring/plugins) and the Next.js ESLint configuration documentation (https://nextjs.org/docs/app/building-your-application/configuring/eslint#additional-configurations).

Note: you can ask me a follow up question by @ mentioning me again :speech_balloon:

@viral flax kapa.ai is still learning and improving, please let us know how it did by reacting below

[viral flax]

@dense meteor when I try to npm install @typescript-eslint/eslint-plugin, i get this warning:

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@14.1.0
npm ERR! node_modules/eslint-config-next
npm ERR! dev eslint-config-next@"14.1.0" from the root project
npm ERR!
npm ERR! Could not resolve dependency:
npm ERR! dev @typescript-eslint/eslint-plugin@"" from the root project
npm ERR!
npm ERR! Conflicting peer dependency: @typescript-eslint/parser@7.0.2
npm ERR! node_modules/@typescript-eslint/parser
npm ERR! peer @typescript-eslint/parser@"^7.0.0" from @typescript-eslint/eslint-plugin@7.0.2
npm ERR! node_modules/@typescript-eslint/eslint-plugin
npm ERR! dev @typescript-eslint/eslint-plugin@"" from the root project

[dense meteor]

Let me check the knowledge base for you. One moment! :books:

---

The warning you're seeing is due to a version conflict between the @typescript-eslint/parser package required by eslint-config-next and the one required by @typescript-eslint/eslint-plugin.

eslint-config-next requires a version of @typescript-eslint/parser that is either ^5.4.2 or ^6.0.0, but @typescript-eslint/eslint-plugin requires a version that is ^7.0.0.

To resolve this issue, you can try installing a version of @typescript-eslint/eslint-plugin that is compatible with the version of @typescript-eslint/parser used in your project.

You can check the required peer dependencies for different versions of @typescript-eslint/eslint-plugin on the npm package page (https://www.npmjs.com/package/@typescript-eslint/eslint-plugin?activeTab=versions).

Alternatively, you can try updating eslint-config-next to a version that supports @typescript-eslint/parser@7.0.2, if such a version is available.

Remember to always check the compatibility of your packages to avoid version conflicts.

Note: you can ask me a follow up question by @ mentioning me again :speech_balloon:

@viral flax kapa.ai is still learning and improving, please let us know how it did by reacting below

[viral flax]

@dense meteor how do I deal with the Definition for rule 'prettier/prettier' was not found.

[dense meteor]

Let me check the knowledge base for you. One moment! :books:

---

The warning "Definition for rule 'prettier/prettier' was not found" suggests that ESLint is not recognizing the prettier plugin. This could be due to the plugin not being installed or not being properly configured in your ESLint setup.

Here's how you can resolve this issue:

1. Install the eslint-plugin-prettier and eslint-config-prettier packages:

npm install --save-dev eslint-plugin-prettier eslint-config-prettier

2. Update your .eslintrc file to include the prettier plugin and configuration:

{{
  "extends": ["next", "prettier"],
  "plugins": ["prettier"],
  "rules": {{
    "prettier/prettier": "error"
    // other rules...
  }}
}}

In this configuration, "prettier/prettier": "error" enables the prettier/prettier rule and sets it to report formatting issues as errors.

For more information, you can refer to the Next.js ESLint configuration documentation (https://nextjs.org/docs/app/building-your-application/configuring/eslint#additional-configurations) and the Prettier documentation (https://prettier.io/docs/en/integrating-with-linters.html#use-eslint-to-run-prettier).

Note: you can ask me a follow up question by @ mentioning me again :speech_balloon: