stylelint检查less文件报unexpected token，是因为默认按css语法解析，需显式配置customsyntax为postcss-less并安装对应插件，否则遇到@mixin、~"string"等less语法直接报错。
为什么Stylelint检查Less文件会报Unexpected token
不是Stylelint不支持Less，而是它默认按CSS语法解析，遇到@mixin、.btn-base()或~"string"就直接崩。报错行往往不是你写的错，而是解析器根本没认出这是Less文件。
必须显式告诉Stylelint：“这不是CSS，是LESS”。关键在配置里加customSyntax：
- 装插件：
npm install postcss-less --save-dev - 在
.stylelintrc.json里写：{ "extends": "stylelint-config-standard", "customSyntax": "postcss-less" } - 运行命令要带引号：
npx stylelint "**/*.less"，否则shell可能提前展开通配符
VSCode里Less格式化总失效怎么办
VSCode默认不处理.less文件，哪怕开了editor.formatOnSave也白搭。Prettier这类通用格式化器默认不接管Less，装了也等于没装。
最稳的解法是绑定专用格式化器：
- 装扩展：
syler.sass-less（目前对嵌套、&、Mixin支持最准） - 在
settings.json里强制指定："[less]": { "editor.defaultFormatter": "syler.sass-less" } - 如果同时装了Prettier，必须关掉它对
.less的接管，否则会冲突报Cannot find module 'prettier-plugin-less'
注释风格不统一导致审查失败
Less里两种注释行为完全不同：//编译后消失，/* */会进最终CSS——但压缩工具（如css-minimizer-webpack-plugin）又可能把它删掉。审查时看到的和你写的经常对不上。
实操建议盯住三点：
- 业务说明、兼容性提示、模块分隔线用
/* */，但别指望它永远留在生产环境 - 临时调试、禁用某行逻辑用
//，它只活在源码里 - 想让注释带路径和行号？别依赖插件，统一在每个文件开头定义
@comment-prefix: "/* [src/components/Button.less] ";，然后写@{comment-prefix}基础按钮重置 */
自动修复后CSS顺序或嵌套仍错乱
格式化工具能调空格缩进，但改不了Less的语义逻辑。比如.card { .flex-center(); }会被格式化得整齐，但编译后仍是.card .flex-center——这未必是你想要的选择器层级。
真正影响审查通过率的是语义结构，不是空格数：
- 嵌套过深（>3层）时，优先拆成独立class或带语义的Mixin，比如
.card-body()比.card { .body { } }更易读 -
&必须紧贴选择器，&:hover✅，& :hover❌；@media里不能孤立用&，必须先有外层选择器再进媒体查询 - 团队要约定
@import顺序：变量→Mixin→组件，避免因引入顺序导致变量未定义或样式覆盖不可控
审查卡在“风格”上，往往是因为把格式当规范，而忽略了Less真正的约束点：括号、&位置、@import时机、注释语义——这些地方错一个，格式再漂亮也没用。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
