Chapter 5 - Formatting

• Vertical Formatting:
  • Vertical white space to separate logical blocks of code.
  • Files should have similar number of lines.
  • Like the react components you created, Import statements at the top then the details of the functionality is in the middle.
  • Variables should be declared as close to their usage.
  • Functions that depend on each other, should be close together.
  • Anything related should be be near each other.
• Vertical Ordering:
  • The code is more detailed as you go down the file.
  • Should expect imports on dependencies at the top.
• Horizontal Formatting
  • There should be a max character limit for files before wrapping.
  • If it takes you a while to read what the code does, then it may be not be formatted as well. You could tell the difference between unformatted and formatted code.
  • Indentation.
• Formatting should be consistent to make code easy to read and understand
  • Consistent naming, function structures.
• Format before committing and merging code.
• Use automated formatting tools such as prettier.
• Have team standard for formatting.