search

sveltejs / eslint-plugin-svelte3

An ESLint plugin for Svelte v3 components.
MIT License
373 stars 44 forks source link

Stylelint support ? #31

Closed js2me closed 5 years ago

js2me commented 5 years ago

Hello!
This plugin is supporting some validation or linter for styles (.css) ?

Just currently most of time of development I need to fix similar code style image

Conduitry commented 5 years ago

This plugin will present Svelte's compiler errors and warnings - including those about the styles - but other than that, linting styles is well outside the scope of this plugin, and of ESLint in general. For something like Stylelint, I imagine you probably wouldn't even need a special Svelte plugin, and could simply use a plugin that extracts inline styles from HTML files.

maxmilton commented 5 years ago

Stylelint already handles linting *.svelte files. Just include the file extentions you want to lint, e.g. in your package.json#scripts:

"lint:css": "stylelint **/*.{css,html,js,md,mjs,svelte,svg,ts}",

Linting in VS Code (and other code editors too probably) also works if you set the language for *.svelte as html. I assume you've already installed the vscode-stylelint extention. In your project .vscode/settings.json try:

"files.associations": {
    "*.svelte": "html"
  }

If you want support for the :global() selector, there's various ways to go about it. I use the stylelint-config-css-modules plugin. It provides way more than just the global selector but I need CSS modules support anyways.

mvolkmann commented 3 years ago

@maxmilton Could you provided a little more detail on how you configured stylelint-config-css-modules to support use of :global in .svelte files?

maxlath commented 1 year ago

@mvolkmann AFAIU, you don't need stylelint-config-css-modules, just this rule:

'selector-pseudo-class-no-unknown': [ true, { ignorePseudoClasses: 'global' } ]