Prettier extension on VSCode

Installation

Install "Prettier - Code formatter" on VSCode. At this point, you are almost done! In Novicell Frontend Setup, in root folder there is a .vscode folder which has the settings.json file. This settings file holds specific rules that tell Prettier how to style the code.

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.