Stylelint终端检测正常，但VSCode无法实时显示代码错误

问题场景 #

Vue 2项目中使用Stylus预处理器和Stylelint做代码校验，终端执行lint命令能正常检测出错误，但VSCode无法实时可视化展示这些错误。已安装以下依赖包：

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

并安装了VSCode的Stylelint扩展，相关配置文件如下：

原settings.json配置

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

原.stylelintrc.js配置

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'
  }
};

解决步骤 #

1. 修正VSCode配置中的无效项
   原配置里的stylelint.snippet是不存在的配置项，会干扰Stylelint扩展工作；同时JSON数组末尾的 trailing comma也可能导致配置解析异常。修改后的settings.json：

{
  "stylelint.enable": true,
  "css.validate": false,
  "less.validate": false,
  "scss.validate": false,
  "stylelint.validate": [
    "css",
    "stylus",
    "vue"
  ],
  "stylelint.configFile": "${workspaceFolder}/.stylelintrc.js"
}

• 新增less.validate和scss.validate为false，避免内置CSS校验工具和Stylelint冲突
• 显式指定stylelint.configFile路径，确保扩展能正确读取项目根目录的配置文件

2. 确认扩展与Stylelint版本兼容性
   Stylelint扩展v1.x及以上版本支持stylelint@14.x，若当前扩展版本过低，直接在VSCode扩展市场升级到最新稳定版。

3. 强制重启Stylelint服务
   修改配置后，打开VSCode命令面板（Ctrl+Shift+P），执行Stylelint: Restart Stylelint Server，让扩展重新加载配置并启动服务。

4. 检查Vue文件语言模式
   确保Vue文件的语言模式被识别为Vue（点击VSCode右下角的语言模式选择器确认），这样Stylelint扩展才能正确解析.vue文件中的<style lang="stylus">代码块。

5. 排查扩展冲突
   暂时禁用其他CSS/Stylus相关的扩展（如Stylus语法高亮、格式化类扩展），避免与Stylelint扩展产生冲突，之后再逐一排查恢复。

验证方法 #

在Vue文件的Stylus样式块中添加一个分号（对应stylus/semicolon: never规则），若VSCode实时出现红色波浪线提示错误，说明配置生效。

内容的提问来源于stack exchange，提问作者Tony