How to choose the best JavaScript editor for web development

Tram Ho

Introduce

There are several options for developers looking for a good JavaScript editor that provides a more efficient and pleasant working environment.

Top JavaScript code editors share many of the great key features you can expect, including autocompletion (code completion), git integration, and plugin support. But those are the small things that can make an editor more suitable than an editor for a given developer.

When you're comfortable with the code editor and familiarizing yourself with the workflow will help you be more efficient, it can be difficult to switch the editor because you'll have to relearn the keyboard shortcuts to optimize the playback process. developments.

Now let's go over some of the most popular editor options.

Visual Studio Code

VSCode from Microsoft is free and fairly open source when installed. This is a practical editor for beginner JavaScript developers, in part because it comes preloaded with a good set of functions that require no additional. VSCode is also popular and may be ideal for advanced users who need to get started quickly.

Tip : Working on a large project in another IDE where the build process can take a while, I will often open a large JS output file in VSCode and adjust it to immediately check for changes in Browse before applying it.

Git is integrated into the IDE, but the integration is not as powerful as some other editors. For example, WebStorm users prefer a push / merge experience compared to VSCode.

You can install many additional features that you may need as extensions, including thousands. But not all of them are practical features. The code is mixed with extra features and utilities, which can take time to review and find the best options to add. If you've ever encountered a problem, VSCode has a huge user community; Someone has likely had the same problem and solved it.

If you're not ready for a full paid IDE with all the bells and whistles and aren't familiar enough with all the plugins and features you may need, then this is a good starting point.

Atom

Free Atom editor developed by GitHub. It is actually a dedicated version of the chrome browser converted into text editor and source code. Internally, it uses Node.js to support the plugin.

A lot of plugins are available for any feature you may want, but it's not as powerful as the box. You have to collect some plugins to build the dev environment where you can be as efficient as possible. If you are working with JavaScript, here are some Atom plugins needed to get you started:

  • atom-typescript
  • file-icons – to colorize and assign icons to different file types
  • atom-beautify
  • linter

Tip : Activating the package automatically saves edits when the focus is lost. The default is off.

Multiple users can work on the same file at the same time, each with multiple pointers on the screen, via the teletype plugin. You can use this to advise, encode, or collaborate. This feature sets Atom apart from other editors.

The git integration is well implemented, as you would expect from GitHub software. Also useful is a git-plus plugin that allows you to run git commands via keyboard shortcuts without using the git terminal.

Atom is so customizable that you can edit .less files to adjust IDE colors, which is great if you want to adjust every detail in your environment. You can run the .coffe script at startup which can be used to quickly change editor behavior.

You can write plugins using JavaScript based on well documented editor API. The ability to author your own functions and behaviors is nice to have, if needed.

The editing experience is very smooth and you can improve it with other plugins like minimap, but it takes an initial time investment to set it up with all the features you want. The benefit is that the features you do not need will not take time to load but slow down the experience. However, you may experience some transient slowness when downloading large files or switching tabs.

I initially liked the idea of ​​editing CSS styles to customize the IDE environment, or at least if I wanted to bring up my own themes. It sounds fun but in reality, coming up with topics that include lots of variables is not a trivial project. Luckily, there are many polished theme plugins available for download.

Atom is a solid editor and it will suit many programmers.

Sublime Text

Sublime Text is a paid editor but a free trial is available. It's not preloaded with many plugins to get started, but of course they are available to address any needs you may have. Some packages such as SideBarEnhancements to rename, move, copy and paste should probably be integrated into the core package but you can download it to enable this function.

Similar to Atom, it may take some time to set everything up. But once up and running, the experience was very smooth. Distract savings are also available.

Sublime Text is great because it is lightweight, helps load very fast, and works with large projects or files. The implementation of the "goto anything" feature stands out because it can be used with filenames, symbols and line numbers. Most IDEs offer similar features in one form or another, but being able to combine them and search with queries like "fileName @ functionName" is pretty cool.

Selecting a variable will select all occurrences of that variable and renaming it automatically renames all occurrences, so this common task becomes a very sensible experience.

In many ways, Sublime Text is very similar to Atom. But Sublime Text has the advantage with better performance and responsiveness.

VIM

VIM is also a free and very configurable text editor. Originally named vi and the first text editor developed for Unix, it was later expanded into a more feature-rich editor called Vim. It is available on most Linux distributions.

Vim has strong syntax highlighting and searching capabilities, and it is very lightweight so it can work well with even very large files. But it requires some work to set up and be ready to use.

The GUI is available, but it is not the default interface for Vim. Even enabling mouse support needs some action to make it work. The default is the keyboard mode that some people may prefer to access all controls and features through keyboard shortcuts.

That being said, Vim can be your perfect IDE if you take the time to learn the software and software and set up all the behaviors and features you want in it. If you have a time crisis and can't invest initially to attract everything, Vim may not be the best option for you.

WebStorm

WebStorm was developed by JetBrains and stands out from the rest as a true JavaScript IDE, as it has all the features built right outside. The development environment for different platforms like React, Angular, Vue.js, etc. is seamless. You can debug node scripts and run tests on the integrated server. You can also execute and debug npm scripts through the tree view. And it does not require any plugin to do this.

However, plugins are available for some rare features that are not directly integrated into the software. A plugin that is not included by default is the split editing preview / preview window. But for almost everything you might need was there. The great thing here is that you'll discover features you didn't know existed, and it's great to have them.

Files save automatically when you work on them by default. When you use another application that doesn't do this, manual saving will feel very rudimentary. Although it is not unique to WebStorm, the implementation will be a bit nicer.

Some people may not always trust the integrity of the ctrl-z status stack, but in WebStorm there is a VSC system built in, basically making a commit every time the file is saved. This is internal and separate from your git commitment. The file saves at least whenever the file content window is distracting. So if you go for a while without git commitment and have to go back or see the previous state after your last commit, then no problem.

Tip: The Ctrl-shift-up / down arrow allows you to move lines or blocks of code up or down while the editor automatically handles commas / brackets.

When you work on multiple-file projects, scrolling through the tree to search for a specific file can slow you down. But if one of those items is already opened and in focus, clicking the target icon will scroll the project tree view into this file. It's very convenient.

A few drawbacks are that it is not free. And sometimes, it can be a pig remembering with huge projects. It has gotten better over the years and file content is indexed internally to search for large projects very quickly. A recent update also includes a significant improvement in boot speed.

Performance tips

The selection / duplicate line shortcut (in WebStorm: ctrl-d, in Atom: ctrl-shift-d, but all can do) is one of my favorites and can save a lot. time in many coding situations.

This will appear over time when you have a list of items and have to modify the first character (or number) on each word line '.' to ',' but find-replace is not practical to use. WebStorm allows mouse clicks to place multiple cursors to make the same edits in multiple places. However, I find the following approach faster in some situations:

Place your cursor after the first time period and start making changes manually. Press backspace, comma, down arrow. There is a finger on each key, and the repeated press starts slowly then accelerates as you go. When you get the model, you can accelerate to where you will go through the list of 200 lines immediately. It is almost like playing a melody on the piano (as fast as possible). You can do this with numbered lists as well. Write the first line without numbers, duplicate the line 9 times, and follow the same procedure except have one finger press the next number each time. Start the next 10 lines with '1' and perform the same procedure adding one more digit after each '1'.

If you google [editor name], you can get a quick summary from the user about the configuration or key shortcut for the editor you are trying. Print it and read all the shortcuts to identify new features and functions you might not be exposed to.

Consider how the highlighted actions can improve your current processes. If you find one that helps, put a mark next to it so that the next time you encounter a situation, it's easy to recall. Even if you use it rarely and primarily from the start, having a quick reference on hand can reduce friction to learn more about your editor and can save conversion time. and looking for context in the future.

I go as far as finding a PDF version, printing and pasting pages for future reference, but for some bookmarks or screenshots may also work fine.

Conclude

If you are a beginner hoping to learn JavaScript and use a polished development environment to get started, VSCode is an obvious choice because it is easy to use with many powerful built-in features.

For more experienced developers who know exactly what they want, Sublime and Atom may be more appropriate because they will give you complete control over the developer environment. your. You can choose from thousands of features (packages) to install and keep your application up and running without the extra features you don't need or don't want. Spending time with each person will help you make the right choice.

For users with core competencies who feel at home using the keyboard alone working on projects, you can be more efficient with Vim than any other editor. Saving the time your hand moves between keyboard and mouse will increase, but it will take some time to master this process!

Finally, if you do not maintain a paid subscription and are not concerned about the memory or CPU restrictions of the developer, WebStorm will help you get up and running fast regardless of the JavaScript development platform, transcoder or build the processes you work with. It provides a very convenient environment to work.

I personally use WebStorm as my main IDE, but I still often use VSCode to edit individual or very large files when performance is a priority.

Source: https://www.freecodecamp.org/news/how-to-choose-a-javascript-code-editor/

Share the news now

Source : Viblo