Prettier extension on VSCode

How to

In root directory there is a file called .prettierrc. This file defines certain rules that will format the code whenever any css, js, html is file saved. In order to make this work we have to download "Prettier" extension from VScode extensions tab or from this link.

Next, go to File -> Preferences -> Settings. Enable the settings view in json format (there is ellipsis (...) button on the right). Now paste the following settings:

"editor.formatOnSave": true,
"[javascript]": {
    "editor.formatOnSave": true
}

Result

This will make editor reformat the file according to Prettier options. For example this css:

.selector, .selector-secondary, .selector[type=text] {
    padding:    15px;
    margin:0px   0px 15px;
    background-color:rgba(   0,0,0,0.5  );
    box-shadow:0px 1px 2px #CCC,inset 0     1px 0 #FFFFFF
}

Will automatically turn into this:

.selector,
.selector-secondary,
.selector[type=text] {
    padding: 15px;
    margin: 0px 0px 15px;
    background-color: rgba(0, 0, 0, 0.5);
    box-shadow: 0px 1px 2px #CCC, inset 0 1px 0 #FFFFFF
}

Whenever file is saved.

Why?

This code helps the communication between developers because everyone uses same style of the code.