Prettier output when formatting Next.js _app.tsx seems odd. #14690

Seefer · 2023-04-11T17:04:05Z

Seefer
Apr 11, 2023

I've been trying to track down a formatting performance issue when in a Next.js project where I will occasionally see this pop-up at the bottom right in VS Code when formatting on save is run. This format often takes 10-20 seconds.

I also see odd output in Prettier console on Next.js _app.tsx vs other files in the pages folder. With _document.tsx I get this output:

["INFO" - 5:36:15 PM] Formatting file:///f%3A/01-projects/devansdev/src/pages/_document.tsx
["INFO" - 5:36:15 PM] Using config file at 'f:\01-projects\devansdev\.prettierrc'
["INFO" - 5:36:15 PM] Using ignore file (if present) at f:\01-projects\devansdev\.prettierignore
["INFO" - 5:36:15 PM] File Info:
{
  "ignored": false,
  "inferredParser": "typescript"
}
["INFO" - 5:36:15 PM] Detected local configuration (i.e. .prettierrc or .editorconfig), VS Code configuration will not be used
["INFO" - 5:36:15 PM] Prettier Options:
{
  "filepath": "f:\\01-projects\\devansdev\\src\\pages\\_document.tsx",
  "parser": "typescript",
  "rangeEnd": 187,
  "rangeStart": 167,
  "useTabs": false,
  "bracketSpacing": true,
  "tabWidth": 2,
  "endOfLine": "lf",
  "singleQuote": true,
  "trailingComma": "es5",
  "semi": true
}
["INFO" - 5:36:15 PM] Formatting completed in 8ms.

The code in _documentt.tsx is:

import { Html, Head, Main, NextScript } from 'next/document';

export default function Document() {
  return (
    <Html lang="en">
      <Head />
      <body>
        <Main />
        <NextScript />
      </body>
    </Html>
  );
}

If I switch to _app.tsx and save I get this output:

["INFO" - 5:49:55 PM] Formatting file:///f%3A/01-projects/devansdev/src/pages/_app.tsx
["INFO" - 5:49:55 PM] Using config file at 'f:\01-projects\devansdev\.prettierrc'
["INFO" - 5:49:55 PM] Using ignore file (if present) at f:\01-projects\devansdev\.prettierignore
["INFO" - 5:49:55 PM] File Info:
{
  "ignored": false,
  "inferredParser": "typescript"
}
["INFO" - 5:49:55 PM] Detected local configuration (i.e. .prettierrc or .editorconfig), VS Code configuration will not be used
["INFO" - 5:49:55 PM] Prettier Options:
{
  "filepath": "f:\\01-projects\\devansdev\\src\\pages\\_app.tsx",
  "parser": "typescript",
  "rangeEnd": 72,
  "rangeStart": 31,
  "useTabs": false,
  "bracketSpacing": true,
  "tabWidth": 2,
  "endOfLine": "lf",
  "singleQuote": true,
  "trailingComma": "es5",
  "semi": true
}
["INFO" - 5:49:55 PM] Formatting completed in 12ms.
["INFO" - 5:49:55 PM] Formatting file:///f%3A/01-projects/devansdev/src/pages/_app.tsx
["INFO" - 5:49:55 PM] Using config file at 'f:\01-projects\devansdev\.prettierrc'
["INFO" - 5:49:55 PM] Using ignore file (if present) at f:\01-projects\devansdev\.prettierignore
["INFO" - 5:49:55 PM] File Info:
{
  "ignored": false,
  "inferredParser": "typescript"
}
["INFO" - 5:49:55 PM] Detected local configuration (i.e. .prettierrc or .editorconfig), VS Code configuration will not be used
["INFO" - 5:49:55 PM] Prettier Options:
{
  "filepath": "f:\\01-projects\\devansdev\\src\\pages\\_app.tsx",
  "parser": "typescript",
  "rangeEnd": 140,
  "rangeStart": 140,
  "useTabs": false,
  "bracketSpacing": true,
  "tabWidth": 2,
  "endOfLine": "lf",
  "singleQuote": true,
  "trailingComma": "es5",
  "semi": true
}
["INFO" - 5:49:55 PM] Formatting completed in 6ms.
["INFO" - 5:49:55 PM] Formatting file:///f%3A/01-projects/devansdev/src/pages/_app.tsx
["INFO" - 5:49:55 PM] Using config file at 'f:\01-projects\devansdev\.prettierrc'
["INFO" - 5:49:55 PM] Using ignore file (if present) at f:\01-projects\devansdev\.prettierignore
["INFO" - 5:49:55 PM] File Info:
{
  "ignored": false,
  "inferredParser": "typescript"
}
["INFO" - 5:49:55 PM] Detected local configuration (i.e. .prettierrc or .editorconfig), VS Code configuration will not be used
["INFO" - 5:49:55 PM] Prettier Options:
{
  "filepath": "f:\\01-projects\\devansdev\\src\\pages\\_app.tsx",
  "parser": "typescript",
  "rangeEnd": 282,
  "rangeStart": 259,
  "useTabs": false,
  "bracketSpacing": true,
  "tabWidth": 2,
  "endOfLine": "lf",
  "singleQuote": true,
  "trailingComma": "es5",
  "semi": true
}
["INFO" - 5:49:55 PM] Formatting completed in 10ms.
["INFO" - 5:49:55 PM] Formatting file:///f%3A/01-projects/devansdev/src/pages/_app.tsx
["INFO" - 5:49:55 PM] Using config file at 'f:\01-projects\devansdev\.prettierrc'
["INFO" - 5:49:55 PM] Using ignore file (if present) at f:\01-projects\devansdev\.prettierignore
["INFO" - 5:49:55 PM] File Info:
{
  "ignored": false,
  "inferredParser": "typescript"
}
["INFO" - 5:49:55 PM] Detected local configuration (i.e. .prettierrc or .editorconfig), VS Code configuration will not be used
["INFO" - 5:49:55 PM] Prettier Options:
{
  "filepath": "f:\\01-projects\\devansdev\\src\\pages\\_app.tsx",
  "parser": "typescript",
  "rangeEnd": 631,
  "rangeStart": 482,
  "useTabs": false,
  "bracketSpacing": true,
  "tabWidth": 2,
  "endOfLine": "lf",
  "singleQuote": true,
  "trailingComma": "es5",
  "semi": true
}
["INFO" - 5:49:55 PM] Formatting completed in 8ms.
["INFO" - 5:49:55 PM] Formatting file:///f%3A/01-projects/devansdev/src/pages/_app.tsx
["INFO" - 5:49:55 PM] Using config file at 'f:\01-projects\devansdev\.prettierrc'
["INFO" - 5:49:55 PM] Using ignore file (if present) at f:\01-projects\devansdev\.prettierignore
["INFO" - 5:49:55 PM] File Info:
{
  "ignored": false,
  "inferredParser": "typescript"
}
["INFO" - 5:49:55 PM] Detected local configuration (i.e. .prettierrc or .editorconfig), VS Code configuration will not be used
["INFO" - 5:49:55 PM] Prettier Options:
{
  "filepath": "f:\\01-projects\\devansdev\\src\\pages\\_app.tsx",
  "parser": "typescript",
  "rangeEnd": 140,
  "rangeStart": 31,
  "useTabs": false,
  "bracketSpacing": true,
  "tabWidth": 2,
  "endOfLine": "lf",
  "singleQuote": true,
  "trailingComma": "es5",
  "semi": true
}
["INFO" - 5:49:55 PM] Formatting completed in 8ms.
["INFO" - 5:49:55 PM] Formatting file:///f%3A/01-projects/devansdev/src/pages/_app.tsx
["INFO" - 5:49:55 PM] Using config file at 'f:\01-projects\devansdev\.prettierrc'
["INFO" - 5:49:55 PM] Using ignore file (if present) at f:\01-projects\devansdev\.prettierignore
["INFO" - 5:49:55 PM] File Info:
{
  "ignored": false,
  "inferredParser": "typescript"
}
["INFO" - 5:49:55 PM] Detected local configuration (i.e. .prettierrc or .editorconfig), VS Code configuration will not be used
["INFO" - 5:49:55 PM] Prettier Options:
{
  "filepath": "f:\\01-projects\\devansdev\\src\\pages\\_app.tsx",
  "parser": "typescript",
  "rangeEnd": 631,
  "rangeStart": 31,
  "useTabs": false,
  "bracketSpacing": true,
  "tabWidth": 2,
  "endOfLine": "lf",
  "singleQuote": true,
  "trailingComma": "es5",
  "semi": true
}
["INFO" - 5:49:55 PM] Formatting completed in 10ms.
["INFO" - 5:49:55 PM] Formatting file:///f%3A/01-projects/devansdev/src/pages/_app.tsx
["INFO" - 5:49:55 PM] Using config file at 'f:\01-projects\devansdev\.prettierrc'
["INFO" - 5:49:55 PM] Using ignore file (if present) at f:\01-projects\devansdev\.prettierignore
["INFO" - 5:49:55 PM] File Info:
{
  "ignored": false,
  "inferredParser": "typescript"
}
["INFO" - 5:49:55 PM] Detected local configuration (i.e. .prettierrc or .editorconfig), VS Code configuration will not be used
["INFO" - 5:49:55 PM] Prettier Options:
{
  "filepath": "f:\\01-projects\\devansdev\\src\\pages\\_app.tsx",
  "parser": "typescript",
  "rangeEnd": 631,
  "rangeStart": 31,
  "useTabs": false,
  "bracketSpacing": true,
  "tabWidth": 2,
  "endOfLine": "lf",
  "singleQuote": true,
  "trailingComma": "es5",
  "semi": true
}
["INFO" - 5:49:55 PM] Formatting completed in 9ms.

The code in _app.tsx is:

import '@/styles/globals.css';
import type { AppProps } from 'next/app';
import { Fira_Code, Nunito, Roboto_Flex } from 'next/font/google';

const robotoflex = Roboto_Flex({
  subsets: ['latin'],
  variable: '--font-robotoflex',
});

const fira = Fira_Code({
  subsets: ['latin'],
  variable: '--font-fira',
});

const nunito = Nunito({
  subsets: ['latin'],
  variable: '--font-nunito',
});

export default function App({ Component, pageProps }: AppProps) {
  return (
    <main
      className={`prose prose-headings:font-serif prose-p:font-sans prose-code:font-mono ${robotoflex.variable} ${nunito.variable} ${fira.variable}`}
    >
      <Component {...pageProps} />
    </main>
  );
}

Is this lengthy output when editing _app.tsx vs _document.tsx normal and if not, could this be related to the occasional formatting pop-up message that takes many seconds?

kachkaev · 2023-04-12T11:45:32Z

kachkaev
Apr 12, 2023
Maintainer

Do you run any other linters on save, such as ESLint? What if ESLint config includes rules that conflict with Prettier, so they can start battling with each other? You can try disabling conflicting rules via eslint-config-prettier and see how it goes. You can also try disabling Prettier and see if save action is still slow or not. I remember having performance issues with some rules from eslint-plugin-import, but VS Code was incorrectly mentioning a different tool in the bottom-right notification.

0 replies

Seefer · 2023-04-24T02:20:11Z

Seefer
Apr 24, 2023
Author

If you get the configuration for linting and/or formatting rules with other plugins correct, it works well but it can be frustrating troubleshooting config problems.

…

On Fri, 21 Apr 2023 at 07:01, wojtekxtx ***@***.***> wrote: @kachkaev <https://github.com/kachkaev> seems like eslint is ......., well, not very user-friendly (to say mildly). It tends to conflict not only with prettier but with many other tools also. — Reply to this email directly, view it on GitHub <#14690 (comment)>, or unsubscribe <https://github.com/notifications/unsubscribe-auth/AAA7TTH56X4ZNFBVNLZ7II3XCIPD7ANCNFSM6AAAAAAW2RNJ7Y> . You are receiving this because you authored the thread.Message ID: ***@***.***>

0 replies

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Prettier output when formatting Next.js _app.tsx seems odd. #14690

{{title}}

Replies: 2 comments 2 replies

{{title}}

{{editor}}'s edit

{{editor}}'s edit

{{title}}

Select a reply

Prettier output when formatting Next.js _app.tsx seems odd. #14690

Seefer Apr 11, 2023

Replies: 2 comments · 2 replies

kachkaev Apr 12, 2023 Maintainer

Seefer Apr 24, 2023 Author

Seefer
Apr 11, 2023

Replies: 2 comments 2 replies

kachkaev
Apr 12, 2023
Maintainer

Seefer
Apr 24, 2023
Author