4 Better code maintenance with developer tooling

 

This chapter covers

  • Writing error-free code with linting
  • Increasing productivity with formatting
  • Making components more robust with property constraints
  • Debugging React applications using developer tools

Code quality degrades over time—unfortunately, a hard fact of our chosen profession. As our web applications grow more complicated, maintaining code quality becomes harder and harder. This is especially the case for multideveloper projects, in which different people invariably do things in different ways, but it is also a problem for single-person projects. If you are working on the same codebase over time, you will pick up new ways of doing things, and these ways will most likely differ from the ones you followed earlier. You might open a file you haven’t touched in months and suddenly wonder, “What’s going on here?”

Although good comments, documentation, and code structure are all relevant solutions to the above problems, several external tools at your disposal will improve your code quality immensely without requiring you to change your ways or even do more work.

4.1 Reducing errors with linting

4.1.1 Problems solved by ESLint

4.1.2 ESLint configurations

4.1.3 How to get started using ESLint

4.2 Increasing productivity with formatters

4.2.1 Problems solved by Prettier

4.2.2 Nonstandard rules with Prettier configuration

4.2.3 How to start using Prettier

4.2.4 Alternative formatters

4.3 Making components more robust with property constraints

4.3.1 How to apply property types

4.3.2 Drawbacks of using property types

4.3.3 Default property values

4.3.4 How to get started using property types

4.4 Debugging applications with React Developer Tools

4.4.1 Problems solved by debugging

4.4.2 How to get started using React Developer Tools

4.4.3 Using the components inspector in React Developer Tools

4.4.4 Using the profiler in React Developer Tools

4.4.5 Alternatives and other tools

Summary