讲师中心 微信公众号

工具推荐

视频效率加速
updream

一键生成高质量推广成片

立刻MV
立刻MV

低成本歌曲 MV、视频生成

Seko
Seko

AI短剧一键生成成片

Laper
Laper

剧本策划到成片协作

VSCode怎么配置Stylelint检查CSS_VSCode前端样式规范指南【扩展】

阿辰大大_3825

阿辰大大_3825

发布时间:2026-05-26 06:10:02

|

570人浏览过

|

来源于php中文网

原创

Stylelint 在 VSCode 不报错,主因是本地依赖缺失、配置文件未正确设置或语言绑定失败;需安装 stylelint 及对应配置包,创建 .stylelintrc.json,配置 stylelint.validate 支持 scss/less/vue 等语言,并确保右下角语言模式为小写匹配项。

vscode怎么配置stylelint检查css_vscode前端样式规范指南【扩展】

Stylelint 在 VSCode 里不报错,基本可以断定不是插件没装,而是校验链断在了本地依赖、配置文件或语言绑定这三个环节中的某一个。

项目根目录有没有 stylelint 和配置文件

VSCode 的 Stylelint 插件只是“调度器”,它不带规则、不带解析器,真正干活的是你项目里安装的 stylelint 包和配置文件。没有这两样,插件静默退出,连错误提示都不会有。

  • 运行 npm install --save-dev stylelint stylelint-config-standard(SCSS 项目请换用 stylelint-config-standard-scss)
  • 在项目根目录创建 .stylelintrc.json,内容至少含:
    {"extends": "stylelint-config-standard"}
  • 不要用 .stylelintrc.js 或 stylelint.config.js,除非你明确需要 JS 配置逻辑——很多团队因大小写或导出方式写错导致配置不生效

stylelint.validate 没配对语言类型

VSCode 默认只对 .css 文件触发 Stylelint,.scss、.less、.vue 等统统跳过,除非你显式声明并确保语言模式匹配。

  • 在工作区 .vscode/settings.json 中加:
    "stylelint.validate": ["css", "scss", "less", "vue"]
    (注意:全部小写,“SCSS”或“Vue”会失效)
  • 右下角点击当前语言模式(比如显示 “Plain Text” 或 “CSS”),手动选成 scss、less 或 vue —— 这步漏掉,上面的配置就白写了
  • 若用 .module.css 或 .page.scss 这类自定义后缀,必须在 .stylelintrc.json 里加 overrides 声明,否则文件根本不会被读取

自动修复只修一半,别怪插件

stylelint --fix 天然只支持无歧义的格式类规则,比如分号、引号、空格;所有涉及语义判断的(如选择器权重、重复声明、BEM 命名)一律不自动修复。

HISUI 前端框架开发指南(IRIS版)
HISUI 前端框架开发指南(IRIS版)

HISUI 前端框架基础开发指南。HISUI 是基于 easyui 二次开发的 jQuery UI 组件库,专为医疗信息系统设计。当涉及 HISUI 组件开发、jQuery easyui 表格/表单/布局/窗口、医疗系统前端页面编写时使用此 skill。 涵盖 40 个组件的官方文档参考,支持声明式与编程式两种初始化方式,提供 $cm/$m 数据访问方法。

下载

立即学习“前端免费学习笔记(深入)”;

  • VSCode 1.84+ 已弃用 stylelint.autoFixOnSave,改用:
    "editor.codeActionsOnSave": {"source.fixAll.stylelint": true}
  • 如果修复后样式变乱,大概率是和 Prettier 冲突——关掉 editor.formatOnSave,或禁用 css.format.enable,让 Stylelint 独占样式层
  • 报 Cannot find module 'postcss'?补装:npm install --save-dev postcss postcss-scss(SCSS 项目)

Vue / Svelte 单文件组件里的 <style></style> 标签不检查

Stylelint 默认完全忽略 <style></style> 块内容,它只认独立文件。想让它进 <style lang="scss"></style>,得靠处理器告诉它“这里面是 CSS”。

  • Vue 项目:装 stylelint-processor-html,并在 .stylelintrc.json 中加
    "processor": "stylelint-processor-html"
  • Svelte 项目:装 stylelint-processor-svelte,同理指定 processor
  • 别漏掉 stylelint-config-recommended-vue 或对应框架预设——否则 lang="scss" 会被当成普通 CSS 解析,大量误报

最常被忽略的一点:VSCode 的语言模式识别是大小写敏感且可被 files.associations 覆盖的。哪怕配置全对,右下角显示的是 “SCSS (syntax)” 而不是小写的 “scss”,校验照样不会启动。

热门AI工具

更多
花生AI
花生AI Hot

一款AI视频创作工具,主要用于B站推出的AI视频创作工具,适合需要提升相关任务效率的用户。

讯飞绘文

讯飞绘文是一款由科大讯飞推出的一站式 AIGC 内容运营平台。

豆包大模型

豆包大模型是一款由字节跳动推出的企业级大语言模型服务平台。

讯飞智作

讯飞智作是一款AI视频创作工具,AI文本配音工具,数字人课程、营销视频制作。

DeepSeek

DeepSeek是一款面向对话、写作、编程和推理场景的AI大模型工具。

Seko
Seko Hot

一款AI视频创作工具,主要用于商汤科技推出的创编一体的AI短视频创作Agent,适合需要提升相关任务效率的用户。

WorkBuddy

一款AI办公效率工具,主要用于腾讯云推出的AI原生桌面智能体工作台,适合需要提升相关任务效率的用户。

墨刀AI
墨刀AI Hot

一款AI图像与设计工具,主要用于产品经理的专属智能体,适合需要提升相关任务效率的用户。

火山引擎

火山引擎是一款面向企业的云计算与AI服务平台。

相关专题

更多
python是前端还是后端
python是前端还是后端

Python属于前端也属于后端,其灵活性和丰富的生态系统使得开发人员能够在不同的领域中灵活运用。本专题为大家提供python相关的文章、下载、课程内容,供大家免费下载体验。

2943

2023.08.11

前端如何实现即时通讯
前端如何实现即时通讯

实现即时通讯的方法有WebSocket、Long Polling、Server-Sent Events、WebRTC等等。详细介绍:1、WebSocket,它可以在客户端和服务器之间建立持久连接,实现实时的双向通信,前端可以使用 WebSocket API来创建WebSocket连接,并通过发送和接收消息来实现即时通讯;2、Long Polling,是一种模拟实时通信的技术等等。

6423

2023.10.09

前端和后端的区别
前端和后端的区别

前端关注的是用户界面的设计和交互,而后端则注重数据处理和逻辑控制。想了解更多前端后端的相关内容,可以阅读本专题下面的文章。

7290

2024.03.19

php和前端的关联介绍
php和前端的关联介绍

php既可以作为前端语言,也可以作为后端语言。想了解更多php和前端的相关内容,可以阅读本专题下面的文章。

7158

2024.03.22

前端外包工作内容有哪些
前端外包工作内容有哪些

前端外包工作内容包括:1. 网站和应用程序开发;2. 用户界面和交互设计;3. 用户体验优化;4. 设计和视觉开发;5. 跨浏览器兼容性;6. 性能优化;7. 维护和更新;8. 项目管理和沟通。想了解更多前端的相关内容,可以阅读本专题下面的文章。

1023

2024.05.22

css
css

css是层叠样式表,用来表现HTML或XML等文件样式的计算机语言,不仅可以静态地修饰网页,还可以配合各种脚本语言动态地对网页各元素进行格式化。php中文网还为大家带来html的相关下载资源、相关课程以及相关文章等内容,供大家免费下载使用。

5596

2023.06.15

css居中
css居中

css居中:1、通过“margin: 0 auto; text-align: center”实现水平居中;2、通过“display:flex”实现水平居中;3、通过“display:table-cell”和“margin-left”实现居中。本专题为大家提供css居中的相关的文章、下载、课程内容,供大家免费下载体验。

1197

2023.07.27

css如何插入图片
css如何插入图片

cssCSS是层叠样式表(Cascading Style Sheets)的缩写。它是一种用于描述网页或应用程序外观和样式的标记语言。CSS可以控制网页的字体、颜色、布局、大小、背景、边框等方面,使得网页的外观更加美观和易于阅读。php中文网给大家带来了相关的教程以及文章,欢迎大家前来阅读学习。

2078

2023.07.28

Postman身份认证怎么配置
Postman身份认证怎么配置

本专题从实际API接口调试场景出发,讲解Postman身份认证的完整配置流程,包括常见认证协议介绍、授权参数设置、访问令牌填写、OAuth 2.0授权及认证失败排查,帮助用户正确完成接口授权与访问验证。

60

2026.11.06

热门下载

更多
网站特效
/
网站源码
/
网站素材
/
前端模板

精品课程

更多
相关推荐
/
热门推荐
/
最新课程
关于我们 免责申明 举报中心 意见反馈 讲师合作 广告合作 最新更新
php中文网:公益在线php培训,帮助PHP学习者快速成长!
关注服务号
PHP中文网订阅号
每天精选资源文章推送

Copyright 2014-2026 https://www.php.cn/ All Rights Reserved | php.cn