Introduction to VS Code

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 and fast. 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 the 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. It’s 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 Testing React with Enzyme.

If you’re already comfortable with your development environment, feel free to skim this chapter. The aim ...