VS Code误将旧版Flex Box语法标记为语法错误，如何解决？

完全不用等版本更新，你可以自己在编辑器里配置解决这个问题，下面给你两种实用的方法：

方法一：通过VS Code自带的CSS配置识别旧属性 #

VS Code的CSS语言服务允许你自定义合法属性列表，让它把这些旧Flex属性认作有效：

1. 在项目根目录创建一个名为css-custom-data.json的文件，内容示例如下：

{
  "properties": [
    {
      "name": "-webkit-box",
      "description": "旧版WebKit内核Flex容器属性"
    },
    {
      "name": "-webkit-box-orient",
      "description": "旧版WebKit内核Flex方向属性"
    },
    {
      "name": "-webkit-box-flex",
      "description": "旧版WebKit内核Flex子项占比属性"
    },
    {
      "name": "-moz-box",
      "description": "旧版Firefox内核Flex容器属性"
    }
    // 把你用到的其他旧Flex属性都加进来
  ]
}

2. 打开VS Code设置（快捷键Ctrl+,或Cmd+,），搜索css.customData，点击编辑 in settings.json，添加配置：

"css.customData": ["./css-custom-data.json"]

保存后，编辑器就会自动识别这些旧属性，不再标红报错。

如果觉得自定义数据文件太麻烦，也可以直接把css.lint.unknownProperties设置为ignore——不过这会忽略所有未知属性的报错，可能会漏掉真正的拼写错误，所以更推荐上面的精准配置方式。

方法二：用Stylelint自定义检查规则 #

如果你项目里已经在用Stylelint做CSS代码检查，那可以直接在规则里放行这些旧属性：

1. 在项目的.stylelintrc（或.stylelintrc.json）文件中，修改property-no-unknown规则：

{
  "rules": {
    "property-no-unknown": [true, {
      "ignoreProperties": [
        "-webkit-box",
        "-webkit-box-orient",
        "-webkit-box-flex",
        "-moz-box"
        // 按需添加其他旧属性
      ]
    }]
  }
}

2. 确保VS Code安装了Stylelint插件，并且关闭了自带的CSS lint（可以在设置里把css.validate设为false），让Stylelint接管代码检查。

要是只是个别地方需要忽略，还可以在属性上方加单行注释：

/* stylelint-disable-next-line property-no-unknown */
-webkit-box-orient: vertical;

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