IDE (Integrated Development Environment) is an integrated, unified development environment that is used by developers to create various software.
There are many IDEs that have been on the market for a long time and have gathered their audience. Also, in addition to universal development environments, there are various specific editors for a specific technology (for example, HeidiSQL or phpMyAdmin for databases).
Therefore, novice developers face the question: which editor to choose? In this part, we will talk about the editors used by our frontend developers.
This article will complete a series of articles regarding IDEs.
VISUAL STUDIO CODE
Daniel, JS-developer
Why this IDE
VS Code is a code editor with the necessary features for developing web applications. The IDE is developed and maintained by Microsoft and is very popular among web developers due to its simplicity, functionality expansion and customization.
The main factors that influenced my choice:
- Simplicity. Due to its extensible architecture, VS Code can compete with other more advanced IDEs while remaining a compact and convenient development environment. It also has good performance and starts quickly;
- Built-in Git integration that automatically hooks up your project’s configuration and allows you to work with the version control system through a convenient graphical interface without entering commands in the terminal. It is possible to compare changes in files, view history, etc.;
- A large library of plugins for expanding functionality and customization: advanced debugging, code formatting, support for programming languages, many interface design themes;
- Ability to synchronize settings environment to work on another computer.
Disadvantages
Some editor functions are configured only through changing text configs, and not through the interface. It can be slow due to the large number of plugins so remove the ones you don’t use. Sometimes there are problems when working with large files.
Alternatives
Considered WebStorm as an alternative. This editor has more advanced code analysis, refactoring, and debugging capabilities and is suitable for developing with more complex environments.
Suggestions
That’s what will come in handy in development:
- Git Lens – extension for code visualization in Git;
- ESLint – linter for JS that reveals problem areas in the code;
- Prettier – extension for automatic code formatting;
- ES7 React / Redux / GraphQL / React-Native snippets – a set of snippets. Create most used code fragments when entering keywords;
- VS Code Great Icons – 100+ icons for files that are displayed in the explorer panel.
Mike, JS-developer
Why this IDE
I use VS Code at work. This IDE is becoming more and more popular; the community is growing, and it gives good technical support – program development and the emergence of new useful plugins. When choosing an IDE, most of all I paid attention to ease of use, the possibility of expanding functionality and the overall feeling of working.
VS Code can be easily and quickly installed on any OS due to its compactness and lightness. And it also has a convenient and visual file tree.
Disadvantages
Not all the functionality that is needed for frontend development comes “out of the box”, for example, the code formatting function. This makes it difficult for novice developers as the IDE needs to be configured manually.
Alternatives
For frontend development, the main choices are Atom, Sublime Text, Brackets, and VS Code. Each has strengths and weaknesses, but in general the differences are not so critical.
Sublime Text works best with large amounts of text, unlike, for example, Atom, where large files can take more than 10-20 seconds to load and lag brutally when viewed. In all other editors, including VS Code, files are processed quite quickly.
Suggestions
Learn the editor hotkeys, they are very good at speeding up development. The full list of abbreviations can also be viewed in the IDE itself: “Code” -> “Settings” -> “Keyboard Shortcuts” (“File” -> “Preferences” -> “Keyboard Shortcuts”).
WEBSTORM
Maria, layout designer
Why this IDE
In my work I use WebStorm from JetBrains. At first, the interface seemed rather complicated, but I quickly got used to it. Due to its functionality, the IDE covers most of the needs in the development of simple and fairly large projects.
When choosing an IDE, the following parameters were important for me:
- Built-in terminal;
- Autocompletion (HTML, JS, LESS / Sass);
- Code checking for errors (ESLint, Stylelint);
- Support for version control systems.
A couple of WebStorm features:
- Convenient code navigation – saves a lot of time. For example, just press Ctrl+Click to jump to the definition of any method, function, or variable;
- Local history of changes. It will help to return that part of the code that did not have time to get under the VCS change history. Such cases happen even if the project uses a version control system;
- Individual setting of the working environment – themes, keyboard shortcuts, arrangement of elements;
- Automatic preset formatting. Helps maintain a consistent code style.
Disadvantages
Of the shortcomings, I would note that the environment noticeably freezes if, in addition to the IDE, some other heavy programs are running on the computer.
Alternatives
For simple tasks, I periodically return to the Atom text editor – suitable for small projects without assemblers and any additional development tools. It is suitable for beginners, while I would recommend WebStorm for more experienced developers.
Suggestions
I didn’t install additional plugins. Personally, the basic functionality of WebStorm suits me more than a little.
On this site you can get acquainted with the IDE itself. And I recommend learning hotkeys.
SUBLIME TEXT
Maximilian, layout designer
Why this IDE
I work in Sublime Text – it’s pretty fast, easy to customize, I like it visually, and it suits my tasks (layout and writing JS-code). When choosing an editor, I paid attention to what options it has for customization, how convenient it is to work and whether it is possible to install plugins.
Disadvantages
The main disadvantage is that not everything comes “out of the box”, so you have to install a lot of plugins before start using it (for example, AutoFileName, ColorHighliter, Emmet and TerminalView).
Alternatives
The best alternative is VS Code. It is more functional and everything you need comes out of the box. But my sense of beauty suffers when I use it. Sublime Text looks much better visually.
Suggestions
The first thing you need to install is the Package Control package manager, and then customize the editor for your tasks. I also recommend visiting specialized websites, you will find a lot of configuration material there.
Carl, layout designer
Why this IDE
When choosing an IDE, I paid most attention to lightness and user interface. The layout does not require a large amount of functionality, so I did not see the point in installing something complex and gluttonous.
I settled on Sublime Text – this is a lightweight and convenient editor with a large number of plugins that make it easier to work and speed up the process of writing code.
Disadvantages
Inconvenient setup process and a huge number of plugins that need to be installed before getting started.
Alternatives
From alternatives I considered VS Code. But in general, you can write on anything as long as it is convenient for you.
Suggestions
Useful plugins:
- Emmet – adds the ability to create a large number of blocks by writing a short command and pressing the Tab button;
- AutoFileName – adds tips when filling in the path to the files;
- ColorHighliter – Highlights color codes.
In addition to these, there are a huge number of others, ranging from plugins for syntax highlighting Pug, SCSS and ending with plugins for working with Git.
BOTTOM LINE
If you are:
- JS developer – we recommend using VS Code for work. For alternatives, check out Atom, Sublime Text, Brackets.
- JS developer and looking for an IDE to work with complex environments – use WebStorm. The alternative is the same VS Code.
- Layout designer – consider the Sublime Text editor.
But the choice is always yours, just carve out the goals and objectives of your project and use the advice of our developers wisely when choosing an editor.
Good luck in your endeavors and see you soon!
