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

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

About this issue

Original URL
State: closed
Created 5 years ago
Comments: 26 (6 by maintainers)

Most upvoted comments

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.

+24

rajeshdh on Dec 12, 2019

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"

+16

baptistecs on Dec 17, 2019

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! 🎆

+14

Extarys on Jul 3, 2019

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… 😕

Extarys on Jul 2, 2019

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 😃

wuhhh on Jul 3, 2019

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

clarkdo on Jul 2, 2019

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

dosstx on Dec 14, 2019

This should be fixed in next version

clarkdo on Jul 2, 2019

@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.

xgqfrms on Dec 3, 2019

what’s wrong with this?

how to disabled prettier?

xgqfrms on Dec 3, 2019

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.

DerekHill on Nov 20, 2019

god I hate eslint breaking things

pixelomo on Oct 23, 2019