Prettier integration doesn't seem to work

[dnbkr]

Run next info (available from version 12.0.8 and up)

    Operating System:
      Platform: darwin
      Arch: x64
      Version: Darwin Kernel Version 21.1.0: Wed Oct 13 17:33:23 PDT 2021; root:xnu-8019.41.5~1/RELEASE_X86_64
    Binaries:
      Node: 16.13.0
      npm: 8.1.0
      Yarn: 1.22.17
      pnpm: N/A
    Relevant packages:
      next: 12.0.8
      react: 17.0.2
      react-dom: 17.0.2

What version of Next.js are you using?

12.0.8

What version of Node.js are you using?

16.13.0

What browser are you using?

N/A

What operating system are you using?

macOS

How are you deploying your application?

N/A

Describe the Bug

Starting with a vanilla create-next-app project (reproduced using --typescript and regular javascript) and following the documented integration guide here running next lint reports no issues when an obvious formatting error is present in any source code.

reproduced in next@12.0.9-canary.0 and using --no-cache with next lint.

Expected Behavior

prettier errors should surface when using next lint

To Reproduce

npx create-next-app my-app
cd my-app
npm install --save-dev eslint-config-prettier prettier
echo '{ "extends": ["next/core-web-vitals", "prettier"] }' > .eslintrc.json
echo '   const foo = 123' > pages/test.js
npm run lint --no-cache

[balazsorban44]

see #33371, sorry, I misread first.

[balazsorban44]

So what's the behavior you expect exactly?

If it's formatting, that's not what eslint-config-prettier does. You could run npx prettier --write pages for that.

[dnbkr]

Thanks - I had assumed that eslint-config-prettier would raise prettier issues as eslint issues - but I can see from your link that's not what it does.

In case anyone finds this wanting to be able to get prettier integrated into eslint in this way, this is my .eslintrc.json file:

{
  "extends": ["next/core-web-vitals", "plugin:prettier/recommended"],
  "plugins": [
    "prettier"
  ],
  "rules": {
    "prettier/prettier": "error"
  }
}

package.json (without version numbers)

"eslint": "...",
"eslint-config-next": "...",
"eslint-config-prettier": "...",
"eslint-plugin-prettier": "...",
"prettier": "...",

[valoricDe]

Thank you for sharing.
@balazsorban44 I think this content should be also in https://nextjs.org/docs/basic-features/eslint#prettier

[kaykhan]

Well actually you should only need to add

{
  "extends": ["plugin:prettier/recommended"]
}

https://github.com/prettier/eslint-plugin-prettier#recommended-configuration

[manojgetwealthy]

@coffeedoughnuts The settings work fine but the npm build fails with this because of linting errors.
Any idea how to not apply prettier linting settings while building the next project?

So, I am trying to run linting separately with next lint and not on next build

Thanks - I had assumed that eslint-config-prettier would raise prettier issues as eslint issues - but I can see from your link that's not what it does.

In case anyone finds this wanting to be able to get prettier integrated into eslint in this way, this is my .eslintrc.json file:

{
  "extends": ["next/core-web-vitals", "plugin:prettier/recommended"],
  "plugins": [
    "prettier"
  ],
  "rules": {
    "prettier/prettier": "error"
  }
}

package.json (without version numbers)

"eslint": "...",
"eslint-config-next": "...",
"eslint-config-prettier": "...",
"eslint-plugin-prettier": "...",
"prettier": "...",

[juanzgc]

I still can't seem to get VSCode to show Prettier errors with the following config. However, with the cli I can view the errors. Fwiw, I do have the Prettier and ESLint extension installed and I am on NextJS 13. Anyone else not seeing the prettier errors?

Also yarn lint doesn't provide any warnings or errors with the current prettier configuration, which it should :/