Prettier not working since the latest create-nuxt-app release

[kissu]

Versions

• nuxt: 2.15.7
• node: 14.15.0

Reproduction

I've created a new Nuxt project with the latest version thanks to npx with the following configuration

I could not have a working Prettier with the configuration of the repo.

⚠️ My Prettier formatting was always working through ESlint, and as of today, is working perfectly fine on all the previous projects I've created, prior to the latest create-nuxt-app release.

My initial file to format looks like this

<template>
<div>
  nice
  <Tutorial/>
  </div>
</template>

<script>
export default {
  data() {
    return {
          key: 'test'
    }
  },
}
</script>

How to solve the issue

After some tests, I found the culprit in .eslintrc.js, this is the current configuration generated by the CLI

extends: [
  '@nuxtjs',
  'plugin:nuxt/recommended',
  'prettier'
],

This is the one that do actually work as before

extends: [
  '@nuxtjs',
  'plugin:prettier/recommended', // this line was updated
  'prettier'
],

Then, it formats my file properly

<template>
  <div>
    nice
    <Tutorial />
  </div>
</template>

<script>
export default {
  data() {
    return {
      key: 'test',
    }
  },
}
</script>

I did not hosted it on codesandbox, but the repo can be found on Github.

---

⚠️ EDIT, my bad: you also need to yarn add -D eslint-plugin-prettier to have it working.

[scscgit]

fyi, I have a pending PR to replace prettier by plugin:prettier/recommended, I think you shouldn't need to use both together: nuxt/create-nuxt-app#827

[WinterYukky]

I apologize for any disturbance caused by the PR I created. Please check this comment.
nuxt/create-nuxt-app#827 (comment)

[scscgit]

Could you please clarify if there is any reason why do you want to use Prettier through ESlint and not directly? As part of my PR I was trying to address a different issue, but it's likely that we'll keep the existing behavior of using only 'prettier' plugin, as it's more standard and recommended by Prettier. We should at least add a lintfix script that includes prettier to the create-nuxt-app template if it won't be covered by eslint's own --fix.

[kissu]

Here are some advantages of using it directly through ESlint: https://stackoverflow.com/a/68880413/8816585

[stale]

Thanks for your contribution to Nuxt!
This issue has been automatically marked as stale because it has not had recent activity. It will be closed if no further activity occurs.
If you would like this issue to remain open:

1. Verify that you can still reproduce the issue in the latest version of nuxt-edge
2. Comment the steps to reproduce it

Issues that are labeled as pending will not be automatically marked as stale.

[danielroe]

Would you raise this at https://github.com/nuxt/create-nuxt-app/ if it is still relevant? 🙏