So, you're not extending the ESlint configuration with @nuxtjs as in here? That one is an old configuration that I used for a Nuxt2 project but I feel like a Vue linter is still needed.
A Vue3 or a Nuxt3 one would be even better to follow the latest rules with Composition API, accomodate Vue3 changes etc but I didn't took the time to find an exact configuration there (this one from Antfu is probably the closest best AFAIK).
Still, I feel like getting errors related to Prettier and mainly Vue is quite important.
I myself quite also enjoy having it on autosave as explained here with an Errorlens so that I can have various errors/warnings just next to my codebase while writing. Quite nazi for sure 😹 but it's great to not shift windows/context.
I have several questions for you regarding the installation of the prettier + eslint:
Why are you using two packages that perform basically the same thing? One of them is
eslint-config-prettier - this plugin is for turning off all rules that are unnecessary or might conflict with Prettier(on docs) and another is eslint-plugin-prettier. eslint-plugin-prettier have disadvantages like leaving linter errors (docs).
Why are you don't using the official repository of nuxt?
There was a problem loading formatter: /Users/.../git/.../node_modules/eslint/lib/cli-engine/formatters/stylish
Error: require() of ES Module /Users/.../git/.../node_modules/strip-ansi/index.js from /Users/.../git/.../node_modules/eslint/lib/cli-engine/formatters/stylish.js not supported.
Instead change the require of index.js in /Users/.../git/.../node_modules/eslint/lib/cli-engine/formatters/stylish.js to a dynamic import() which is available in all CommonJS modules.
Thanks for this beautiful article. I had a problem and solved it after removing typescript version 5. I think this can help to other developers too.
As you know, TS5 was released last week, and it shows “TS1109 expression expected” error for the imports statements in the VUE files. Actually, you don't need to add typescript, as it is already existing in the current Nuxt project. We can stay with the TS4 for now.
Hi! How do we get eslint highlighting in vscode? isn't it supposed to work by default if you have the extension installed? Might it be because of the new flat format?
It's such a pain every new project to configure eslint and prettier 🤦♀️
Thank you!
Hello! Check your VSCode settings to make sure that Editor: Format On Save is enabled and that Editor: Default Formatter is set correctly (e.g., I use https://github.com/prettier/prettier-vscode)
Thanks for the article Lewis. 🙏🏻
So, you're not extending the ESlint configuration with
@nuxtjsas in here? That one is an old configuration that I used for a Nuxt2 project but I feel like a Vue linter is still needed.A Vue3 or a Nuxt3 one would be even better to follow the latest rules with Composition API, accomodate Vue3 changes etc but I didn't took the time to find an exact configuration there (this one from Antfu is probably the closest best AFAIK).
Still, I feel like getting errors related to Prettier and mainly Vue is quite important.
I myself quite also enjoy having it on autosave as explained here with an Errorlens so that I can have various errors/warnings just next to my codebase while writing. Quite nazi for sure 😹 but it's great to not shift windows/context.
Hey! 😸 Thanks for your comment.
The example extends
@nuxtjs/eslint-config-typescript, which is recommended by the docs (github.com/nuxt/eslint-config#type...) for TypeScript support.Just to prove it, here's Vue being annoyed for not using the
v-bind:shorthand.You can extend
@nuxtjsif you'd like to, which ESLint will assume to be the/eslint-configprefix.Oh damn, it's baked in? I didn't expect that one. Good to know. 👍🏻
Thanks for this Lewis 🙏🏾🙌🏾
However, the article didn't mention this but you need to install
@nuxtjs/eslint-config-typescriptWell spotted! I'll drop it in. Thank you for the snippet.
Hi, Lewis.
I have several questions for you regarding the installation of the prettier + eslint:
eslint-config-prettier- this plugin is for turning off all rules that are unnecessary or might conflict with Prettier(on docs) and another iseslint-plugin-prettier.eslint-plugin-prettierhave disadvantages like leaving linter errors (docs).Hey!
eslint-plugin-prettierrecommends to useeslint-config-prettierto disable all formatting-related ESLint rules: github.com/prettier/eslint-plugin-...@nuxtjs/eslint-config-typescriptis the package name referenced in the officialnuxt/eslint-configrepository: github.com/nuxt/eslint-config#type...I get the following error:
Hey Lewis! could you add runtime linting settings to your wonderful article please?
Thanks for this beautiful article. I had a problem and solved it after removing typescript version 5. I think this can help to other developers too.
As you know, TS5 was released last week, and it shows “TS1109 expression expected” error for the imports statements in the VUE files. Actually, you don't need to add typescript, as it is already existing in the current Nuxt project. We can stay with the TS4 for now.
Happy coding
What a great tutorial! 🤩
However, I have a problem..
I followed it to the letter and the fix commands work well, but the errors are not highlighted in my IDE.
I use Webstorm...
And by the way, the eslint rules seem to be for Vue 2 and not Vue 3.
Hi! How do we get eslint highlighting in vscode? isn't it supposed to work by default if you have the extension installed? Might it be because of the new flat format?
It's such a pain every new project to configure eslint and prettier 🤦♀️
Thank you!
Better way to use ESLint with Nuxt 3 is use to @nuxt/eslint.
Pro tip: use with @antfu/eslint-config
Thank you for the post, very helpful tutorial. This is truly a time saver. 🙏🏻
how can we use vscode setting to format on save with linting?
Hello! Check your VSCode settings to make sure that
Editor: Format On Saveis enabled and thatEditor: Default Formatteris set correctly (e.g., I usehttps://github.com/prettier/prettier-vscode)Thanks Lewis, Provide an alternative flow for npm