Integrating Stylelint with Vue.js

Question

I'm working on trying to integrate stylelint into my freshly created Vue project.

I thought this would be a simple case of using the Stylelint Webpack Plugin but when I run yarn serve, any errors completely freeze it with no output. If I run yarn build, the build will fail as intended but will only print "There was a stylelint error".

My vue.config.js is as follows:

const stylelintPlugin = require('stylelint-webpack-plugin');

module.exports = {
  configureWebpack: {
    plugins: [
      new stylelintPlugin({ files: ['**/*.(vue|scss)'] }),
    ],
  },
};

Here are my current versions from package.json:

 "@vue/cli-service": "^3.9.0",
 "stylelint": "^10.1.0",
 "stylelint-config-recommended": "^2.2.0",
 "stylelint-scss": "^3.9.2",

Answer 1

While this may come too late, here are working configurations by using stylelint-config-recommended-scss.

It is an extension to the 3rd party stylelint-scss plugin which needs to be installed along with stylelint itself. Also stylelint-webpack-plugin needs to be installed, which seems to have been missing from your setup.

Install dev dependencies:

# First remove an unnecessary one you had (with NPM):
npm uninstall stylelint-config-recommended

# Or with Yarn:
yarn remove stylelint-config-recommended

# Install dev deps with NPM:
npm i -D stylelint stylelint-scss stylelint-config-recommended-scss stylelint-webpack-plugin

# Or with Yarn:
yarn add -D stylelint stylelint-scss stylelint-config-recommended-scss stylelint-webpack-plugin

In your vue.config.js configuration file:

const StyleLintPlugin = require('stylelint-webpack-plugin');

module.exports = {
  configureWebpack: {
    plugins: [
      new StyleLintPlugin({
        files: ['src/**/*.{vue,scss}'],
      }),
    ],
  },
};

Create a file stylelint.config.js in your project's root folder:

module.exports = {
  extends: 'stylelint-config-recommended-scss',
  rules: {
    'selector-pseudo-element-no-unknown': [
      true,
      {
        ignorePseudoElements: ['v-deep']
      }
    ]
  }
};

In package.json you can add this lint:scss command (run by npm run lint:scss). It tries to run autofix on all rules, but please note that not all rules can be autofixed.

In that case the script will output a list of error lines and exit on error. You need to go and fix these by hand, and then re-run the script to see that the errors got fixed:

{
  "scripts": {
    "lint:scss": "stylelint ./src/**/*.{vue,scss} --fix"
  }
}

Hope this helps! Please add a comment if I missed something.