How To Be Productive With WebStorm
Tags: webdev, programming, productivity, webstorm
Published: 2022-12-08 00:08:12

I’ve been using WebStorm as my default code editor for the last 3 years, and it’s amazing. I think you do have one of your own. But do you know how you can boost your speed as a developer with it? If not, let’s do this. fast; it will take just a couple of minutes, I promise.

## Live templates

How many times have you created a new file with the same structure? If it happens more than twice, Huston, you know the drill. As developers, we shouldn’t repeat ourselves, remember? For that, you can use **Live Templates (aka Snippets)**. I’m sure you've seen it before but haven’t used it.

![2](https://cdn-images-1.medium.com/max/2824/0*47rVulPpRLoEgkep.gif)

There are a lot of pre-built live templates that come with the plugins you install. Go to **Preferences->Editor->Live Templates**

![3](https://cdn-images-1.medium.com/max/4048/1*7hBVxBozWEhFPpiQa9kIJg.png)

And what is great about it is that you can create your own live templates and never repeat yourself again. To do so, just click the “+” button and paste your template, providing an abbreviation for it. For 3 years, I’ve created around 50 most-used abbreviations for React, React Native, Node.js, Next.js, and other projects I’m working on most of the time.

![4](https://cdn-images-1.medium.com/max/3028/1*c2oKiLQBs8nSAjkktimtEg.png)

If you want to dive deeper into Live Templates, please go to the [official documentation](https://www.jetbrains.com/help/webstorm/using-live-templates.html)

## Macros

How many steps would you need to make to create a file in the root folder of your project or in the "components" folder when bootstrapping your project?

 1. Find a folder

 2. Call the context menu

 3. Click create a new file

 4. Name it

Even with the terminal way, you would need to:

 1. Open the terminal

 2. Move to the folder

 3. Create a file with a name

But we can do it faster with **Macroses**. It gives you control over repetitive tasks. You just create a record, edit and play back macros, assign a shortcut to them, and share them.

### Record a macro

 1. Open the Edit menu, point to Macros, and click Start Macro Recording.

 2. Perform necessary actions that you want to be recorded.

 3. Press 🟥 or select Edit -> Macros -> Stop Macro Recording.

 4. In the Enter Macro Name dialog, specify the name for the new macro and click OK.

 5. If the macro is intended for temporary use only, you can leave the name blank.

![5](https://cdn-images-1.medium.com/max/2400/0*X1etwx88ARYwnfE3.png)

It’s easy to use when you know how it works. Stop reading for a moment and consider three ways you can use Macroses in your current project. Dive deeper into the [official documents](https://www.jetbrains.com/help/webstorm/using-macros-in-the-editor.html).

## Keep It Simple

Just imagine how much time you will save by investing a few minutes in learning and setting up these tools, which you would use to focus more on the logic of your features instead of the routine things you repeat time after time. And it’s just the tip of the iceberg, so I encourage you to go further and find your own list of things you can automate, delegate to machines, or make in less time by applying a non-trivial approach.

I hope this article was useful. Please subscribe so you don't miss the next article, and feel free to contact me if you have any questions.

[Twitter](https://twitter.com/kucherenko_web) | [LinkedIn](https://www.linkedin.com/in/sergey-kucherenko/)