Automatically Add CSS Vendor Prefixes Using Visual Studio Code

When writing css codes, its boring task to add vendor prefixes for different browsers. There are various free online tools which you can use to automatically generate css codes with all vendor prefixes. But the most easiest way would be a feature provides by your code editor. In this tutorial, we will learn how to automatically add css vendor prefixes automatically using visual studio codes.

Online Tools

Before we start VS code trick, let me first mention two online tools which are very good for generating css codes with vendor prefixes.

1. Autoprefixer CSS online
2. CSS Drive CSS AutoPrefixer online Tool

Auto Prefix CSS codes using VS Code

VScode has few great plugins for this. But I personally love Autoprefixer plugin.

Step 1:

Open your visual studio code editor, and install Autoprefixe plugin.

Step 2:

Open settings of Autoprefixe plugin.
Under Autoprefixer: Options click Edit in settings.json.

Step 3:

Add following codes in section autoprefixer.options.

Step 4

You may need to restart or reload VS code after saving.

Step 5

Open any CSS file, press F1 button and run Autoprefixer. Your CSS codes should now have all vendor prefixes.