解决less注释在stylelint校验中报错

问题描述

如图，当使用//单行注释less时，报css语法错误。

问题分析

当前使用的stylelintrc.js 文件如下

// @see: https://stylelint.io

module.exports = {
	extends: [
		'stylelint-config-standard', // 配置stylelint拓展插件
		'stylelint-config-prettier', // 配置stylelint和prettier兼容
		'stylelint-config-recess-order', // 配置stylelint css属性书写顺序插件,
	],
	plugins: ["stylelint-less"], // 配置stylelint less拓展插件
	rules: {
		indentation: null, // 指定缩进空格
		'no-descending-specificity': null, // 禁止在具有较高优先级的选择器后出现被其覆盖的较低优先级的选择器
		'function-url-quotes': 'always', // 要求或禁止 URL 的引号 "always(必须加上引号)"|"never(没有引号)"
		'string-quotes': 'double', // 指定字符串使用单引号或双引号
		'unit-case': null, // 指定单位的大小写 "lower(全小写)"|"upper(全大写)"
		'color-hex-case': 'lower', // 指定 16 进制颜色的大小写 "lower(全小写)"|"upper(全大写)"
		'color-hex-length': 'long', // 指定 16 进制颜色的简写或扩写 "short(16进制简写)"|"long(16进制扩写)"
		'rule-empty-line-before': 'never', // 要求或禁止在规则之前的空行 "always(规则之前必须始终有一个空行)"|"never(规则前绝不能有空行)"|"always-multi-line(多行规则之前必须始终有一个空行)"|"never-multi-line(多行规则之前绝不能有空行。)"
		'font-family-no-missing-generic-family-keyword': null, // 禁止在字体族名称列表中缺少通用字体族关键字
		'block-opening-brace-space-before': 'always', // 要求在块的开大括号之前必须有一个空格或不能有空白符 "always(大括号前必须始终有一个空格)"|"never(左大括号之前绝不能有空格)"|"always-single-line(在单行块中的左大括号之前必须始终有一个空格)"|"never-single-line(在单行块中的左大括号之前绝不能有空格)"|"always-multi-line(在多行块中，左大括号之前必须始终有一个空格)"|"never-multi-line(多行块中的左大括号之前绝不能有空格)"
		'property-no-unknown': null, // 禁止未知的属性(true 为不允许)
		'no-empty-source': null, // 禁止空源码
		'declaration-block-trailing-semicolon': null, // 要求或不允许在声明块中使用尾随分号 string："always(必须始终有一个尾随分号)"|"never(不得有尾随分号)"
		'selector-class-pattern': null, // 强制选择器类名的格式
		'value-no-vendor-prefix': null, // 关闭 vendor-prefix(为了解决多行省略 -webkit-box)
		'at-rule-no-unknown': null,
		'selector-pseudo-class-no-unknown': [
			true,
			{
				ignorePseudoClasses: ['global', 'v-deep', 'deep']
			}
		]
	}
};

说明此处stylelint想让我使用/* */的多行注释，但是我的vscode的默认快捷键注释出来的就是//注释。。。

在stylelint文档中写到 no-invalid-double-slash-comments Disallow double-slash comments (//...) which are not supported by CSS and could lead to unexpected results.

禁用 CSS 不支持的而且可能会导致意外结果的双斜线注释 (//...)。

a { // color: pink; }
/** ↑
 *  This comment */

If you are using a preprocessor that allows // single-line comments (e.g. Sass, Less, Stylus), this rule will not complain about those. They are compiled into standard CSS comments by your preprocessor, so stylelint will consider them valid. This rule only complains about the lesser-known method of using // to "comment out" a single line of code in regular CSS. (If you didn't know this was possible, have a look at "Single Line Comments (//) in CSS").

如果你使用了一个处理器来允许 // 单行注释 (如 Sass，Less，Stylus)，该规则将不会发出警告。它们被你的处理器编译为标准的 CSS 注释，因此 stylelint 会认为它们是有效的。该规则只会对在常规 CSS 中使用 // 注释掉单行代码的不为人知的方法发出警告。(如果你不知道这中情况，看一下"Single Line Comments (//) in CSS")。

解决方法

踩坑一

看到上面使用处理器来如less来允许//单行注释。说明less是支持的。
那么我就想当然的认为只要禁用这个规则就可以了。
不过，实际上是无效的。

真正的解决方法

使用插件postcss-less。
在postcss-less文档中有一条。

支持解析 CSS 中的单行注释。

:root {
    // Main theme color
    --color: red;
}

AST 将包含一个Comment具有inline: true属性的节点。

具体步骤

pnpm add postcss-less -D

在stylelintrc.js文件中添加

// @see: https://stylelint.io

module.exports = {
	extends: [
		'stylelint-config-standard', // 配置stylelint拓展插件
		'stylelint-config-prettier', // 配置stylelint和prettier兼容
		'stylelint-config-recess-order', // 配置stylelint css属性书写顺序插件,
	],
	plugins: ["stylelint-less"], // 配置stylelint less拓展插件
        customSyntax: "postcss-less", // 在这里添加这一句

这样就允许less文件中存在//单行注释了。

后续说明

less支持//单行注释和/* */多行注释，其中单行注释不会被编译到css文件中，多行注释会编译到css文件中。
那么直接使用多行注释实际上就没有问题了，但是我的vscode的默认快捷键注释出来的就是//注释。怎么调都没办法解决，最终只能使用这种办法了。Google了很久一直没有相关的解决办法，故记录下来。