Add a formatter option similar to @antfu/eslint-config.

gsh1024 commented 3 months ago

Describe the feature

Both @nuxt/eslint and @antfu/eslint-config do not format CSS by default. However, with @antfu/eslint-config, you can format CSS by installing the eslint-plugin-format plugin and then configuring the formatters option:

https://github.com/antfu/eslint-config?tab=readme-ov-file#formatters

@nuxt/eslint does not have this option. I went through the official documentation and only found a stylistic option, but this option only controls the formatting of JS and Vue files; it does not format CSS files:

https://eslint.nuxt.com/packages/module#eslint-stylistic

I had to configure Prettier myself to format CSS files. Wouldn't it be more convenient for developers if there was a formatters option similar to the one in @antfu/eslint-config?

Below is my test code and configuration. I intentionally messed up the formatting to test the formatting functionality of @nuxt/eslint:

<!-- The template will be automatically formatted -->
<template>
  <div>
<NuxtRouteAnnouncer />
    <NuxtWelcome />
  </div>
</template>

<!-- The script will be automatically formatted  -->
<script lang="ts" setup>
const str= "Hello, World!"
console.log(str)
</script>

<!-- The styles will not be automatically formatted -->
<style>body{color:red;
}
</style>

Additional information

[ ] Would you be willing to help implement this feature?
[ ] Could this feature be implemented as a module?

Final checks

[X] Read the contribution guide.
[X] Check existing discussions and issues.

antfu commented 3 months ago

I am up to that, if more users agree on that (I personally would always use @antfu/eslint-config together, so I don't really need it myself, but I do understand it might be useful to have without bind to my personal config).

Also, PR welcome if anyone wants to work on that. Thanks!

shinGangan commented 3 months ago

Hello @gsh1024 , @antfu , I basically agree with this issue.

However, if you check the style in the Vue file, we believe that eslint-plugin-vue-scoped-css is a suitable role. (This plugin was created by ota-meshi, the author of eslint-plguin-vue)

Therefore, I think the content of the discussion will change depending on whether the target is .css or style in the vue file.

gsh1024 commented 2 months ago

I ended up solving the problem using @antfu/eslint-config. 😭

tobychidi commented 7 hours ago

@gsh1024 How did you do it? The best way to use the Eslint module with @antfu/eslint-config

Let me give using eslint-plugin-format directly a trial

Actually, I found the docs 🎉 https://eslint.nuxt.com/packages/module#custom-config-presets

nuxt / eslint