A nice way to lint `.vue` files with Stylelint?

[dan-gamble]

I noticed this was attempted: vuejs-templates/webpack#154 and closed (For good reason)

But i wondered if anyone has a setup for this currently?

[xmoki]

I think is possible to do it with htmlhint, but currently only supports jshint and csslint, maybe if someone can make a htmlhint rule for stylelint.

[JounQin]

Actually we could use <style src="/path/of/style/file"/> then just lint the style file as usual.

[yisibl]

1. Touch .stylelintrc

   {
     "processors": ["stylelint-processor-html"],
     "extends": "stylelint-config-standard"
   }

2. Install

  npm i stylelint -D
  npm i stylelint-processor-html -D
  npm i stylelint-config-standard -D

3. Add lint:css to package.json

   "scripts": {
     "lint:css": "stylelint '**/*.vue' --syntax scss"
   },

4. npm run lint:css 👻

[dan-gamble]

@yisibl that works for me, swear i tried this before!

[scottsandersdev]

I'm wondering if there's a way to get stylelint to report this to sublimelinter, although it works great from the command line, it doesn't work actively while typing in sublime. Have you or anyone else had any luck with that? Also, @yisibl thanks for posting this, helped me get started.

[bartkozal]

For the record, this is working configuration for webpack:

1. Install:

npm i --save-dev stylelint stylelint-processor-html stylelint-config-standard stylelint-webpack-plugin

2. Create .stylelintrc

{
 "processors": ["stylelint-processor-html"],
 "extends": "stylelint-config-standard"
}

3. Load stylelint-webpack-plugin (in build/webpack.dev.conf.js for Vue webpack template)

//...
var StylelintPlugin = require('stylelint-webpack-plugin')

{
  //...
  plugins: [
    //...
    new StylelintPlugin({
      files: ['**/*.vue']
    })
  ]
}

I published an article which includes both solutions and explains two additional things (configuration rules and errors when starting the dev server).

[KangdaOOLin]

@bkzl i follow your config, use the stylelint-webpack-plugin, it can work, but the line number of error reporter is incorrect for .vue file.

[bartkozal]

@wenkanglin I immediately fix these errors while I code so I didn't even notice that. There is a corresponding issue: ccbikai/stylelint-processor-html/issues/1

[repsac-by]

try @mapbox/stylelint-processor-arbitrary-tags instead stylelint-processor-html

[jing2si]

"scripts": {
"lint:css": "stylelint '**/*.vue' --syntax scss"
},

Can not add single quotation marks in windows. Otherwise it will report the following error.

Error: '**/*.vue' does not match any files
at globby.then.filePaths

The following setting worked well in windows 10

"scripts": {
  "lint:css": "stylelint **/*.vue"
},

[gucong3000]

stylelint-webpack-plugin or stylelint-processor-html not support automatically fixes.
Related:

#839
stylelint/stylelint#2596