A nice way to lint .vue files with Stylelint?

[oe]

@dan-gamble commented on Fri Aug 05 2016

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 commented on Mon Sep 05 2016

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 commented on Mon Sep 05 2016

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

---

@yisibl commented on Wed Nov 09 2016

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 commented on Mon Nov 14 2016

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

---

@scottsandersdev commented on Tue Dec 06 2016

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.

---

@bkzl commented on Sun Feb 12 2017

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).

---

@wenkanglin commented on Tue Feb 14 2017

@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.

---

@bkzl commented on Wed Feb 15 2017

@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 commented on Fri Feb 24 2017

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

---

@jing2si commented on Thu May 25 2017

"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 commented on Fri Jul 28 2017

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

#839
stylelint/stylelint#2596

[gucong3000]

Related:
vuejs-templates/webpack#842