Lesson 6 - Advanced settings in the WebStorm development environment

In the last lesson, Debugging in the WebStorm development environment, we talked about debugging right in the WebStorm development environment.

Proper IDE setup can help a lot, saving up to tens of hours of time. Most settings are perhaps individual, so I will mention only the most important ones. For official help on using WebStorm more advanced, see Help > Learn IDE Features. You can access the WebStorm version 2021.1.1 settings via File > Settings or by pressing Ctrl + Alt + S `. However, this abbreviation should not be changed in other versions as well.

Design

Although the graphics page of the IDE is not the most important setting, when the IDE looks better, it creates a better workspace. This setting contains several optional elements.

Theme

The IDE style settings can be found in the settings under the Appearance & Behavior > Appearance folder, here at the very top we can see the option to select the application style. There are five to choose from:

• IntelliJ Light,
• Windows 10 Light,
• `Dracula a
• High Contrast.

We only have these few official topics, fortunately for gourmets, there are hundreds more on the internet. On the page with official topics, we will choose one that we like and try to install it.

For example, I will install the Gradianto theme. After clicking on Install to IDE > <Your Webstorm version> will display a notification about the installation of the theme in WebStorm, click on OK and then the theme should change automatically. If we want to change the style back to another, we can do it again in the settings, as we said a moment ago. Choose the theme that you like the most and especially work well, it can be one of the following:

Text

You may have seen the code in typeface or other styles. Today we will learn how to work with text style. In the same place where we set the theme, we will set most of the text. If we check Use custom font, we get the option to set the font and text size. It must be said that with this tool, we only edit labels in the IDE, ie not the code itself, if we want to modify the font of the code, use the Editor > Font folder. As a result, the IDE text settings might look something like this:

Although it does not look like that, this text is really in English, only the font is changed. Of course, this setting is a deterrent to what font style you shouldn't use for efficient work. Instead of writing code, we would rather figure out what individual letters mean.

Code colors

The colors of the code, or the colors of individual words, are set in the Editor > Color Scheme settings, when we click on one of the languages, all types of text appear. After clicking on a type and clicking on Inherit values from, we will be able to choose the background color of the given type, text, wrong code, and its effects, eg frame or underline.

Other

Language version

Setting the language version can sometimes be very important, and incorrect settings cause unnecessary errors. You probably know that there is a big difference between JavaScript (ECMAScript) 6 and 5. The arrow functions, let or === have been added. So if you had ECMAScript 5 set up and wrote an arrow function, WebStorm would take it as a mistake.

To change this setting, go to the Languages & Frameworks > <Language> main settings menu. For example, try changing the JavaScript version to ECMAScript 5.1 and writing the arrow function:

The IDE tells us that there is no such thing in the language, so it is a mistake.

Tools

In WebStorm, we have several tools available that, for example, make development work easier or automate various, often long and annoying tasks.

Browsers

WebStorm has the option of automatically launching the website locally, which is logically launched in the browser, and this tool is suitable for that. In the main menu in the Tools > Web Browsers tab you have the option to select:

• enabled browsers
• default browser
• in what type of files will the browser icon be displayed (to open the file in the browser)

Perhaps the only thing you need to discuss is adjusting your browser settings. It is not possible to edit pre-set browsers at all, but we can sometimes select a folder for profiles, etc. For them, in order to edit the browser, we must make a "pencil" available. To do this, add a new browser using the + sign. A new line will be added to the list, where we can directly specify which browser it is (Firefox, Chrome ...). To make a more specific adjustment, click on the browser and then on the pencil icon. Here we have the option to select browser settings (Use custom user data directory or folder for user data) and arguments for launching the browser (Command-line options). We will try to enter an argument, I know about three arguments myself, so I prefer to use "their list": https://peter.sh/experiments/chromium-command-line-switches/. Alternatively, you can search for another source of switches using Chromium Command Line Switches.

Let's try to add the argument --incognito, it will open an anonymous window. Create an HTML file, for example test.html, just press Alt + F2 and select the browser, an anonymous window will open with an address similar to this:

http://localhost:63342/test/test.html?_ijt=suud9pka173koha2jq3kk6s1c4

and a page with blank content (unless you wrote something in the HTML file). Here are some of the most important arguments:

• --disable-plugins - disable all extensions
• --disable-translate - turn off page translation
• --multi-profiles - allow multiple profiles
• --window-position=<width, height> - sets where the window opens, format is "x, y"
• --window-size=<width,height> - set window dimensions, eg "800,600"
• --incognito - set incognito mode
• --disable-plugins-discovery - disable extension checking
• --dns-prefetch-disable - disable prefetch prefetching
• --no-referrers - disables chrome data sending

Terminal

Surely you have ever used the built-in terminal in WebStorm, whether for git or uploading to a server. This tool is very useful and that is why it is good to set it up well. As you can think of the terminal settings in WebStorm, you can find them in the Tools > Terminal menu. Here are some things to do:

• default folder for the project
• special system variables
• path to the system terminal (which terminal to start)

You may have noticed that there are many more configurable things, but for example, highlighting links in the terminal does not seem to me to be the most important thing.

Keyboard shortcuts

Another very useful feature is the setting of keyboard shortcuts. You can find it in the settings in the Keymap menu. To change this setting, click on the folder, select the function and click on the pencil icon. Then just select whether you want to delete or add the action, or specify shortcut keys.