Swimm developers discussing devtools – not uncommon at all. And our guess is that the debate for picking the best devtools will all be part of our conversations/discussions.
We know that most developers have a clear IDE preference, and it’s no different from our dev team here at Swimm. But what we know is that even with an IDE favorite, switching IDEs is not at all uncommon. On the ground, our most frequented choice of IDEs at Swimm is Visual Studio Code (VS Code) and WebStorm.
Pros and cons for VS Code and WebStorm
VS Code is free – an open-source Text Editor, created for modern web and cloud applications by Microsoft nowadays on any platform – Linux, OSX, and Windows. The big wins: VS Code is customizable, multi-language, fast, and lightweight, combining modern editing and debugging with code assistance and navigation.
WebStorm is an intuitive, paid, and licensed JavaScript IDE created for front-end development and server-side JavaScript by JetBrains. WebStorm’s highlights: it’s a highly comprehensive and intelligent IDE for easy running, debugging, and unit testing of Node.js apps, plus it has good code refactoring and auto importing.
The pricing factor VS Code and WebStorm
Pricing might discourage some developers from using WebStorm altogether, as it requires a monthly or yearly subscription fee after the 30 day trial period.
Being open-source, VS Code takes price out of decision-making altogether. Free is free.
Other considerations for VS Code and WebStorm
- WebStorm has most features out of the box, whereas with VS Code, you’ll probably need to install some extensions manually to test runners, get advanced language specific features etc.
- WebStorm provides amazing Git merge tools with great visualizations of the Git diff changes. This makes merging complex changes and resolving conflicts a lot easier.
- WebStorm automatically tracks all file changes out of the box, enabling inspection of file histories, directories, and rollbacks.
- Both VS Code and WebStorm quickly format files on save, are customizable, and work well with autocomplete, debugging, and documentation.
Going open-source with fast, lightweight VS Code
VS Code users are, in our experience, committed to the world of open-source. And for good reason, if you are a fan of open-source.
- The open-source environment of VS Code enables collaborative work, connection, and accessibility to change. The disadvantages? It can be buggy, miss features, or have inconsistencies between languages. Still, many developers – especially developers not working in a large company – prefer open-source, especially when price is an important consideration.
- Performance is a clear advantage of VS Code. It feels fast upon general use, has fast startup time, and quick file editing. Powered by JavaScript and HTML, the basis for VS Code is Electron whereas WebStorm is developed in Java. A common complaint is that WebStorm feels slow.
- With respect to UI Design, VS Code is very minimalistic but can be customized by users with ready-to-use themes to help developers make it look the way they want. In contrast, WebStorm is packed with features. Users can customize to hide features, buttons, menus, and shortcuts, but it can take time to understand and adapt to all the options.
- VS Code is also very lightweight, which makes it good for remote development, quick prototyping, and larger business applications. VS Code extensions add support for GIT enhancements, inline errors, and better comments.
Maximizing code inspection and refactoring with WebStorm
If you’ve got the budget to pay for an IDE, WebStorm has clear advantages.
- WebStorm provides static code analysis and smart hints that are a big benefit in refactoring, with suggestions for corrections and improvements. Duplicated code hints promote code reusability and best practices. Dead code hints promote better code style, simplicity, and readability. This makes WebStorm a good choice for JavaScript/TypeScript code refactoring, inspection, and new feature development.
- WebStorm also indexes your whole project, which admittedly can be a disadvantage if you want to just open your IDE and go to work immediately. But for many of us, indexes are an advantage (and worth the wait) because it detects your unused methods and lets you know if exported variables aren’t used anywhere in your project for safe deletion. In addition, you can move functions and variables from one file to another, whereas VS Code only uses the current file. With Angular CLI integration, WebStorm provides support for editing Angular templates. It also helps with code completions for variables, pipes, and template reference variables.
- Both VS Code and WebStorm enable refactoring by renaming symbols and converting function parameters to a single object. But WebStorm extracts a block of code into a function and converts a block of JSX into a React component; it is robust and flexible for both language and runtime errors.
Integrating documentation into your CI workflow
Since we’ve already shared that we use both VS Code and WebStorm at Swimm, it will come as no surprise that both can integrate documentation alongside code with IDE extensions.
Currently, Swimm’s plugins support documentation that was created on the Swimm app only. In the future, IDE plugins on Swimm will support the creation of documentation outside the app as well.
Bottom line
On the VS Code vs. WebStorm IDE debate, most of us have an opinion. There’s no debate in that sense; developers have a clear preference.
The key advantage to WebStorm is that it is a full-blown IDE for a great out-of-the-box experience. It is favored by those used to a complete IDE or doing big refactoring projects. VS Code is a favorite in the open-source community but requires additional installations for full IDE functionality. Swimm has both VS Code and WebStorm plug-ins to enhance your CI, Github, and workflow with a new knowledge-sharing experience for complex debugging, code boot camps, and easy onboarding.
For VIM IDE fans, we leave you with this:
There’s a lot going on at Swimm, and if you want to see why everyone is talking about Continuous Documentation, sign up for a free Swimm demo and learn how Swimm integrates Continuous Documentation into the development workflow so that code-coupled docs in your CI and IDE are always up to date.
