JavaScript JSX Style

We use prettier to format JavaScript / JSX files.

Prettier options

We use the following set of options for formatting: --tab-width 4 --jsx-bracket-same-line --bracket-spacing --trailing-comma es5 --single-quote --print-width 100. Configure your setup accordingly!

Prettier in an editor

For Atom, install prettier-atom. Apply configuration: Preferences → Packages → prettier-atom → Settings → "Prettier Options": check "Single Quotes", "Bracket Spacing", "Semicolons", "JSX Bracket Same Line", set "Tab Width" to 4, "Trailing Comma" to "es5", "Print Width" to 100.

For Emacs, use prettier-emacs. Add the following to your emacs config file:

;;prettier
(setq load-path (cons "<local path>/prettier-emacs" load-path))
(require 'prettier-js)

(setq prettier-js-args '(
			 "--tab-width" 4
			 "--jsx-bracket-same-line" "true"
			 "--bracket-spacing" "true"
			 "--trailing-comma" "es5"
			 "--single-quote" "true"
			 "--print-width" 100
			 ))