Vue support?

[owm111]

I was wondering if there is a way to (properly) lint Vue single-file components using Stylint.

Whenever I try to send .vue file through Stylint, it lints the file, but not in the way intended: ...linting the entire file, not just the <style lang="stylus">...</style> tag (where the stylus is held).

Is there a way to enable or install this feature (similar to ESLint's eslint-plugin-html, which allows similar linting of JS in .html files, and by extension .vue files), or is it not a feature of Stylint?

---

• OS: Debian 9
• Sylint version: 1.4.1

[dre1080]

Any updates on this?

[thanasisliako]

After a lot of failure and reading thoroughly vue-loader's docs I found that you can use stylint-loader as a preloader in the vue-loader configuration. So given that the styles in the vue components are inside <style lang="stylus"> add the following in vue-loader's options object:

  preLoaders: {
    stylus: 'stylint-loader'
  }

[SimenB]

PR most certainly welcome for docs illustrating usage with different bundlers and frameworks!

[iliyaZelenko]

I used webpack 4 with stylint 1.5.9 and tried to add this rule in rules:

        {
          enforce: 'pre',
          test: /\.styl(us)?$/,
          loader: 'stylint',
          exclude: /(node_modules)/
        }

Perhaps stylint is not compatible with webpack 4.

[Badalik]

Did not solve the problem?

[Badalik]

I wrote a webpack plugin that supports .styl and .vue files

[owm111]

Honestly, it has been so long since I've opened this issue, I can't remember what my use case was. However, this issue being as old as it is, I am tempted to just make a PR, probably editing the parser, using the same method as @Badalik (it appears to work from reading the code), to finally put this issue to bed.

Since I have time today, I'll give it a whirl.

[owm111]

Well, I tried, unsuccessfully. Even if it did work, I wouldn't know how to write unit tests for it.