Create-nuxt-app: New project with ESLint/Prettier, warnings and errors

[Extarys]

I just run the create-nuxt-app and I checked ESLint and Prettier and right of the bat I have those errors.
Is it normal? Am I missing something?

I searched here, I'm sorry if I missed an answer.

 ERROR  in ./pages/index.vue                                                       friendly-errors 21:04:29

Module Error (from ./node_modules/eslint-loader/index.js):                         friendly-errors 21:04:29

/media/DarkHawk/srv/NodesProjects/NJS-domains/pages/index.vue
  5:25  warning  Expected 1 line break after opening tag (`<h1>`), but no line breaks found                                                                                                                                                                        vue/singleline-html-element-content-newline
  5:36  warning  Expected 1 line break before closing tag (`</h1>`), but no line breaks found                                                                                                                                                                      vue/singleline-html-element-content-newline
  6:28  warning  Expected 1 line break after opening tag (`<h2>`), but no line breaks found                                                                                                                                                                        vue/singleline-html-element-content-newline
  6:55  warning  Expected 1 line break before closing tag (`</h2>`), but no line breaks found                                                                                                                                                                      vue/singleline-html-element-content-newline
  8:76  error    Replace `>Documentation</a` with `⏎··········>Documentation</a⏎········`                                                                                                                                                                          prettier/prettier
  9:11  error    Replace `·href="https://github.com/nuxt/nuxt.js"·target="_blank"·class="button--grey">GitHub</a` with `⏎··········href="https://github.com/nuxt/nuxt.js"⏎··········target="_blank"⏎··········class="button--grey"⏎··········>GitHub</a⏎········`  prettier/prettier

✖ 6 problems (2 errors, 4 warnings)
  2 errors and 4 warnings potentially fixable with the `--fix` option.

                                                                                   friendly-errors 21:04:29
 @ ./.nuxt/router.js 13:24-15:3
 @ ./.nuxt/index.js
 @ ./.nuxt/client.js
 @ multi eventsource-polyfill webpack-hot-middleware/client?reload=true&timeout=30000&ansiColors=&overlayStyles=&name=client&path=/__webpack_hmr/client ./.nuxt/client.js

[clarkdo]

This should be fixed in next version

[Extarys]

Thanks @clarkdo.
I activated fixing on save, but after modification the changes rolls back. Is it a configuration file missing for prettier/eslint in the folder? Or is it my settings in VS Code that can mess with this?

[clarkdo]

It’s because the default templates were not well formatted, now the template files are all formatted in create-nuxt-app repo.

[Extarys]

Ohh I see, is there a way to test that? You said it was going to be in the next release?
I could never make prettier and vue work ok together I don't know why and I'm kind of lost on how to fix this :smile:

[clarkdo]

The prettier formatting on save should work together with your vscode plugin setting, you should check the doc of the plugin you’re using.
For example editor.formatOnSave in https://marketplace.visualstudio.com/items?itemName=esbenp.prettier-vscode

[Extarys]

Oh ok awesome, thanks!

[Extarys]

Well, I have prettier and vetur installed. It doesn't seem that there is an option for "Read the config file provided inside the project's folder" kind of thing.

Even yarn run lint -- --fix messed up and made things worse.

I thought the plugins read the config files .prettierrc and .eslingrc.js provided by create-nuxt-app... :confused:

[clarkdo]

Can you provide me a repo and steps?

I can have a look tmr, it’s 1 am now😿

[Extarys]

Oh damn, go get some sleep :)

[Extarys]

I modified .eslintrc.js:

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

VS Code extentions: Vetur, Eslint.
Config:

{
  "editor.formatOnSave": true,
  "eslint.alwaysShowStatus": true,
  "eslint.autoFixOnSave": true,
  "eslint.packageManager": "yarn",
  "eslint.validate": [
    "javascript",
    "javascriptreact",
    {
      "language": "vue",
      "autoFix": true
    }
  ],
  "[vue]": {
    "editor.formatOnSave": false
  }
}

TADA! :fireworks:

[wuhhh]

Installing Nuxt without eslint & prettier and following the steps here https://medium.com/@gogl.alex/how-to-properly-set-up-eslint-with-prettier-for-vue-or-nuxt-in-vscode-e42532099a9c gave me a perfect working setup. Hope it helps :)

[Extarys]

Thanks @wuhhh I'll bookmark the link in case I format my computer, again. :laughing:

[tircomnicu]

Thank you @wuhhh

[alansutherland]

god I hate eslint breaking things

[DerekHill]

I recently created a new nuxt app using npx create-nuxt-app and got these prettier warnings.

This install included "eslint-config-prettier": "^4.1.0" per https://github.com/nuxt/create-nuxt-app/blob/18740f86eb2afd3226d277b42000e6ab21e94deb/template/_package.json#L136

Updating eslint-config-prettier to ^6.7.0 seemed to fix the issue.

[xgqfrms]

what's wrong with this?

how to disabled prettier?

[clarkdo]

From the console, errors look like related to indentation.

@xgqfrms I'll open a pr to fix this.

[xgqfrms]

@clarkdo I think it should be a warning, not an error which will be broken the app, that's not too good for the beginner.

[clarkdo]

As I mentioned above, I'll open a pr to fix this, there should have no error in this file 😃

[rajeshdh]

Adding

"scripts": {
  "lintfix": "eslint --fix --ext .js,.vue --ignore-path .gitignore ."
}

to my package.json file fixed it for me.

Now running npm run lintfix fixes all the errors.

[dosstx]

The above issue fixed it for me, too. Thanks.

[baptistecs]

For me the issue was the VS Code config, I have had to set:
"vetur.format.defaultFormatter.html": "prettier"
instead of the default value:
"vetur.format.defaultFormatter.html": "prettyhtml"

[Developer-Rocha]

@rajeshdh Thanks bro. It's work for me.

[andriilive]

Issue appear only on JavaScript Setup
TypeScript seems ok

[kasvith]

Still having the issue

[fabiom91]

The prettier formatting on save should work together with your vscode plugin setting, you should check the doc of the plugin you’re using.
For example editor.formatOnSave in https://marketplace.visualstudio.com/items?itemName=esbenp.prettier-vscode

This solved the error for me! Thanks