Examples of using autoprefixer in Webstorm

have been using sublime text to write HTML and CSS, these problems have the appropriate plug-ins. Write JS with Webstorm, but switching the editor back and forth is also more troublesome.
Although the Webstorm built-in CSS3 automatic completion function, when the input user-select, Webstorm will automatically fill the full:

-webkit-user-select:none;
-moz-user-select:none;
-ms-user-select:none;
User-select:none;

However, in many cases, this automatic complement is not satisfactory, for example, when I enter Display:flex, Webstorm does not automatically fill the full:

Display:-webkit-box;
Display:-webkit-flex;
Display:-ms-flexbox;
Display:flex;
About Autoprefixer

Autoprefixer is a post processor, unlike a preprocessor like sass and stylus. It is suitable for ordinary CSS, can realize CSS3 code automatic completion. It can also be easily integrated with sass,less and stylus to run before the CSS is compiled or compiled. See more details, https://github.com/postcss/autoprefixer

When Autoprefixer adds a prefix to your CSS, you will not forget to fix the grammatical differences. In this way, CSS is based on the latest in the new-generation code:

A
Background:linear-gradient (to top, black and white);
Display:flex
}
::p Laceholder {
Color: #ccc
}
Compiled into:

A
Background:-webkit-linear-gradient (bottom, black and white);
Background:linear-gradient (to top, black and white);
Display:-webkit-box;
Display:-webkit-flex;
Display:-moz-box;
Display:-ms-flexbox;
Display:flex
}
:-ms-input-placeholder {
Color: #ccc
}
::-moz-placeholder {
Color: #ccc
}
::-webkit-input-placeholder {
Color: #ccc
}
::p Laceholder {
Color: #ccc
}

Autoprefixer also cleans up expired prefixes, so the following code:

A
-webkit-border-radius:5px;
border-radius:5px
}
Compiled into:

A
border-radius:5px
}
Because after autoprefixer processing, CSS will only contain the actual browser prefix.

Specific installation and configuration:

So try to search the Webstorm under the Autoprefixer plugin, no fruit. Then you have manually configured one. First I consider configuring file watchers, but not accustomed to the original sublime text under the autoprefixer are manually triggered, so I configured the external Tools.

1. The first of course is the installation of node.js;

Slightly

2. Installation of Autoprefixer,

See Https://github.com/postcss/autoprefixer:

sudo npm install autoprefixer-g
If you want to add sudo, or if it's a global installation (-G), look at your own environment.

NPM is too slow, I'm using the https://npm.taobao.org/of Taobao's NPM mirror.

3. Install POSTCSS-CLI

Autoprefixer is actually Postcss's plugin, see HTTPS://GITHUB.COM/CODE42DAY/POSTCSS-CLI

sudo npm install postcss-cli-g

4. Configure External Tools

Open Webstorm settings, Preferences-> tools-> External tools; Click the New button, as shown:

Fill in the specific configuration, such as my configuration, as shown in figure:

Program: Fill in your postcss-cli path;
Parameters:-u autoprefixer-o $FileDir $/$FileName $ $FileDir $/$FileName $, you can configure according to your own needs, specifically see https://github.com/ Code42day/postcss-cli
Working Directory: $ProjectFileDir $
After the configuration, you can in CSS, or sass file in the right button, you can see in the right-click menu external Tools–autoprefixer, click to fix, Quack.

5. Set shortcut keys

Right button too troublesome, you can set a shortcut key, open webstorm settings, Preferences-> keymap, search external Tools, configure Autoprefixer can. Don't be in conflict with the original.

Ps:windows can be directly used autoprefixer path, specific configuration

April 13, 2016 update:

Windows cannot find Autoprefixer.cmd,webstrom cannot use execution autoprefixer this problem,
can configure
Program:c:\users\gaojun-pd\appdata\roaming\npm\postcss.cmd
Parameters:-u autoprefixer-o $FileDir $\ $FileName $ $FileDir $\ $FileName $
Working Directory: $ProjectFileDir $