Add prettier layer

Add prettier layer. Add prettier support for .css/.scss/.less/.js/.json file.
Add layer variables for html, javascript, json.

layers/+frameworks/react/README.org

@@ -43,11 +43,13 @@ If your project do not use a custom =.eslintrc= file I strongly advice you to
 try out this one by Airbnb:
 [[https://github.com/airbnb/javascript/blob/master/linters/.eslintrc][.eslintrc]]
 
-In order to use automatic code formatting you need to install ~js-beautify~
+React layer uses the same formatter defined in javascript layer. Options are
+=web-beautify= and =prettier=.
+To use automatic code formatting you need to install ~js-beautify~ or ~prettier~
 with:
 
 #+BEGIN_SRC sh
-  $ npm install -g js-beautify
+  $ npm install -g js-beautify prettier
 #+END_SRC
 
 If you install these in non-standard locations, then add the following to your

layers/+frameworks/react/layers.el

@@ -9,4 +9,4 @@
 ;;
 ;;; License: GPLv3
 
-(configuration-layer/declare-layers '(javascript node tern web-beautify))
+(configuration-layer/declare-layers '(javascript node prettier tern web-beautify))

layers/+frameworks/react/packages.el

@@ -18,6 +18,7 @@
     flycheck
     js-doc
     lsp-javascript-typescript
+    prettier-js
     rjsx-mode
     smartparens
     tern
@@ -85,6 +86,10 @@
     (with-eval-after-load 'rjsx-mode
       (define-key rjsx-mode-map (kbd "C-d") nil))))
 
+(defun react/pre-init-prettier-js ()
+  (if (eq javascript-fmt-tool 'prettier)
+      (add-to-list 'spacemacs--prettier-modes 'rjsx-mode)))
+
 (defun react/post-init-smartparens ()
   (if dotspacemacs-smartparens-strict-mode
       (add-hook 'react-mode-hook #'smartparens-strict-mode)
@@ -94,7 +99,9 @@
   (add-to-list 'tern--key-bindings-modes 'rjsx-mode))
 
 (defun react/pre-init-web-beautify ()
-  (add-to-list 'spacemacs--web-beautify-modes (cons 'rjsx-mode 'web-beautify-js)))
+  (if (eq javascript-fmt-tool 'web-beautify)
+      (add-to-list 'spacemacs--web-beautify-modes
+                   (cons 'rjsx-mode 'web-beautify-js))))
 
 (defun react/post-init-yasnippet ()
   (add-hook 'rjsx-mode-hook #'spacemacs//react-setup-yasnippet))

layers/+lang/html/README.org

@@ -7,6 +7,8 @@
   - [[#features][Features:]]
 - [[#install][Install]]
   - [[#web-beautify][web-beautify]]
+  - [[#prettier][prettier]]
+  - [[#choosing-a-formatter][Choosing a formatter]]
 - [[#live-display-in-browser][Live display in browser]]
 - [[#key-bindings][Key Bindings]]
   - [[#web-mode][Web mode]]
@@ -41,6 +43,29 @@ gem specific_install https://github.com/Sweetchuck/scss_lint_reporter_checkstyle
 ** web-beautify
 See [[file:../../+tools/web-beautify/README.org][web-beautify layer]] documentation.
 
+** prettier
+See [[file:../../+tools/prettier/README.org][prettier layer]] documentation.
+
+** Choosing a formatter
+To choose a formatter, set the layer variable =web-fmt-tool=:
+
+#+BEGIN_SRC elisp
+(html :variables web-fmt-tool 'web-beautify)
+#+END_SRC
+
+Formatter can be chosen on a per project basis using directory local variables
+(files named =.dir-locals.el= at the root of a project), an example to use the
+=prettier= formatter:
+
+#+BEGIN_SRC elisp
+;;; Directory Local Variables
+;;; For more information see (info "(emacs) Directory Variables")
+
+((html-mode (web-fmt-tool . prettier)))
+#+END_SRC
+
+*Note:* you can easily add a directory local variable with ~SPC f v d~.
+
 * Live display in browser
 Use ~SPC m i~ to enable impatient mode, opening a live view of a HTML file in
 your browser. You may wish to enable impatient mode in referenced CSS or JS

layers/+lang/html/config.el

@@ -0,0 +1,13 @@
+;;; config.el --- html layer configuration file for Spacemacs
+;;
+;; Copyright (c) 2012-2018 Sylvain Benner & Contributors
+;;
+;; Author: Seong Yong-ju <sei40kr@gmail.com>
+;; URL: https://github.com/syl20bnr/spacemacs
+;;
+;; This file is not part of GNU Emacs.
+;;
+;;; License: GPLv3
+
+(defvar web-fmt-tool 'web-beautify
+  "The formatter to format a CSS/SCSS/Less file. Possible values are `web-beautify' and `prettier'.")

layers/+lang/html/layers.el

@@ -9,4 +9,4 @@
 ;;
 ;;; License: GPLv3
 
-(configuration-layer/declare-layers '(node web-beautify))
+(configuration-layer/declare-layers '(node prettier web-beautify))

layers/+lang/html/packages.el

@@ -24,6 +24,7 @@
         (helm-css-scss :requires helm)
         impatient-mode
         less-css-mode
+        prettier-js
         pug-mode
         sass-mode
         scss-mode
@@ -145,6 +146,11 @@
     :defer t
     :mode ("\\.less\\'" . less-css-mode)))
 
+(defun html/pre-init-prettier-js ()
+  (if (eq web-fmt-tool 'prettier)
+      (dolist (mode '(css-mode less-css-mode scss-mode))
+        (add-to-list 'spacemacs--prettier-modes mode))))
+
 (defun html/init-pug-mode ()
   (use-package pug-mode
     :defer t
@@ -271,5 +277,7 @@
                                                       jade-mode
                                                       slim-mode)))
 (defun html/pre-init-web-beautify ()
-  (add-to-list 'spacemacs--web-beautify-modes (cons 'css-mode 'web-beautify-css))
+  (if (eq web-fmt-tool 'web-beautify)
+      (add-to-list 'spacemacs--web-beautify-modes (cons 'css-mode 'web-beautify-css)))
+  ;; always use web-beautify for a .html file
   (add-to-list 'spacemacs--web-beautify-modes (cons 'web-mode 'web-beautify-html)))

layers/+lang/javascript/README.org

@@ -7,7 +7,9 @@
   - [[#features][Features:]]
 - [[#install][Install]]
   - [[#web-beautify][web-beautify]]
+  - [[#prettier][prettier]]
   - [[#choosing-a-backend][Choosing a backend]]
+  - [[#choosing-a-formatter][Choosing a formatter]]
 - [[#backends][Backends]]
   - [[#tern][Tern]]
   - [[#language-server-protocol][Language Server Protocol]]
@@ -56,6 +58,9 @@ If you install these in non-standard locations, then add the following to your =
 ** web-beautify
 See [[file:../../+tools/web-beautify/README.org][web-beautify layer]] documentation.
 
+** prettier
+See [[file:../../+tools/prettier/README.org][prettier layer]] documentation.
+
 ** Choosing a backend
 To choose a default backend set the layer variable =javascript-backend=:
 
@@ -74,6 +79,24 @@ Backend can be chosen on a per project basis using directory local variables
 ((js2-mode (javascript-backend . lsp)))
 #+END_SRC
 
+** Choosing a formatter
+To choose a formatter, set the layer variable =javascript-fmt-tool=:
+
+#+BEGIN_SRC elisp
+(javascript :variables javascript-fmt-tool 'web-beautify)
+#+END_SRC
+
+Formatter can be chosen on a per project basis using directory local variables
+(files named =.dir-locals.el= at the root of a project), an example to use the
+=prettier= formatter:
+
+#+BEGIN_SRC elisp
+;;; Directory Local Variables
+;;; For more information see (info "(emacs) Directory Variables")
+
+((js2-mode (javascript-fmt-tool . prettier)))
+#+END_SRC
+
 *Note:* you can easily add a directory local variable with ~SPC f v d~.
 
 * Backends

layers/+lang/javascript/config.el

@@ -15,3 +15,6 @@
 
 (defvar javascript-backend 'tern
   "The backend to use for IDE features. Possible values are `tern' and `lsp'.")
+
+(defvar javascript-fmt-tool 'web-beautify
+  "The formatter to format a JavaScript file. Possible values are `web-beautify' and `prettier'.")

layers/+lang/javascript/layers.el

@@ -9,4 +9,4 @@
 ;;
 ;;; License: GPLv3
 
-(configuration-layer/declare-layers '(json node tern web-beautify))
+(configuration-layer/declare-layers '(json node prettier tern web-beautify))

layers/+lang/javascript/packages.el

@@ -26,6 +26,7 @@
         livid-mode
         (lsp-javascript-typescript :requires lsp-mode)
         org
+        prettier-js
         skewer-mode
         tern
         web-beautify))
@@ -169,6 +170,10 @@
     :defer t
     :config (spacemacs//setup-lsp-jump-handler 'js2-mode)))
 
+(defun javascript/pre-init-prettier-js ()
+  (if (eq javascript-fmt-tool 'prettier)
+      (add-to-list 'spacemacs--prettier-modes 'js2-mode)))
+
 (defun javascript/init-skewer-mode ()
   (use-package skewer-mode
     :defer t
@@ -200,4 +205,6 @@
   (add-to-list 'tern--key-bindings-modes 'js2-mode))
 
 (defun javascript/pre-init-web-beautify ()
-  (add-to-list 'spacemacs--web-beautify-modes (cons 'js2-mode 'web-beautify-js)))
+  (if (eq javascript-fmt-tool 'web-beautify)
+      (add-to-list 'spacemacs--web-beautify-modes
+                   (cons 'js2-mode 'web-beautify-js))))

layers/+lang/json/README.org

@@ -8,6 +8,8 @@
 - [[#install][Install]]
   - [[#configuration][Configuration]]
   - [[#web-beautify][web-beautify]]
+  - [[#prettier][prettier]]
+  - [[#choosing-a-formatter][Choosing a formatter]]
 - [[#usage][Usage]]
   - [[#reformat][Reformat]]
   - [[#display-navigable-hierarchy][Display navigable hierarchy]]
@@ -34,6 +36,29 @@ To define the default indentation set the variable =js-indent-level=.
 ** web-beautify
 See [[file:../../+tools/web-beautify/README.org][web-beautify layer]] documentation.
 
+** prettier
+See [[file:../../+tools/prettier/README.org][prettier layer]] documentation.
+
+** Choosing a formatter
+To choose a formatter, set the layer variable =json-fmt-tool=:
+
+#+BEGIN_SRC elisp
+(json :variables json-fmt-tool 'web-beautify)
+#+END_SRC
+
+Formatter can be chosen on a per project basis using directory local variables
+(files named =.dir-locals.el= at the root of a project), an example to use the
+=prettier= formatter:
+
+#+BEGIN_SRC elisp
+;;; Directory Local Variables
+;;; For more information see (info "(emacs) Directory Variables")
+
+((json-mode (json-fmt-tool . prettier)))
+#+END_SRC
+
+*Note:* you can easily add a directory local variable with ~SPC f v d~.
+
 * Usage
 ** Reformat
 ~SPC m =~ will reformat the whole buffer or the active region. Use numerical

layers/+lang/json/config.el

@@ -0,0 +1,15 @@
+;;; config.el --- json layer configuration file for Spacemacs
+;;
+;; Copyright (c) 2012-2018 Sylvain Benner & Contributors
+;;
+;; Author: Seong Yong-ju <sei40kr@gmail.com>
+;; URL: https://github.com/syl20bnr/spacemacs
+;;
+;; This file is not part of GNU Emacs.
+;;
+;;; License: GPLv3
+
+;; Variables
+
+(defvar json-fmt-tool 'web-beautify
+  "The formatter to format a JSON file. Possible values are `web-beautify' and `prettier'.")

layers/+lang/json/layers.el

@@ -9,4 +9,4 @@
 ;;
 ;;; License: GPLv3
 
-(configuration-layer/declare-layers '(node web-beautify))
+(configuration-layer/declare-layers '(node prettier web-beautify))

layers/+lang/json/packages.el

@@ -18,6 +18,7 @@
         json-navigator
         json-reformat
         json-snatcher
+        prettier-js
         web-beautify
         ))
 
@@ -55,5 +56,11 @@
     (spacemacs/set-leader-keys-for-major-mode 'json-mode
       "hp" 'jsons-print-path)))
 
+(defun json/pre-init-prettier-js ()
+  (if (eq json-fmt-tool 'prettier)
+      (add-to-list 'spacemacs--prettier-modes 'json-mode)))
+
 (defun json/pre-init-web-beautify ()
-  (add-to-list 'spacemacs--web-beautify-modes (cons 'json-mode 'web-beautify-js)))
+  (if (eq json-fmt-tool 'web-beautify)
+      (add-to-list 'spacemacs--web-beautify-modes
+                   (cons 'json-mode 'web-beautify-js))))

layers/+lang/typescript/config.el

@@ -15,10 +15,8 @@
   "Run formatter on buffer save.")
 
 (defvar typescript-fmt-tool 'tide
-  "The name of the tool to be used
-for TypeScript source code formatting.
-Currently avaliable 'tide (default)
-and 'typescript-formatter .")
+  "The name of the tool to be used for TypeScript source code formatting.
+Currently avaliable 'tide (default), 'typescript-formatter and 'prettier.")
 
 (defvar typescript-backend 'tide
   "The backend to use for IDE features. Possible values are `tide'

layers/+lang/typescript/funcs.el

@@ -133,6 +133,8 @@
     (call-interactively 'spacemacs/typescript-tsfmt-format-buffer))
    ((eq typescript-fmt-tool 'tide)
     (call-interactively 'tide-format))
+   ((eq typescript-fmt-tool 'prettier)
+    (call-interactively 'prettier-js))
    (t (error (concat "%s isn't valid typescript-fmt-tool value."
                      " It should be 'tide or 'typescript-formatter."
                      (symbol-name typescript-fmt-tool))))))

layers/+lang/typescript/layers.el

@@ -9,4 +9,4 @@
 ;;
 ;;; License: GPLv3
 
-(configuration-layer/declare-layers '(node javascript))
+(configuration-layer/declare-layers '(node javascript prettier))

layers/+tools/prettier/README.org

@@ -0,0 +1,28 @@
+#+TITLE: prettier layer
+
+* Table of Contents                                       :TOC_4_gh:noexport:
+- [[#description][Description]]
+  - [[#features][Features:]]
+- [[#install][Install]]
+- [[#key-bindings][Key Bindings]]
+
+* Description
+This layer adds support for [[https://github.com/prettier/prettier][prettier]]
+
+** Features:
+- Format buffer in a consistent style
+
+* Install
+To use this configuration layer, add it to your =~/.spacemacs=.
+
+To install =prettier= globally:
+
+#+BEGIN_SRC sh
+  $ npm install -g prettier
+#+END_SRC
+
+* Key Bindings
+
+| Key Binding | Description                       |
+|-------------+-----------------------------------|
+| ~SPC m =~   | format buffer in supported layers |

layers/+tools/prettier/config.el

@@ -0,0 +1,15 @@
+;;; config.el --- prettier Layer configuration file for Spacemacs
+;;
+;; Copyright (c) 2012-2018 Sylvain Benner & Contributors
+;;
+;; Author: Seong Yong-ju <sei40kr@gmail.com>
+;; URL: https://github.com/syl20bnr/spacemacs
+;;
+;; This file is not part of GNU Emacs.
+;;
+;;; License: GPLv3
+
+;; Variables
+
+(defvar spacemacs--prettier-modes nil
+  "List of mode.")

layers/+tools/prettier/packages.el

@@ -0,0 +1,20 @@
+;;; packages.el --- prettier Layer packages file for Spacemacs
+;;
+;; Copyright (c) 2012-2018 Sylvain Benner & Contributors
+;;
+;; Author: Seong Yong-ju <sei40kr@gmail.com>
+;; URL: https://github.com/syl20bnr/spacemacs
+;;
+;; This file is not part of GNU Emacs.
+;;
+;;; License: GPLv3
+
+(setq prettier-packages '(prettier-js))
+
+(defun prettier/init-prettier-js ()
+  (use-package prettier-js
+    :commands prettier-js
+    :init
+    (dolist (mode spacemacs--prettier-modes)
+      (spacemacs/set-leader-keys-for-major-mode mode
+        "=" #'prettier-js))))