Vue-loader: A nice way to lint `.vue` files with Stylelint?

[dan-gamble]

I noticed this was attempted: https://github.com/vuejs-templates/webpack/pull/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

1. Create .stylelintrc

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

1. 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]

@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

[oe]

Issue moved to vuejs/011.vuejs.org #6 via ZenHub

[equinusocio]

Using the @yisibl solution i can't make it works using postcss.

[gucong3000]

@equinusocio The latest version of stylelint can directly support *.vue files, but you need to delete processors in the configuration file.
If you need to use other postcss tool, not just stylelint, you can use this way:

npm i --save postcss postcss-syntax postcss-html

postcss(plugins).process(source, {
  syntax: require('postcss-syntax')
}).then((result) => {
    // An alias for the result.css property. Use it with syntaxes that generate non-CSS output.
    result.content
});

[equinusocio]

@gucong3000 Thank you man. This did the trick. There is a documentation somewhere about that?

[gucong3000]

There is a documentation somewhere about that?

Not at the moment.

[hiendv]

@gucong3000 Hi, I cannot get stylelint autofix to work with .vue files? Any idea why?

[gucong3000]

@hiendv please update stylelint >= v9 then try this command:

stylelint --fix `src/**/*.vue`

[gucong3000]

There is a documentation somewhere about that?

https://vue-loader.vuejs.org/guide/linting.html#stylelint

[equinusocio]

@gucong3000 This solution doesn't works anymore
https://github.com/vuejs/vue-loader/issues/303#issuecomment-412399156

postcss.config.js

module.exports = {
  syntax: require("postcss-syntax"),
  plugins: {
    "postcss-preset-env": {
      stage: 0,
      autoprefixer: {
        grid: true
      }
    }
  }
};

Defining the syntax package break all the plugins. Removing it stylelint will throw errors parsing the html template. I'm using latest versions of all.

[gucong3000]

@equinusocio
Maybe you can upload a zip package that contains these errors so I could help you debug them.

[mudin]

After trying many things, I got stylelint autofix to work with .vue files in vscode using SaveOnRun extension.
added below config in the settting.json:

"emeraldwalk.runonsave": {
    "commands": [
      {
        "match": ".vue",
        "cmd": "stylelint --fix ${file}"
      }
    ]
  },

Better solution would be appreciated!

[humoyun]

@mudin good job, saved the day