Introducing React Food Truck

There are many important questions to ask when you are building an application. Questions like: “Who are the users?”, “What browser will they use to access the app?” and “Is there a heaven and will there be food trucks there?”.

Of course, some of these questions can be answered definitively and some cannot. While we will never know why there is that one person hitting our app from IE 8 on a Saturday at 3 AM (WTF MAN!), we can be almost 100% sure that if there is a heaven, there will be food trucks there.

It in this striving for paradise and glorified hipster fast-food that I created the React Food Truck.

What. The Heck. Is This?

React Food Truck is a curated set of extensions for discerning React developers who use VS Code. And if you’re a discerning developer, you will of course be using VS Code. Or you won’t, but you should be, because much like the great Redwoods of California, you won’t find the React Food Truck anywhere else. I’m not saying that React Food Truck is in the woods; that was probably a terrible analogy.

The point is that I spent a lot of time combing the depths of the VS Code Extension Marketplace to find the tastiest and most delicious extensions that are guaranteed to make your life as a React developer 129% more enjoyable.

All you have to do is install the React Food Truck extension and it will automatically install my handpicked extension smorgasbord.

What’s On The Truck

Simple React Snippets

Only the cleanest, freshest set of React snippets in the game. This is everything you need to build React apps, but without the snippet bloat. For instance, there are no React Native snippets in this bundle. Why? Because you’re not building a React Native app. If you were, you would install Simple React Native Snippets, which of course does not exist.

ES6 Snippets

This extension puts all the best JavaScript snippets at your fingertips. Why type import when you can type imp? It’s three letters shorter. That’s called productivity.

Prettier

Your code is looking a little shady. Did you just mix double quotes and single quotes in the same file? Don’t worry about formatting every again. Give your OCD a break and let Prettier sweat the small stuff. It automatically formats your code and makes it, uh, prettier.

Pair this extension with the following settings in your User Preferences file for that premium “format on save” experience.

"editor.formatOnSave": true

ESLint

Your JavaScript is so rock solid, you don’t need a linter. But if you did, it would be ESLint and you would use this extension.

Semi-Pro tip: If you’re using ESLint, just force Prettier to format your code based on your .eslintrc.json file. Add the following to your User Settings:

"prettier.eslintIntegration": true

npm Intellisense

Stop guessing at your npm packages. You never get it right anyway. Is leftpad or left-pad? Not your problem anymore. This extension provides intellisense for your imports.

Import Cost

How big is this file I just imported into my component? WHO CARES. I’m on a gig connection. But on the off case you care about how many bits you hammer your users with, this extension has your back.

Exports Autocomplete

You’re telling me I have to import my component before I can use it in my JSX? pffffffft. How about I just use it and VS Code imports it for me. That’s how I roll.

CSS2React

You know how you copy/paste in some CSS to a React component (probably from CSS Tricks. It’s OK. We’re all doing it.), then you gotta fix it because CSS isn’t JavaScript? Never. again.

React Pure To Class

Do you need a class or a pure component? Nobody ever knows until they make a component and then realize this thing isn’t nearly as dumb as they thought it was going to be and NOW they need a class. REFACTORING SUCKS. Converting pure components to classes is a breeze with this extension.

Install The Food Truck

You can install React Food Truck in VS Code as of last week. It’s already incredibly popular with a whopping 32 installs (Thanks, Mom!).

Other Extension Packs?

Not using React? No prob, Rob. Here are some other great extension packs for your palette.

• Vue Snippets
• Angular Essentials

Got an extension you think should be on the truck, but I left it out? Open an issue on the repo and I’ll add it. Everybody loves a food truck!