在 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 文本括號