VSCode不识别CSS文件中~波浪号引号语法报错如何解决

使用Visual Studio Code开发纯HTML、JavaScript、CSS项目时，导入同事提供的旧项目CSS文件后，VS Code将文件内部分代码标记为错误，问题代码片段如下：

.some-class .some-sub-class {
   padding-left: calc(~"50px + .75rem");
}

VS Code针对该段代码提示两类错误：

• ) expected：波浪号~下方显示波浪报错线
• at-rule or selector expected：闭合大括号下方显示波浪报错线

经排查确认，两类报错均由波浪号~字符导致：移除该字符后报错消失，但CSS规则中必须保留该波浪号。
额外已知信息：

• 出问题的文件为标准.css格式文件
• 该报错在安装任何扩展前就已存在
• 关闭文件后报错会消失

核心疑问：是否需要通过添加、移除或配置相关扩展来消除该报错？（当前已安装扩展列表见附图）

不需要调整已安装的第三方扩展，这个报错是VS Code内置原生CSS语法校验的规则误判。
你代码里的~"内容"语法是Less预处理器专属的转义写法，作用是绕过Less的编译运算逻辑，把引号内的内容原样输出到最终生成的CSS中，该写法不属于标准CSS语法规范，所以VS Code默认的CSS语言服务会将其识别为语法错误。

根据你的实际需求选以下任意一种方案即可解决：

• 方案1：不需要使用Less编译，仅消除报错
  直接关闭VS Code内置的CSS语法校验：
  1. 打开设置面板，快捷键为Ctrl+,（macOS为Cmd+,）
  2. 搜索配置项css.validate
  3. 取消该配置项的勾选，内置CSS校验会停止运行，这类误报会直接消失
• 方案2：需要保留Less语法的正常识别
  两种操作选其一即可：
  • 把对应文件的后缀从.css改为.less，VS Code会自动切换到Less语言模式识别语法，无需修改代码，报错直接消失
  • 不想修改文件后缀的话，点击VS Code右下角状态栏显示的语言模式标识（默认显示CSS），手动将当前文件的语言模式切换为Less即可。

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