如何禁用“Internet Explorer < 11 不支持'flex'。添加'-ms-flex' 以支持 Internet Explorer 10+。”在 VS 代码中？答案

【问题标题】：How to disable "'flex' is not supported by Internet Explorer < 11. Add '-ms-flex' to support Internet Explorer 10+." in VS code?如何禁用“Internet Explorer < 11 不支持'flex'。添加'-ms-flex' 以支持 Internet Explorer 10+。”在 VS 代码中？
【发布时间】：2022-01-12 03:51:39
【问题描述】：

我的 react 项目有几个“flex”兼容性错误。如何消除 VS 代码中的这些错误？我已经在我的项目中使用了 postcss。

'flex' is not supported by Internet Explorer < 11. Add '-ms-flex' to support Internet Explorer 10+.
'flex-direction' is not supported by Internet Explorer < 11. Add '-ms-flex-direction' to support Internet Explorer 10+.
'transform' is not supported by Internet Explorer < 10. Add '-ms-transform' to support Internet Explorer 9+.

【问题讨论】：

我认为它在错误消息中正确说明了如何修复它。您是否正在寻找其他类型的修复方法？
感谢 Collind，我在项目中使用了 postcss，我的意思是如何避免这些警告。

标签： css visual-studio-code

【解决方案1】：

Microsoft Edge 工具扩展使用 webHint 扩展 - 这显然会生成这些错误消息。

按照installing edge generates warning messages from Webhints and offers no obvious recourse other than uninstalling it all 中的建议，您可以尝试这些方法来禁用这些警告

禁用设置Vscode-edge-devtools: Webhint，但这将禁用所有错误消息，而不仅仅是关于IE11的错误消息；或

创建hintrc文件后（https://webhint.io/docs/user-guide/configuring-webhint/summary/#create-a-hintrc-file）：

您可以使用此 .hintrc 关闭所有 CSS 兼容警告（仍然相当笨拙）：

{
    "extends": ["development"],
    "hints": {
        "compat-api/css": "off"
    }
}

或者你可以调整你的目标浏览器以排除你不关心的浏览器（也许是 Internet Explorer？）.hintrc：

{
    "extends": ["development"],
    "browserslist": ["defaults", "not IE 11"]
}

或者您可以只忽略 backdrop-filter CSS 属性，仍然可以通过此 .hintrc 获得其他人的反馈：

{
    "extends": ["development"],
    "hints": {
        "compat-api/css": ["default", {
            "ignore": ["backdrop-filter"]
        }]
    }
}

来自https://github.com/microsoft/vscode-edge-devtools/issues/596#issuecomment-961496154

或者您应该能够通过设置环境变量来禁用这些错误消息，请参阅Setting properties using environment variables

可能是这个环境变量，但我没试过：

"webhint_browserlist_" = ["defaults", "not IE 11"]

【讨论】：