Atom Visual Studio Code

Atom One Dark Theme. VSCode Theme based on Atom's One Dark theme. Best rated One Dark theme port in the marketplace, features full Workbench theming. Eliminate context switching and costly distractions. Create and merge PRs and perform code reviews from inside your IDE while using jump-to-definition, your keybindings, and other IDE.
Visual Studio Code is a code editor redefined and optimized for building and debugging modern web and cloud applications. Visual Studio Code is free and available on your favorite platform.

How To Use Visual Studio Code
Atom Live Server Anything For Visual Studio Code
Visual Studio Code Vs Atom Vs Sublime
Atom Visual Studio Code Comparison

Visual Studio Code vs. Atom: Performance. Visual Studio Code fans point to its performance in comparison to Atom and other Electron-based apps. Electron apps have won a reputation for sluggish overall performance and slow startup times across the board, but the Visual Studio Code. Extensible, cross-platform text editor with a rich ecosystem of plugins and themes. Visual Studio Code Theme. Visual Studio Code Theme for Atom. Based on Flat Simple Dark Theme. (The syntax theme used this screenshot is customized Railscast). Helvetica Neue Font.

This article compares the Atom and Visual Studio Code editors based on features and functionalities. Comparing these two text editors will enable developers to choose the editor they would love to use depending on their requirements.

Introduction

There are plenty of code editors, but we will review Atom and Visual Studio Code editors in this article.

These source code editors tend to increase the developer’s productivity by providing different plugins and components. There are various features such as code-snippets, syntax highlighting, preview options, compiling, and debugging.

How To Use Visual Studio Code

Atom

Atom is a free and open-source text editor developed by GitHub. It works across Windows, Linux, and Mac OS. Currently, Atom is at version 1.52.0. It lets you easily customize every aspect of it to speed up your workflows. Atom uses a framework called Electron. Electron is a JavaScript framework that enables building cross-platform desktop applications.

Atom is built using web technologies such as: HTML, CSS, and JavaScript, making it very flexible and hackable. If you know those technologies, extending Atom is very easy. Atom features are built-in packages.

Developers built Atom code/text editor with packages installed or written to be added if needed. There are over 5,000 packages to choose from and over 3,000 themes.

Atom can be used be developers productively without having to use a configuration file. Atom comes with eight syntax themes after installation. If none of the pre-installed themes amuses you, it’s also possible to install customized themes from Atom.

Developers can create interactive and responsive web applications with the Atom source code editor. Learn more about Atom here

How to use Atom text/code editor

To use the Atom Code editor, you first need to install and download it from the Atom home page.

After clicking the download button, the Atom.zip file should appear in your downloads. Extract or Unzip the Atom file. Double click the Atom setup and follow the prompts in the Windows, Mac OS, and Linux installer to get started.

Once Atom is installed, it’s crucial to create an organized folder system. As the number and your projects grow, it becomes easier to figure out what a particular file contains and where it goes.

Atom gives you a welcome guide when you first open the program. Going through the welcome guide before starting your project is vital. First, know where to save your projects. You can name your primary folder for Atom files “Projects.” Every time you start a new project, create a folder inside your project’s directory. You can start coding after setting up your file structure. Also, make sure you save your work often to avoid losing it.

Visual Studio Code editor

Visual Studio Code is a lightweight, powerful, and fast development tool.

VS Code is an open-source code editor developed by Microsoft in April 2015. There is no payment required to use VS Code Editor.

Since VS Code uses Electron, it is cross-platform. It runs on Windows, Mac OS, and Linux. Electron is built using Node.js, and it has built-in support for JavaScript and TypeScript. VS Code is also built using web technology such as: HTML, CSS, and JavaScript.

Visual Studio Code supports other languages such as Java, Python, PHP, C#, and C–. It comprises thousands of extensions that enable debuggers, more languages, commands, themes, etc.

How to use Visual Studio Code editor

To get started, download VS Code editor from Visual Studio home page.

Go to the site and download the latest version of the editor. Currently, it is at V1.51. After installing the editor, you will see the welcome screen guide.

The activity bar on the left with icons give you access to:

Explorer
Search
Source Control
Debugger
Extensions

At the explorer, you can go through the project files and where this will be where code writing and editing takes place. The search icon is used to find files and information. The Source Control icon allows you to initialize a Git repository and manage your projects. If you click the extension icon, you can install and manage extensions. VS Code comes with many integrated built-in features. You can learn more about Visual Studio editor here.

Atom vs. VS Code: Tabular Comparison

Let’s have a glance at the features offered by Atom and VS Code text editors.

Category	Atom	Visual Studio Code
Released on	February 2014	April 2015
Developers	GitHub	Microsoft
Supported by	Windows / Linux / Mac OS	Windows / Linux / Mac OS
License	MIT License	MIT License
Extension Support	Yes	Yes
Cross-platform support	Yes	Yes
Syntax highlighting	Yes	Yes
Auto-completion	Yes	Yes
Inbuilt Version Control	Yes	Yes
Multiple selection editing	Yes	Yes
Price	Free	Free
Find and replace	Yes	Yes

Atom vs. VS Code: Features and Functionality Comparison

1. Configuration

With various extensions and customization also comes various configurations. The configuration of applications is fundamental. It determines the overall user experience with the editor.

Configuration in Visual Studio Code involved the use of a JSON file in the past, but a Graphical User Interface (GUI) replaced that recently. It’s simpler to use a GUI, and it works well. We maintain the level of abstraction while using a GUI over JSON file. GUI configuration design also makes it a little quicker and easier.

Use the following VS Code command menu to configure using a GUI:

On Windows navigate to, File > Preferences > Settings
On Mac navigate to, Code > Preferences > Settings

Here is an example of a Visual Studio Code Configuration with GUI.

While configuring with a GUI in VS Code, you can either use a drop-down menu, a check box, or an input to edit the settings.

To configure using a JSON file use Ctrl - Shift- P to navigate.

Then search for Preferences: Configure Language Specific Settings.

Select the language you want to use. It will open user settings.json.

You can now add your settings.

Here is an example of Visual Studio Code Configuration with JSON.

In Atom, you have GUI everywhere to edit instead of having a singular JSON file to edit. Atom users report there are performance issues during the configuration process such as sluggishness. This can happen when many extensions are installed.

The solution to these issues is doing away with any extensions when not in use, and maintaining a relatively small number of installed extensions.

2. Extensibility and customization

Atom and Visual Studio Code editors are extensible and customizable with third-party add-on packages. Both editors allow you to search extensions, install, and manage the extensions directly inside the program.

The one thing that differs between the two editors is:

In Visual Studio Code, themes are regarded as an extension like any other. In Atom, themes are in a different category of extension and are installed and managed differently.

3. Plugins and integration

Extensibility is where Atom and Visual Studio Code editors differ hugely. In the Visual Studio Code, plugins add more features and functionality to the program. The features that can be added include language support, themes, commands, Git integration, Markdown support, debuggers, and more.

Atom gives more power and functionality to plugins. Atom has many built-in and third-party plugins. This is where the editor functionality comes from, thus being a hackable editor.

This is an example of how to add plugins in your Atom editor.

4. Git Integration

Atom is a product of GitHub, and git integration is an in-built feature. VS Code also has built-in Git integration and has many GitHub related extensions.

Using GitHub enables you to share your project code, make changes, and create commits, create branches, switch branches, and collaborate with other developers.

In Atom, git integration is provided through navigating to View > Toggle Git Tab/ Toggle GitHub Tab.

In VS Code, Git Integration is provided through the GitHub Pull Requests and Issues extension.

5. Auto-completion

The autocomplete tool lets you view and insert possible completions in the editor using the Enter button. The autocomplete system works by looking through the currently open file for strings that match whatever you type. Both Atom and Visual Studio Code editors have the autocomplete feature.

In the Atom code editor, the autocomplete functionality is implemented in the autocomplete-plus package. VS Code comes integrated with tools for auto-completion, thus making the code you write more convenient.

Tools for auto-completion in VS Code include Emmet and IntelliSense.

You don’t have to install the Atom’s Autocomplete-plus package. It already comes installed with Atom.

This is not the case in VS Code, since Emmet and Intellisense add-ons have to be installed later.

Emmet is an essential toolkit for web developers. It makes HTML and CSS workflow faster.

Instead of typing, copying, and pasting Emmet can do most of that for you.

This is an example case of how Emmet can help, it will expand ‘a’ into <a href='></a>, and ‘h1’ into <h1></h1>.

6. Navigation

Code navigation in Atom and Visual Studio Code is a vital feature. You use keyboard shortcuts to navigate to files. Some code navigation shortcuts used in both Atom and VS Code editor are the same.

Below we have a few examples:

Command Palette

Ctrl - Shift - P / Cmd - Shift - P

File Access

Ctrl - P / Cmd - P

Navigate to a Specific Line

Navigating to a specific line, use Cmd / Ctrl - G, then type the line number.

There are keyboard navigation shortcuts that differ in the two editors, such as:

Multi-line Cursors

To select multiple lines in Visual Studio, hold option or Alt - Cursor.

In Atom, hold Ctrl - Cursor.

Navigating Symbols

In Visual Studio Code the keyboard shortcut is Ctrl - Shift - O / Cmd - Shift - O.

In Atom the key board shortcut is Ctrl - R / Cmd - R.

Code Folding

Code folding allows you to collapse and expand blocks of code. By folding code, you can concentrate or focus on certain sections because you see less code on the screen.

Atom Live Server Anything For Visual Studio Code

In Visual Studio Code use Cmd/Ctrl - Shift-[to fold code and Cmd/Ctrl - Shift-] to unfold code.

In Atom use Cmd/ Ctrl - Alt - [to collapse and Cmd/Ctrl - Alt -] to expand the block of code.

Conclusion

In conclusion, Atom and Visual Studio Code editors work well, and each editor has its advantages and disadvantages. The editor that fits and satisfies one developer’s demands may not satisfy the demands of another developer.

One developer may like how Atom functions, and another may prefer Visual Studio Code editor features better.

Visual Studio Code Vs Atom Vs Sublime

If you wonder which text editor is best for you, you can choose any out of both. Both editors have multiple features that meet a developer’s requirements.

It is also essential to use the editors to familiarize yourself with the features and shortcut keys.