-
Notifications
You must be signed in to change notification settings - Fork 16
Prettier extension on VSCode
Juozas Rastenis edited this page Nov 21, 2018
·
9 revisions
In root directory there is a file called .prettierrc. This file defines certain rules that will format the code whenever any css, js, html files are 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 side). Now paste the following settings:
"editor.formatOnSave": true,
"[javascript]": {
"editor.formatOnSave": true
}
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.
This code helps the communication between developers because everyone uses same style of the code.