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

Atom, Recommended packages for all genres

atom image

Here are some recommended packages for the text editor Atom. The packages introduced here can be used commonly regardless of the genre.

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

Atom packages recommended for all genres

The Atom editor comes with a variety of useful packages for each programming language and purpose.

In atom, there are two main methods.

  • Using Integrated Development Environments (IDE)
  • Using the linter

These are the two most common ones. There may be other ways to do this, but there is a lot of information out there and just searching for it can be tiring.

Again, we will focus on these two. There are also many packages that can be used across all genres and regardless of the type of programming language.

Here is a list of some of them by type.

Integrated Development Environment (IDE)

The first thing I would recommend is the atom integrated development environment (IDE).

It is a compilation of the minimum functionality from the highly functional IDE that was originally developed by Facebook.

This is the official atom plugin.


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. You need to install plugins specific to each programming language.

The basic functions of the atom-IDE are rich, and in addition to this, there is a debugger and compiler.

There is nothing else you need. I wrote about atom-IDE in detail before, so please refer to that.

So I recommended it first.

I'm going to introduce various packages other than atom-IDE, but they often overlap with the basic functions of atom-IDE-ui. I will mention the overlaps as I introduce them.

no image person
No, no, no. I'm gonna create my own environment!

If you think this is the case, please refer to this page. Also, it can be used as a complementary feature of the IDE, so please refer to that.

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

I used to use a collection of plug-ins, but I switched to an IDE.

I use the IDE for the basics, and use other plugins to fill in the gaps.

The atom-IDE does not support WordPress. I switch to "linter + something" environment only when I develop PHP for WordPress.


In the last ten years or so? Automation has advanced rapidly in the development of programs.

  • Automatic code checking
  • Automating tests with tools
  • Evolution of development integration environments (e.g. Eclipse)
  • etc…

I miss the days of programming with a simple text editor when such an environment was not yet available. On the other hand, I never want to work in that environment again.

Aside from my personal impressions, these useful features are also available as packages in the Atom editor.

Here are the five types of packages.


This is a tool for static code checking of programs. Static code checking inspects whether a program is written according to the rules.

You cannot use linter by itself. You need to install the linter package for each programming language separately.

linter-php, linter-python, etc.

With linter, all you have to do is install and configure the package, and the tool will run automatically.

Any coding errors will be underlined in red, and the errors will be listed in a window that appears below the editor.

This allows you to focus on programming without worrying about coding mistakes.

There is a capture of the linter in action in the article on building the WordPress environment. Please have a look.

It cannot coexist with the IDE. It has the same functions as the IDE's 'Code Actions' and 'Diagnostics'.

Until just a decade or so ago, you had to compile or actually run the program to see the mistakes.

Therefore, programmers in those days needed to be able to write fast and accurately without making coding mistakes. Of course, they remembered most of the rules of the program.

Static code checking is a tool that I was impressed with when it first came out, as it automatically points out the mistakes at the coding stage.

I'm so used to it now that I've forgotten how impressive it was.

Thanks to this, programmers don't need to remember the rules of the program perfectly, and can start writing by hazy memory.


linter's completion package, which lists the results of static code checking at the bottom.

It is a complementary package and requires linter. Of course, it cannot coexist with atom-IDE.


A package for formatting program code.

Program formatting is always necessary when creating a program that is easy to read and write.

It can also be used to restore a minimized HTML, CSS, or JavaScript program.

As you can see, program formatting is very important. However, it is very tedious to do it manually, and many people may skip it or put it off and never do it in the end.

This package will automatically perform the formatting of your program. It can be run by simply selecting it from the menu. It is also compatible with major programming languages.

It is recommended that you install it if you want to use it as an editor for programming.

The following is an excerpt from the introduction page of atom-beautify.

Beautify HTML, CSS, JavaScript, PHP, Python, Ruby, Java, C, C++, C#, Objective-C, CoffeeScript, TypeScript, Coldfusion, SQL, and more in Atom

If you use an IDE, you don't need it. 'Code Format' is sufficient.


Displays a tree view of the functions, variables, etc. in the open file on the right side.

You can also jump to the declaration destination. This is a must-have package for anyone who does programming.

It is the same function as the IDE's 'Outline' and is unnecessary, but in PHP, the IDE's 'Outline' does not work properly.

I use it as a complementary feature of the IDE.


It jumps to the place where the function or constant is defined. You can jump to any file in the project, including open files.

If you use an IDE, you don't need it. Same as 'Definitions (plus Hyperclick)'.


This is a package to automatically enter the end of tags for markup languages such as html and xml.

I use it as a complementary feature since it is not available in the IDE.

Input completion

When programming, input completion is a feature that cannot be ignored for work efficiency.

Each time you type one of the characters, a list of possible inputs that you might use, such as methods, class names, tags, etc., will be displayed for you to choose from.

"I don't need that!" Aside from the expert, most people will want to use it.

Here are two examples.


When you specify a relative path when coding a program, do you not lose track of the path position by repeatedly inputting '../' ?

autocomplete-paths is a package that provides input completion for relative paths. It automatically shows input suggestions when you are writing relative paths.

It is recommended to install it as mandatory.

The IDE has an autocomplete function, but I don't think it's working. I'm using it as a complementary function for now.


Displays a picker to intuitively select a color when specifying a color, such as rgb.

It is not in the IDE. I use it as a complementary feature.

Terminal editor


This is a package to control text editing with vim commands. This is a useful package for people who frequently work on servers.


This is an extension package for vim-mode-plus. You can use vim command modes such as ':w', ':q'. You can also do batch replacements.

There is no vim command in the IDE. I use it as a complementary feature.

UI (visualization to make it easier to understand)

The packages I am about to introduce are not absolutely necessary for programming.

This package makes it easier to work visually by making the view tree of the Atom editor easier to read, highlighting the cursor, and so on.

Here are the 5 packages.


Use icons to represent different file extensions in the view tree and tabs.

At first glance, it seems to be a package for the sake of looking good as a design. However, when doing development work, being able to determine the type of file just by looking at the icon increases work efficiency.

I'm not saying you must install it, but I do.

It is not in the IDE. I use it as a complementary feature.


This is a package to highlight (display prominently) the line where the cursor is now.

This is a modest but useful plugin. It is recommended for people who concentrate on programming.

If you use an IDE, you don't need it. It has the same functionality.


This package highlights the same string as the selected one.

This is also plain, but since we use variables in programming, we can check for misspellings at a glance.

If you use an IDE, you don't need it. This is the same function as 'Code Highlight'.


Displays a minimap at the right edge of the text area. This is useful when the cursor is too large to move.

It is not in the IDE. I use it as a complementary feature.


The minimap is not very useful except when selecting a destination. This package automatically hides the minimap for that purpose.

This package will be hidden when the mouse stops scrolling. It is then displayed when the mouse is scrolling.


In this article, I have only introduced the minimum required package. I also introduced the two main patterns.

  • Using the IDE
  • Collect individual packages outside of the IDE (mainly linter)

Here is a list of the packages introduced in this article.


Choose either IDE or other. The following is a list of common packages that can be used regardless of which you choose.

The rest is up to you.

If you install too many packages, Atom becomes sluggish and useless.

There are many useful packages available, so you should decide on one plugin for similar functions.

Be careful not to install too much.

In addition to the ones introduced, some of you may need an environment to run programs on Atom.

However, this is a personal preference, and I have left it out of the introduction because it can be done by simply launching a command prompt (or Power Shell) on Windows or a terminal on Mac.

Also, if you need a full-fledged execution environment, it is much better to prepare a separate virtual environment (such as Virtual Box).

It's just my personal opinion, but I haven't found any superior atom packages than these so far.

If you're not sure, use the IDE for now; you're the one who knows that you'll need features other than the IDE, so don't worry about it.

As a minimum, set the environment variable PATH.

This is required for java, php, and python. When using node.js, you will need to use the npm command and other settings.

For packages like ide-php and linter-php, you can set the path in settings. The same goes for other packages that use commands.

However, it's not so easy to set it up every time, so it's better to add it to the PATH.

The default settings for these paths use the values in PATH.

Leave a Reply