The document discusses JavaScript code formatting using Prettier, highlighting specific rules and patterns for formatting function calls and JSX syntax. It outlines the challenges of creating effective pretty printers, emphasizing the distinction between making a simple versus a good pretty printer. Additionally, it includes examples of code and expressions illustrating the formatting principles in practice.

1. JavaScript Code
Formatting with prettier
Christopher "vjeux" Chedeau

2. const jsxWhitespace = options.singleQuote ? ifBreak("{' '}", " ") : ifBreak('{" "}', " ");
const multiLineElem = group(concat([
openingLines,
indent(options.tabWidth,group(concat(childrenGroupedByLine), { shouldBreak: true })),
hardline,
closingLines
]));

3. const jsxWhitespace = options.singleQuote ? ifBreak("{' '}", " ") : ifBreak('{" "}', " ");
const multiLineElem = group(concat([
openingLines,
indent(options.tabWidth,group(concat(childrenGroupedByLine), { shouldBreak: true })),
hardline,
closingLines
]));
const jsxWhitespace = options.singleQuote
? ifBreak("{' '}", " ")
: ifBreak('{" "}', " ");
const multiLineElem = group(
concat([
openingLines,
indent(
options.tabWidth,
group(concat(childrenGroupedByLine), { shouldBreak: true })
),
hardline,
closingLines
])
);

4. Technical People
"The Hardest Program
I've Ever Written"
-- dartfmt author

5. call(a, b, c)

6. call(a, b, c)
call(
a,
b,
c)
Hug last paren

7. call(a, b, c)
call(
a,
b,
c)
Hug last paren
call(a,
b,
c)
Align paren

8. call(a, b, c)
call(
a,
b,
c
)
call(
a,
b,
c)
Hug last paren Facebook style
call(a,
b,
c)
Align paren

9. If it fits in one line, stay in one line
Rule #1

10. call(call(a, b, c), b, c)

11. call(call(a, b, c), b, c)
call(call(
a,
b,
c
), b, c)
Break Inner

12. call(call(a, b, c), b, c)
call(
call(a, b, c),
b,
c
)
Break Outer
call(call(
a,
b,
c
), b, c)
Break Inner

13. call(call(a, b, c), b, c)
call(
call(a, b, c),
b,
c
)
call(
call(
a,
b,
c
),
b,
c
)
Break Outer Break Both
call(call(
a,
b,
c
), b, c)
Break Inner

14. Always break the outer one first
Rule #2

15. call(a, b, c)
call(
a,
b,
c
)

16. group indent ifBreak

17. call(a, b, c)
group('call(', indent(ifBreak('n'),
'a,', ifBreak('n', '░'),
'b,', ifBreak('n', '░'),
'c', ifBreak('n')
), ')')
call(
a,
b,
c
)

18. call( indent( n
a, n
b, n
c n
) )

19. call(indent(n
a,n
b,n
cn
))

20. call(
a,
b,
c
)

21. group('call(', indent(ifBreak('n'),
'a,', ifBreak('n', '░'),
'b,', ifBreak('n', '░'),
'c', ifBreak('n')
), ')')

22. call(
a, ░
b, ░
c
)

23. call(a,░b,░c)

24. call(a, b, c)

25.
ExpressionStatement({
expression: CallExpression({
arguments: [
Identifier("a"),
Identifier("b"),
Identifier("c"),
],
}),
})

26. Text AST IR Text

27. Making a pretty printer is easy

28. Making a pretty printer is easy
Making a good pretty printer is hard

29. call(
a,
b,
function() {
}
)

30. call(a, b, function() {
})

31. call(function() {}, function() {
})

32. call(
function() {},
function() {}
)
(╯°□°）╯︵ ┻━┻

33. items
.map(() => {})
.filter(() => {})

34. Object
.keys(items)
.map(() => {})
.filter(() => {})

35. Object.keys(items)
.map(() => {})
.filter(() => {})

36. <div
{...a === null ? b : c}
/>

37. <div
{...(a === null ? b : c)}
/>

38. a && b || c && d

39. (a && b) || (c && d)

40. a
? <div>
...
</div>
: null
Without paren
a
? (
<div>
...
</div>
) : null
With paren

41. With paren

42. Without paren
With paren

43. People

44. time find html/js/ -name '*.js' |
xargs -n 1000 -P24 prettier
real 3m26s

46. I can't push it on people
people have to pull it themselves
Rule #1

47. Generate Buzz

48. First experience using prettier

51. const jsxWhitespace = options.singleQuote ? ifBreak("{' '}", " ") : ifBreak('{" "}', " ");

53. It's a journey that takes time
Rule #2

56. cmd-shift-c