diff --git a/CHANGELOG.develop b/CHANGELOG.develop
index 05bc16a22..7e243edf1 100644
--- a/CHANGELOG.develop
+++ b/CHANGELOG.develop
@@ -1546,6 +1546,7 @@ Other:
   - Added ES6 module extension to =init-js2-mode= (thanks to Nathan Lloyd)
   - Added =org-babel= support (thanks to Michael Rohleder)
   - Added debug support via =dap= layer (Firefox and Google Chrome)
+  - Added format on save option. (thanks to Trapez Breen)
 - Key bindings
   - Improved coffeescript support:
     - ~SPC m '~ to create or go to REPL
diff --git a/layers/+lang/javascript/README.org b/layers/+lang/javascript/README.org
index 188029a86..be1f3f524 100644
--- a/layers/+lang/javascript/README.org
+++ b/layers/+lang/javascript/README.org
@@ -118,6 +118,16 @@ Formatter can be chosen on a per project basis using directory local variables
 
 *Note:* you can easily add a directory local variable with ~SPC f v d~.
 
+You can choose formatting tool:
+
+#+BEGIN_SRC elisp
+(setq-default dotspacemacs-configuration-layers '(
+  (javascript :variables
+              javascript-fmt-tool 'prettier)))
+#+END_SRC
+
+Default is =’web-beautify=.
+
 * Backends
 ** Tern
 See [[file:../../+tools/tern/README.org][tern layer]] documentation.
diff --git a/layers/+lang/javascript/config.el b/layers/+lang/javascript/config.el
index efa7c668d..7e1d08317 100644
--- a/layers/+lang/javascript/config.el
+++ b/layers/+lang/javascript/config.el
@@ -21,3 +21,6 @@
 
 (defvar javascript-import-tool nil
   "The import backend to import modules. Possible values are `import-js' and `nil' to disable.")
+
+(defvar javascript-fmt-on-save nil
+  "Run formatter on buffer save.")
diff --git a/layers/+lang/javascript/funcs.el b/layers/+lang/javascript/funcs.el
index f795f452d..3f1dd61a0 100644
--- a/layers/+lang/javascript/funcs.el
+++ b/layers/+lang/javascript/funcs.el
@@ -130,3 +130,21 @@
   (spacemacs/skewer-eval-region beg end)
   (skewer-repl)
   (evil-insert-state))
+
+
+;; Others
+
+(defun spacemacs/javascript-format ()
+  "Call formatting tool specified in `javascript-fmt-tool'."
+  (interactive)
+  (cond
+   ((eq javascript-fmt-tool 'prettier)
+    (call-interactively 'prettier-js))
+   ((eq javascript-fmt-tool 'web-beautify)
+    (call-interactively 'web-beautify-js))
+   (t (error (concat "%s isn't valid javascript-fmt-tool value."
+                     " It should be 'web-beutify or 'prettier.")
+                     (symbol-name javascript-fmt-tool)))))
+
+(defun spacemacs/javascript-fmt-before-save-hook ()
+  (add-hook 'before-save-hook 'spacemacs/javascript-format t t))
diff --git a/layers/+lang/javascript/packages.el b/layers/+lang/javascript/packages.el
index 28ec32859..eb7f3d606 100644
--- a/layers/+lang/javascript/packages.el
+++ b/layers/+lang/javascript/packages.el
@@ -84,6 +84,8 @@
                      (cons 'javascript-backend value))))
     :config
     (progn
+      (when javascript-fmt-on-save
+        (add-hook 'js2-mode-local-vars-hook 'spacemacs/javascript-fmt-before-save-hook))
       ;; prefixes
       (spacemacs/declare-prefix-for-mode 'js2-mode "mh" "documentation")
       (spacemacs/declare-prefix-for-mode 'js2-mode "mg" "goto")
diff --git a/layers/+lang/typescript/funcs.el b/layers/+lang/typescript/funcs.el
index 4ba496a7f..76a6b7ac0 100644
--- a/layers/+lang/typescript/funcs.el
+++ b/layers/+lang/typescript/funcs.el
@@ -131,8 +131,8 @@
    ((eq typescript-fmt-tool 'prettier)
     (call-interactively 'prettier-js))
    (t (error (concat "%s isn't valid typescript-fmt-tool value."
-                     " It should be 'tide, 'typescript-formatter or 'prettier."
-                     (symbol-name typescript-fmt-tool))))))
+                     " It should be 'tide, 'typescript-formatter or 'prettier.")
+                     (symbol-name typescript-fmt-tool)))))
 
 (defun spacemacs/typescript-fmt-before-save-hook ()
   (add-hook 'before-save-hook 'spacemacs/typescript-format t t))