Enter Your Email Address to Watch This Lesson

Your link to unlock this lesson will be sent to this email address.

Unlock this lesson and all 986 of the free egghead.io lessons, plus get Tools content delivered directly to your inbox!



Existing egghead members will not see this. Sign in.

WebStorm - Customizing the Built-in Terminal

3:29 Tools lesson by

WebStorm has a convenient built-in terminal which you can launch with a simple keyboard shortcut and customize to your heart's content. This video shows how to set up the terminal to launch Cygwin (a very popular Windows shell alternative), but the concepts hold true for launching zsh, fish, or any shell of your choice.


egghead.io comment guidelines

Avatar
egghead.io

WebStorm has a convenient built-in terminal which you can launch with a simple keyboard shortcut and customize to your heart's content. This video shows how to set up the terminal to launch Cygwin (a very popular Windows shell alternative), but the concepts hold true for launching zsh, fish, or any shell of your choice.

WebStorm has a built-in terminal emulator that you can access in a variety of ways, like double shift, typing terminal, hitting enter. You can see it pops up down here. You can do it from a keyboard shortcut. If you go into settings and check out your keymap, do a search for terminal, and you can see by default it's mapped to something like Alt F12. Which is crazy.

So we'll add a new keyboard shortcut like Control comma, or just find another shortcut that you like. Hit OK, Apply, OK. Then we can toggle the terminal with Control comma. By default, the terminal's font is pretty small. I'm going to go ahead and bump that up in the settings as well.

If you go to Editor, Colors and Fonts, Console Font. You can't change the default scheme. You need to save a copy of it. I'll save a default copy to make any changes to it. I'm going to change the font over to Ubuntu Mono, maybe change the size to 27.

Or if you just wanted the font that your editor uses, you went into Font and changed the font in here. You could just go into your Console Font and hit Apply Editor Font Settings so that your console font and your editor font stay in sync. Otherwise, I'm just going to hit Apply, OK.

You can see it's a little messed up now, it's just in the same session. So make sure you close out the session and then reopen it. Don't just toggle it with your keyboard shortcut. You need to close it out. For me, I don't want to use the Windows Command Prompt for my terminal. I want to use Cygwin, because that's what I use for development.

You can actually change which shell to run under the settings. Search for terminal up here, and you give it a new shell path. If you have another shell installed like Cygwin, like I do, I put it in toolscygwin, in that path.

You look under the cygwin.bat file, you'll basically see that Cygwin is launching a Bash executable from this directory and passing in these parameters. We want to do the same thing, so I'll copy all of this, paste that into my settings, and just change this a little bit here. I'll hit Apply, OK.

When I close this session again and open it up, I'm now using Cygwin and our Bash is my shell. You'll notice if I do pwd to get my current working directory when you launch the terminal, you want it to be in the webstormtutorials or whatever your directory name is of your current project. Not in just your home directory.

What you need to do for Cygwin in this case is to go into your Cygwin settings and ETC, open up your configuration file here, and add this line at the end that says, cd "$oldpwd". Now your terminal will open in your current directory.

When I save this, close this session, and open up a new terminal, you can see I'm in my current directory. If I create something like a new HTML file, call it Index, then I could easily launch Live Server. Then just type something, hit save, and you can see Live Server will automatically update.

Again, this is just an example. You could use this for npm-installing things or any other terminal tools. The last thing to show here is that you can actually pop this out. I'm going to go into windowed mode. Now this is in its own window that I can drag to another monitor, and I don't have to worry about it.

If you need to add multiple tools, you can always come in here and do something else. I want to say echo hello, says hello, and my other tab is still up and running.

HEY, QUICK QUESTION!
Joel's Head
Why are we asking?