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.
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.
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
Windows 10 Light,
- `Dracula a
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:
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.
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.
Setting the language version can sometimes be very important, and incorrect
settings cause unnecessary errors. You probably know that there is a big
=== 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
writing the arrow function:
The IDE tells us that there is no such thing in the language, so it is a mistake.
In WebStorm, we have several tools available that, for example, make development work easier or automate various, often long and annoying tasks.
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
- 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
+ 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":
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
press Alt + F2 and select the browser, an anonymous window
will open with an address similar to this:
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
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
- 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.
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