Stylelint works, but does not underline or show errors in VSCode

Question

I cannot get error syntax highlighting to show in VSCode. I've installed the following packages:

    "stylelint": "^14.0.0",
    "stylelint-config-standard": "^30.0.1",
    "stylelint-config-standard-vue": "^1.0.0",
    "stylelint-stylus": "^0.18.0",

And if I target a specific file to be linted in the terminal, it works correctly. But I cannot get VSCode to visually show the linter errors in real time. I'm using Vue 2, Stylus, and StyleLint.

My settings.json file has this information:

{
  "stylelint.enable": true,
  "css.validate": false,
  "stylelint.snippet": [
    "css",
    "scss",
    "stylus",
  ],
  "stylelint.validate": [
    "css",
    "stylus",
    "vue",
  ],
  "stylelint.config": null,
}

For my .stylelintrc.js file I have the following (I turned on the semicolons to never to make sure they would trip and throw errors):

module.exports = {
  plugins: [
    "stylelint-stylus",
  ],
  extends: ['stylelint-config-standard', 'stylelint-stylus/standard', 'stylelint-config-standard-vue'],
  rules: {
    // Standard
    'length-zero-no-unit': null,
    'no-descending-specificity': null,
    'selector-list-comma-newline-after': 'never-multi-line',
    'selector-pseudo-element-colon-notation': 'single',
    'comment-empty-line-before': null,
    'selector-class-pattern': null,
    'selector-pseudo-element-no-unknown': [
      true,
      {
        ignorePseudoElements: ['/^v-deep/', 'pseudo-element']
      }
    ],
    'property-no-vendor-prefix': [
      true,
      {
        ignoreProperties: ['appearance']
      }
    ],
    'color-function-notation': 'legacy',
    'alpha-value-notation': 'number',
    'shorthand-property-no-redundant-values': null,

    // Stylus
    'stylus/selector-type-no-unknown': null,
    'stylus/single-line-comment': 'never',
    'stylus/declaration-colon': 'always',
    'stylus/media-feature-colon': 'always',
    'stylus/semicolon': 'never',
    'stylus/pythonic': 'never',
    'stylus/selector-list-comma': 'always',
    'stylus/selector-list-comma-newline-after': 'never-multi-line'
  }
};

I have installed the Stylelint extension for VS Code.

Answer 1

So I reset my branch and after some back and forth I got it working. My steps to fix it were:

• Update stylelint and stylelint-config-standard packages (not likely this is the reason it's working now)
• Changed settings.json to "stylelint.validate": [ "css", "stylus", "vue" ], as the CSS was in a vue file using stylus. I was hung up on thinking it was validating stylus css syntax when it was a designation for the filetypes being checked (in my case .vue). This also did require a restart of VSCode to show the error highlighting.

Hopefully this saves someone some time!