diff --git a/ui/ui-frontend-common/.prettierignore b/ui/ui-frontend-common/.prettierignore
new file mode 100644
index 0000000000000000000000000000000000000000..bb7f524244062482d25757b5f7d97cc540b9ccca
--- /dev/null
+++ b/ui/ui-frontend-common/.prettierignore
@@ -0,0 +1,18 @@
+# Ignore artifacts:
+.vscode
+node_modules
+target
+
+# Ignore everything (to avoid formatting angular conf files...):
+/*
+
+# Except files in projects:
+!/projects
+
+# Ignore all given extensions files:
+*.css
+*.js
+*.json
+
+# Except json files in any assets folder
+!**/assets/**/*.json
\ No newline at end of file
diff --git a/ui/ui-frontend-common/.prettierrc b/ui/ui-frontend-common/.prettierrc
new file mode 100644
index 0000000000000000000000000000000000000000..946c56e58517fa2974a16b8dac2bee5ac07761ce
--- /dev/null
+++ b/ui/ui-frontend-common/.prettierrc
@@ -0,0 +1,9 @@
+{
+  "printWidth": 140,
+  "singleQuote": true,
+  "useTabs": false,
+  "tabWidth": 2,
+  "semi": true,
+  "bracketSpacing": true,
+  "arrowParens": "always"
+}
diff --git a/ui/ui-frontend/.prettierignore b/ui/ui-frontend/.prettierignore
new file mode 100644
index 0000000000000000000000000000000000000000..bb7f524244062482d25757b5f7d97cc540b9ccca
--- /dev/null
+++ b/ui/ui-frontend/.prettierignore
@@ -0,0 +1,18 @@
+# Ignore artifacts:
+.vscode
+node_modules
+target
+
+# Ignore everything (to avoid formatting angular conf files...):
+/*
+
+# Except files in projects:
+!/projects
+
+# Ignore all given extensions files:
+*.css
+*.js
+*.json
+
+# Except json files in any assets folder
+!**/assets/**/*.json
\ No newline at end of file
diff --git a/ui/ui-frontend/.prettierrc b/ui/ui-frontend/.prettierrc
new file mode 100644
index 0000000000000000000000000000000000000000..946c56e58517fa2974a16b8dac2bee5ac07761ce
--- /dev/null
+++ b/ui/ui-frontend/.prettierrc
@@ -0,0 +1,9 @@
+{
+  "printWidth": 140,
+  "singleQuote": true,
+  "useTabs": false,
+  "tabWidth": 2,
+  "semi": true,
+  "bracketSpacing": true,
+  "arrowParens": "always"
+}
diff --git a/ui/ui-frontend/README.md b/ui/ui-frontend/README.md
index e8e9c35e5e3ee71d03cb5c599d3899a4d2fa490d..dcd3eb1f26b4d3340966877e3777e8d27a55d928 100644
--- a/ui/ui-frontend/README.md
+++ b/ui/ui-frontend/README.md
@@ -52,3 +52,38 @@ You also need to update the `vitamui-icons.css` file. Open the `style.css` from
 > Attention: Do not override the first part of the file (from line `1` to line `25`)
 
 Please add each new icon to the icon category in the starter-kit project.
+
+## Format front end code
+
+# Recommended Extensions for Visual studio code :
+
+- "ms-vscode.vscode-typescript-tslint-plugin" : for more information: // TsLinst, https://marketplace.visualstudio.com/items?itemName=ms-vscode.
+- "esbenp.prettier-vscode" : for more information: // Code formater Prettier, https://marketplace.visualstudio.com/items?itemName=esbenp.prettier-vscode
+- "sibiraj-s.vscode-scss-formatter" : for more information: // SCSS Formatter, https://marketplace.visualstudio.com/items?itemName=sibiraj-s.vscode-scss-formatter
+- "msjsdiag.debugger-for-chrome": for more information: // Debbuger for Chrome, https://marketplace.visualstudio.com/items?itemName=msjsdiag.debugger-for-chrome
+- "firefox-devtools.vscode-firefox-debug" : for more information: // Debbuger for Firefox, https://marketplace.visualstudio.com/items?itemName=firefox-devtools.vscode-firefox-debug
+
+# Visual studio code setting :
+
+Bellow and example to manage code format for Visual studio code using settings.json file :
+
+{
+"editor.formatOnSave": true,
+"[typescript]": {
+"editor.codeActionsOnSave": {
+"source.fixAll.tslint": true,
+"source.organizeImports": true
+},
+"editor.defaultFormatter": "esbenp.prettier-vscode",
+},
+"[html]": {
+"editor.defaultFormatter": "esbenp.prettier-vscode",
+},
+"[scss]": {
+"editor.defaultFormatter": "esbenp.prettier-vscode",
+},
+"search.exclude": {
+"**/node_modules": true,
+"**/dist": true,
+},
+}