Comments (8)
Just in case anyone stumbles across this, you can easily use the module by including it in the eslint.config
npm i eslint-plugin-tailwindcss
import tailwind from 'eslint-plugin-tailwindcss'
import withNuxt from './.nuxt/eslint.config.mjs'
export default withNuxt(
{
rules: {
// Global
// Vue
'vue/multi-word-component-names': 0,
'vue/max-attributes-per-line': [
'warn',
{
singleline: {
max: 5
}
}
],
'vue/no-v-html': 0
}
},
...tailwind.configs['flat/recommended']
)
from eslint.
This module is designed to be easily extensible, so I don't see why it should include rules for specific libraries.
from eslint.
It could be extended by the tailwind module with the module hook. It's out-of-scope of this module.
from eslint.
hey!
on the tailwind page they offer the module for prettier, but there is also one for eslint -> https://www.npmjs.com/package/eslint-plugin-tailwindcss
from eslint.
Hi @shinGangan !
Yes you're right, it will only be useful for tailwindcss users, as this plugin is only useful for eslint users. I suggest tailwindcss because that's what I use, but if unocss, bootstrap and other ui frameworks offer a class sorter, then they should be added.
from eslint.
Hey @dev-cetus, the class sorter is a prettier plugin, so not handled with eslint.
To get it working once you've integrated prettier with eslint, you simply add the following line to your .prettierrc
file:
"plugins": ["prettier-plugin-tailwindcss"]
from eslint.
Hi @dev-cetus , thank you for the great suggestion. I have one question regarding this issue.
- Q. Will all Nuxt users benefit from adding this plugin?
The addition of this plugin is nice for Tailwind CSS users, but unnecessary for users who don't use Tailwind CSS.
I use Nuxt UI so I can benefit from it, but not all Nuxt users.
It is questionable to add rules as official modules that do not benefit all Nuxt users.
from eslint.
@dev-cetus , thanks for comment!
As a web application developer, I agree with this opinion.
If the rules are used in other UI frameworks, I would be happy if they were introduced, as the settings would be reduced.
I suggest tailwindcss because that's what I use, but if unocss, bootstrap and other ui frameworks offer a class sorter, then they should be added.
However, I think it is better to consider topics related to Nuxt Framework and topics related to UI Framework separately from a maintenance perspective.
I think it's better for each UI Framework user to set their own rules.
from eslint.
Related Issues (20)
- eslint/config-inspector custom host/port when using @nuxt/eslit HOT 1
- Question: Unexpected key "typescript" found HOT 4
- Nuxt Deployment on DigitalOcean // ERROR Cannot find module '/workspace/@nuxt/eslint' HOT 1
- Allow `no-undef` also on plain JavaScript files, not just Typescript HOT 12
- Add `public` folder to the ignore list
- `vue/no-ref-as-operand` does not trigger on `useState`
- Upgrade to typescript-eslint v8 HOT 3
- Not allow multiple root elements in server component
- Request for support on failOnError Overlay when applying nuxt/eslint HOT 3
- Several built-in Nuxt globals are not defined in ESLint config, causing linter to error in JS files HOT 6
- Documentation request: Config recipes for minimal config setup HOT 5
- Using @nuxt/eslint installs eslint version 9.6.0, causing the peer dependency warnings. HOT 4
- Add rule(s) to sort keys in `nuxt.config.ts` to keep everything in order HOT 6
- Parsing error: Unexpected token error HOT 10
- After update from 0.4.0 to 0.5.0: no-unused-vars returns TypeError: Cannot use 'in' operator to search for 'type' in undefined HOT 6
- ConfigError: Config "antfu/imports/rules": Key "plugins": Cannot redefine plugin "import".
- Not compatible with Vue script tag `ts` HOT 1
- Add a formatter option similar to @antfu/eslint-config. HOT 3
- Nuxt 4 Support HOT 3
Recommend Projects
-
React
A declarative, efficient, and flexible JavaScript library for building user interfaces.
-
Vue.js
🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
-
Typescript
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
-
TensorFlow
An Open Source Machine Learning Framework for Everyone
-
Django
The Web framework for perfectionists with deadlines.
-
Laravel
A PHP framework for web artisans
-
D3
Bring data to life with SVG, Canvas and HTML. 📊📈🎉
-
Recommend Topics
-
javascript
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
-
web
Some thing interesting about web. New door for the world.
-
server
A server is a program made to process requests and deliver data to clients.
-
Machine learning
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
-
Visualization
Some thing interesting about visualization, use data art
-
Game
Some thing interesting about game, make everyone happy.
Recommend Org
-
Facebook
We are working to build community through open source technology. NB: members must have two-factor auth.
-
Microsoft
Open source projects and samples from Microsoft.
-
Google
Google ❤️ Open Source for everyone.
-
Alibaba
Alibaba Open Source for everyone
-
D3
Data-Driven Documents codes.
-
Tencent
China tencent open source team.
from eslint.