在 Visual Studio Code 的 CSS 文件中启用供应商前缀自动完成答案

【问题标题】：Enable vendor prefix autocomplete in CSS files in Visual Studio Code在 Visual Studio Code 的 CSS 文件中启用供应商前缀自动完成
【发布时间】：2018-06-19 12:44:01
【问题描述】：

在 CSS 文件（不是 SASS 或 LESS 文件）中添加未添加供应商前缀的属性时，如何告诉 VSCode 自动添加供应商前缀样式属性？

【问题讨论】：

VS Code有一个Autoprefixer插件：marketplace.visualstudio.com/…

标签： css visual-studio-code vendor-prefix

【解决方案1】：

我一直在使用 VS Code Autoprefixer plugin。它支持 CSS、SCSS 和 SASS。

选择所有 CSS，然后点击命令托盘，然后点击 AutoPrefixer: Run。

如果没有任何反应，请在 settings.json 中为 Autoprefixer 添加以下部分 -

"autoprefixer.options": {
    "browsers": [
        "last 4 versions",
        "ie >= 9",
        "> 5%"
    ]
}

然后选择所有 CSS，然后点击命令托盘，然后点击 AutoPrefixer: Run，它会起作用。

【讨论】：

【解决方案2】：

我一直在使用 css-auto-prefix 插件。对于大多数 CSS3 属性，它工作正常。虽然仍处于测试版，但仍在不断改进。您应该试试这个，它可以节省时间和精力。

执行以下步骤在 vscode 中安装 css-auto-prefix 插件。

打开 VS 代码。
单击 Ctrl+Shift+X（在 Windows 上）或单击最左侧面板上的扩展图标。
将出现一个搜索框。只需输入 css-auto-prefix。
安装并重新加载，一切顺利。

css-auto-prefix

【讨论】：

【解决方案3】：

您可以在您的 vs 代码中安装“Auto prefix”或“Css Auto Prefix”扩展，但我不太确定是否可以自己编写snippest 为前缀也许这样它会更可定制。

但我们也可以随时通过 NPM 安装 "auto prefix" 一个 Node 包管理器。

【讨论】：

【解决方案4】：

在通过 VScode 使用供应商前缀插件/扩展之前，您可能需要阅读此内容。

官方关联： https://github.com/postcss/autoprefixer

文本编辑器和 IDE Autoprefixer 应该在资产构建工具中使用。文本编辑器插件不是一个好的解决方案，因为前缀会降低代码的可读性，并且您需要更改所有前缀属性中的值。

我建议您学习如何使用 Parcel 等构建工具。它们工作得更好，将为您打开一个有用的插件和自动化的全新世界。

如果您无法迁移到构建工具，您可以使用文本编辑器插件：

Visual Studio 代码原子编辑器崇高的文本括号

如果您决定采用@Pinaki 方法，则可以，但无法获得所有必要的更新。

【讨论】：