This is my first article on the Monosus website. My name is Osaka, a coder at Coding Factory (hereafter abbreviated as CF).
This may seem sudden, but craftsmen's tools are interesting, aren't they? There are some that people from other industries would have no idea how to use, and they are used in ways that are different from everyday tools. When I hear the reasons for this, I am often impressed.
When we think of tools of the trade for coders, we think of markup-related languages and editors (it's no exaggeration to say that). In particular, there are many different types of front-end editors, each with their own unique features.
How do cutting-edge coders choose and use such editors? I was personally curious, so I asked all CF coders about it to investigate.
Here we will introduce the three most popular editors.

Kane-san is particular about customizing the editor
Editor Introduction
1. atom

The key point we focused on is the customization of the thick light blue lines to make the indentations easier to see.
- Easy initial setup with plenty of plugins
Since it is an open source editor made by Github , it is constantly evolving as users add themes and packages. I still use Atom .
The most convenient thing I use is the shortcuts. For example, when duplicating text, in a normal text editor you select the text, press "Ctrl+C" and then "Ctrl+V" to copy and paste, but in atom you can also use "Ctrl+Shift+D" (it's convenient to remember that D stands for duplicate) to duplicate the line below without actually copying.
Even if the total number of keys you press is the same, the time it takes to edit can change just by pressing the keys once. I think that paying attention to such small details is what makes them so skilled.
2. Dreamweaver

Changing the image name in the site management window in the upper right will change the path.
- It is useful for managing large-scale sites and bulk replacement.
- The function that changes the path when you change the file location is convenient.
Although the Adobe product " Dreamweaver " has many unique features, it is difficult to customize, so many people use it as a sub-editor.
The reason why it is suitable for large-scale sites is that, for example, when you move an image file to a lower level, the related paths also need to be rewritten, so the more files you manage, the more places you need to rewrite. However, with Dreamweaver, when you move an image, the related paths will be rewritten automatically.
Another particularly common comment was that senior coders said, "I've been using it for many years, so it's easy to use things I'm familiar with." It's great that craftsmen are attached to their tools.
3. PHP Storm (Web Storm)
- It is convenient because it has many functions that are included from the beginning without the need for plug-ins.
- The performance is stable and the environment is well-established, so it is easy to use Sass and Jade.
- There are various databases and so on, so it can be used as a backend in the future.
PHP Storm , a Jetbrains product, is very popular among the CF team. A certain coder, Mr. S, has been explaining its selling points like a salesperson, and it seems that more and more people are using it, saying, "I see, it's certainly useful."
In particular, not having to install plugins is quite convenient for users, as it eliminates issues such as "a plugin stopped working after I updated the editor itself," "two plugins are conflicting with each other and causing instability," or "I installed a lot of plugins and one of them caused the editor to slow down."
I thought I might as well try it out if it has so many great features, so I downloaded it right away. It's a paid app, but there's a 30-day trial period, so I thought it would be a good idea to use that to see how it works.

PHPStorm screen. My favorite "Monokai" theme is included as standard, so I feel at ease.
It certainly has a lot of default features!
By pressing Shift twice on the normal screen, you can quickly search for file names, class names, symbol names, shortcut settings, etc., errors are displayed as standard (other editors require a plugin to be installed), and code completion is possible with Ctrl + Space, which is convenient when entering image paths, making it extremely easy to use.
Sass auto-compilation is convenient!
Normally, to compile a Sass (SCSS) file, you have to use a dedicated tool or write complicated code, but when combined with PHP Storm's auto-save, it compiles your Sass immediately after you write it. You can say goodbye to the "Sass thing" of "Huh? I updated the page but it's not reflected... Oh, I didn't compile it."
The Japanese translation is not progressing very well...
Since it is not officially translated into Japanese, the default menu screen is all in English. It doesn't cause much trouble for everyday use, but it is a bit inconvenient when changing detailed settings.

I get particularly heated when discussing my favorite editors.
An editor for speed
As I listened to their stories, one thing they all had in common was that they chose their editors to master "how to write code as efficiently and quickly as possible." Shortcuts and various auto functions are ultimately just for the sake of increasing time efficiency. They only have meaning if you use them well. I felt the passionate spirit of the craftsmen in everyone's passion for creating good things quickly.
Start with a standard text editor
When I first learned coding at Kamiyama Monosasu Juku (first term), I remember using the standard Windows text editor, which didn't have any special features. I remember carefully pressing the space bar to write code, because the indent wasn't automatically applied when I pressed a line break.
Since typing in a CSS property name doesn't automatically produce suggestions, I had to memorize how to write the property by writing it down on flashcards, which was an analogue way of studying compared to the digital process of writing code.
However, the hard work was worth it as I gained a deep understanding of how writing would affect how the page would work, and I finally got the hang of it.
Also, I remember a memorable thing that Ito, a lecturer at Kamiyama Monosasu Juku, said about the editor: "Even if you have good cooking tools, it's meaningless if you can't cook. It's not good to rely too much on tools." When I use the editor's convenient functions, I always remember those words and try to use it little by little, checking, "Am I being used by the tool? Am I relying on it too much?"
No matter how good a function is, it's meaningless if you can't use it properly. From now on, I would like to master the editor of my choice so that I can work quickly and professionally.