Chapter 2
Integrated Tooling with VS Code

As we learned in the previous chapter, the essence of test-driven development is rapid iteration. Instead of waiting until you’ve churned out a whole feature before finding out if your code works, you split that feature into small pieces and enjoy feedback as you put each piece in place.

Ideally, the kind of feedback used for TDD should be automated (no effort required) and fast (no waiting). We’ve seen how helpful Jest’s watch mode is in both regards. But you can do even better, by incorporating feedback directly into your code editing environment.

This chapter is about that environment. It starts with VS Code, a powerful and highly customizable editor. Later in the chapter, you’ll incorporate some new tools into this coding environment: ESLint (which detects common coding mistakes) and Prettier (which auto-formats code so you can stay focused on substance over style). Last but not least, you’ll experience Wallaby, a magical piece of software that bridges the gap between your code and your tests to give you real-time feedback.

The goal is to get you acquainted with all of the pieces of a modern JavaScript development stack. Although this chapter is a bit of a detour, you’ll find the arsenal of support tools introduced here invaluable when you take on the challenge of React development, starting in Chapter 3, ​Testing React with Enzyme​.

If you’re already comfortable with your development environment, feel free to skim this chapter. The aim here isn’t to convince you to switch to VS Code but rather to minimize the friction between you and your tools, by setting up your testing library and linter to silently watch over your code. If you need to run a command to see your test results, you can do better.