Send by LINE
B! Bookmarks in Hate-bu
Bookmarks in Pocket
RSS feeds

Turning the Atom editor into an IDE

atom image

This is how to turn the text editor Atom into an Integrated Development Environment (IDE). Well, it's not that difficult since you just need to install a package.

Compared to creating other program development environments, there are fewer packages to install.

This is written by a Japanese who can't speak English with the help of translation application. Sorry if it's not good.

What is a development integration environment (IDE)?

An IDE is a text editor that provides the necessary functions for program development.

  • Input Completion
  • Definition jump
  • Help functions
  • Debuggers
  • Compilers

In addition, some have Git operations, local servers, etc.

With all this, you can smoothly develop programs with a single text editor.

Atom also has an IDE package. This is a minimalist version of the IDE that was originally developed by Facebook.

The official Atom package.


Good point

  • All the functions necessary for program development are combined into one package, so there is no need to install packages one by one (No need to search for packages).
  • The process of installing and configuring packages for any programming language is almost the same.
  • You can start developing programs immediately.
  • Suitable for beginners and people who are not particular about their development environment.

Bad points

  • Internal linter is not compatible with WordPress.
  • Sometimes there are more useful packages for each function.
  • Packages with similar functionality may not be able to coexist; can't coexist with linter (it's a well-known package)
  • When you want a better environment, you become dissatisfied.
  • Not for people who want to create a development environment that fits their needs.

The atom-ide-ui is incomplete as an IDE by itself. It requires the installation of packages for each programming language.

It is distributed under the name 'ide-***'.

(*** is the name of the programming language)

In the package installation screen, search for "ide-" and you will find it, so you don't have to worry about it.

There are also frameworks such as Vue.js and packages such as React.js and Node.js.

Language Features

Busy Signal
Displays in the status bar (bottom part) when
something is happening to the atom.

(Not really necessary.)
Code Actions
A diagnostic function for programs.

If you are writing a program and make a
mistake, you will get a message instantly
telling you what is wrong.

An error mark will be displayed at the left
Code Format
Program formatting.

Select a program and run it with the right-
click menu to format it easily.
Code Highlight
When you hover the cursor over a variable,
function, or constant, other identical ones
will be highlighted (to make them stand out).

(Useful for misspelling variables, etc.)
A console that displays the results of
program execution, etc.
Hover the mouse over a variable, function,
or constant to see its description.

・Show explanatory comments for
functions, classes, etc.

・For variables and constants, display the
expression to which the value is assigned.

※ If you don't follow the rules for writing
comments, they won't be displayed
correctly. (javadoc for java)
Definitions (plus Hyperclick)
Definition jump (Ctrl+click).

Jump to where you are declaring variables,
constants, functions, and classes.

If the file is different, open the file.

"What was this class?" You can check it
immediately when you have a question.
Diagnostic function of the program.

Displays the contents of the bug in the
window below.

Also shows the location of the bug.
Find References
If you put the cursor on a variable,
function, or class and execute it with the right-click
menu, the window below will show you
where it was declared and where it
is being used.

It is best to use this before jumping to the
definition. Sometimes you can see so
much of the content that you don't need to jump.
A list of classes, functions, variables, etc.
of the open file will be displayed on the
right side.

Clicking on it will jump to the place where
it is defined.
(definition jump in file)
Signature Help (Experimental/WIP)Input completion.

When you enter a string, candidates for
variables, functions, classes, etc. are
instantly displayed so that you don't have
to enter them all.

It also prevents misspellings.

This is all the basic functionality. In addition to this, there is a debugger and compiler, so there is not much else you need.

  • If you are using an IDE, just install atom-ide-ui and ide-*** to start developing.
  • The rest of the functions will be added when they are needed.

Programming language pack

The atom-IDE is not meant to be just atom-ide-ui. This is because this package is a collection of only common features that can be used in any programming language.

To use it with programming languages such as PHP, Java, Python, etc., you need to install the respective language pack.

  • The name of the language pack is ide-***.
  • There are official atom and community-developed third party products.

Atom Official Package

C#Created based on Omnisharp
FlowMade by Facebook
Java Created based on Eclipse JDT
JSONCreated based on the VSCode JSON language server
TypeScriptCreated based on TypeScript server

You can also use the sister language JavaScript.

You don't have a major language!

You may think this, but since it was originally made by Facebook, there is a bias. Let's forgive that with a smile.

But each of them is based on a tool that was originally widely used. There is no lack of functionality.

I like the fact that Java is based on Eclipse JDT.

Eclipse is an IDE created by IBM, and nothing beats it for Java development, and Eclipse JDT is its core package.

Community Package - Third Party

What is lacking in the official version is supplemented by third party products. They are introduced on the official website, so they are highly reliable.

BashA shell command adopted by Mac and Linux.
DockerThe most popular OS virtualization technology, which
creates a number of virtual PCs within a PC.
FortranA well-established programming language used for more
than 20 years in the field of science and technology.
Haskell-hieUsed in mathematical and scientific technology.

Good at parallel processing.
I don't know much about it because it is mostly used in
academic fields.
PHPPHP is a programming language so familiar to web
developers that it is often referred to as the "PHP of
the web.
PowershellA shell command that is also used in Windows.
PythonOne of the fastest growing and most popular programming
languages in recent years.

AI packages are abundant.

It is also being used on the web, replacing PHP.
ReasonI'm not sure. I heard it's used in other countries, but
what about in Japan?
Rustsame as above
ScalaSince it can run in the Java execution environment, it is
positioned as a programming language that makes Java
easier to write and read.

Java is also evolving and becoming simpler, so there is a
point where people think, "Java is fine".
VueAmong the recent JavaScript frameworks, it is growing
as fast as Anglar and React, and attracting attention.


It's like a Chinese version of Anglar.
It is said to be simpler and easier to understand than

Huh? Some of you may be thinking.

Because the major languages are still missing: no C, C++, Swift, etc.? There are no Microsoft languages either.

Packs for the major languages can be found by searching for "ide-***" in the package installation.

Language packs for the atom-IDE are available for most programming languages from the official, officially recognized community, and other third parties.

Debugger Features

Basic functions of the debugger

The atom-IDE also has debugging features. As with the language packs, atom-IDE-ui contains only basic functions, so you need to install the package separately.

Launch/Attach UIUI for launcher and attach.

Debug launch settings.
Breakpoints + conditionalBreakpoints.

Mark where to stop the program by
simply clicking on the left side of
the source code.
Stepping (Pause, Continue, Step, Restart)Programs can be executed, paused,
resumed, or stopped at the push of
a button.
Threads (Running, Focus)Displays the status of a thread.

Used for multi-threaded
debugging; not necessary for
single-threaded applications such
as PHP.
Stacktraces & in-memory source viewsStack trace.

Memory state display.

Displays which part of the file the
program is executing.

Displays the amount of memory
used by the program.

Used to investigate memory leaks,
Scopes & editable variables views
Displays the values of variables.

There are also editing functions,
such as adding variables you want
to see.

(If the debugging engine supports
Watch expressionsView the values of variables.

You can also add variables, and
change or delete values.

It is similar to Scopes & editable
variables views.
Console + ReplA console that displays the
standard output of a program.

Individual Debugger Packs

Node DebuggerNode.js debugger.
Unofficial atom, made by facebook.
Python DebuggerPython debugger.
Unofficial atom, made by facebook.
React Native DebuggerReact debugger.
Unofficial atom, made by facebook.
C/C++ GDB DebuggerC/C++ debugger.
Unofficial atom, made by facebook.
OCaml DebuggerA debugger for the programming
language ML.
Unofficial atom, made by facebook.

The individual debuggers are all made by facebook for now, and are not official for atom.

The color of facebook is amazing, and I guess these are the languages and frameworks that are being developed within facebook.

React is a JavaScript library developed by facebook. We will see more facebook colors in the future.

There is no debugger for Java. Thus, even major languages may not have dedicated debuggers.

As for Java, since the language pack is based on Eclipse JDT, the basic features may be enough for you.

Please try this once. If not, there are other debugger packages that you can use.

However, I'm not sure if it will work because of the compatibility with the atom-IDE.


The atom-IDE has a lot of features, but the number of packages installed is small.

  • atom-ide-ui
  • Language packs for ide-***
  • Debugger
  • Use non-IDE packages for what's missing.

If you are a beginner in program development, the atom-IDE (+ debugger) will suffice since you will not be able to use the various functions.

There are many high-performance packages in atom, so I recommend it to those who find it difficult or troublesome to find them.

I would recommend the atom-IDE to anyone who wants to develop programs with atom.

Leave a Reply