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

Question

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

Answer 1

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

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

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

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

之后选择所有 CSS，然后点击命令托盘，然后点击AutoPrefixer: Run它将工作。

Answer 2

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

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

1. 打开 VS 代码。
2. 单击 Ctrl+Shift+X（在 Windows 上）或单击最左侧面板上的扩展图标。
3. 将出现一个搜索框。 只需输入css-auto-prefix 。
4. 安装并重新加载，您就可以开始了。

css-自动前缀

Answer 3

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

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

Answer 4

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

官方链接： https : //github.com/postcss/autoprefixer

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

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

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

Visual Studio Code Atom 编辑器 Sublime 文本括号