テキストエディタのAtomをインストールしたら最低限設定しておきたいアレコレ

コーディング・プログラミングを行う上でテキストエディタは必要最低限のツールです。Web業界で働く人にとってのテキストエディタは料理人で言う所の包丁であり、大工で言うところのノコギリ的な存在です。

最近は色んなテキストエディタの開発が行われていますが、僕はその中でもGitHubが開発したAtomというテキストエディタを使用しています。
2015年に正式版（バージョン1.0）が公開された比較的新しいエディタで、HTML・JavaScriptといったフロントエンドの技術を使用して作成されているので、それらの技術を使って比較的簡単にカスタマイズを行うことができたり、パッケージ（拡張機能）やテーマも豊富です。

2020年9月追記：現在はAtomではなく、Visual Studio Codeに乗り換えています。Atomと同様のElectron製のテキストエディタで、Atomよりも動作が軽く、パッケージもAtomにあるものはVisual Studio Codeにもほとんどあります。

現在の主流もVisual Studio Codeになっているので、いまから使おうとしている方はそちらをオススメします。

Webrandum

テキストエディタをAtomからVisual Studio Codeに移行しました

https://webrandum.net/visual-studio-code

自分はずっとAtomを使っていたのですが、最近MicrosoftのVisual Studio Codeに移行しました。今回はAtomからVisual Studio Codeに移行した理由や移行の時の設定をもろもろ解説します。移行の理由Atomは自分がWebの勉強を始めた頃からずっと使っていましたし、かなりお気に入りのテキストエディタだったのですが、今回移行を考えた理由が「動作が重かったから」です。前々からVisual Studio Codeが軽いという話を聞いていたのですが、根本的に使われている技術が一緒（AtomもVisual Studio CodeもElectronというライブラリで作られてい...

Atomのインストール

Atomは公式サイトであるatom.ioからアプリインストーラのダウンロードが可能です。僕はmacOSなのでこの記事はmacOS版を前提にして設定の仕方を紹介していきますが、AtomはWindows用・Linux用もあります。

mac版の場合は、ダウンロードボタンをクリックするとAtomのzipファイルがダウンロードされ、そのファイルを解凍するとAtom.appというファイルが入っています。このAtom.appをアプリケーションフォルダに移動させて[右クリック]→[開く]で開けます。

Atomを開く事ができればAtomのインストールまでは完了です。
最初はWelcome Guideが表示されます。次回以降表示させたくない場合は左のカラムの方の一番下「Show Welcom Guide when opening Atom」のチェックを外しておきましょう。

Atomを日本語化する

とりあえず最初にやっておきたい事はAtomの日本語化です。最初はメニューバー等が英語になっているのですが、これを日本語化するパッケージが公開されているのでそれをインストールする事によって日本語化します。

メニューバーの[File]→[Settings]をクリック、もしくは⌘ + , (カンマ)で設定画面（Settings）を開きます。
サイドメニューの一番下にある「＋Install」をクリックしてインストール画面を開き、検索ボックスに「Japanese-menu」と入力します。
入力出来たらEnterを押して検索します。ちなみに他パッケージを追加したい場合も同じ手順でインストール可能なので、この一連の流れを覚えておきましょう。

検索すると「japanese-menu」という下記のようなパッケージが表示されるので「インストール」ボタンをクリックしてインストールします。

インストールすると今まで英語だったサイドバーが日本語になっていたり、メニューバー等が日本語になっています。

基本的なパッケージのインストール

このまま最低限入れておくと便利なパッケージもインストールしてしまいましょう。とりあえずこれは入れておくと良さそうという基本的な機能のパッケージ5つを厳選しました。先程の「Japanese-menu」と同様に名前でパッケージ検索をかけると見つかります。

file-icons

Atomで開いたファイルの拡張子を読み取り、それぞれファイルに適したアイコンを横に表示してくれるパッケージです。Atomではフォルダごと一気に開いてサイドバーに表示させる「Project」という機能があり、そこでのファイル判断も視覚的に分かりやすくなります。

とりあえず入れておこうか。という感じのパッケージです。

minimap

minimapはファイルを開いた後に右の方に物凄く縮小されたコードが表示されるようになります。
コードの全体像を把握する。特に<li>タグ等が続くようなファイルをコーディングしている時などに、だいたいどこまで続いているのか分かったりしますし、minimap上をドラッグしてその場所に移動する事も出来ます。

autocomplete-paths

相対パスを入力する時に補完を行ってくれるパッケージです。imgタグのsrc属性なんか結構面倒だったりしますよね。
あとアンダーバーとハイフンの間違いやちょっとした入力間違い等で画像がうまく表示されなかったりすると初心者のうちは「なんか表示されない！」ってしまいますよね。

こうした入力補完系を使っておく事で変なところでハマらないで効率よく作業を進めたりします。

highlight-line

現在カーソルのある行を薄くハイライトしてくれます。
いまカーソルがどこにあるのか見やすくなりますし、自分もずっと使っていてあまりに馴染みすぎてデフォルトの機能じゃないと気が付きませんでした。
これもとりあえず入れておくと良いと思います。

highlight-selected

選択した文字列と同様の文字があればハイライトしてくれるパッケージです。下の画像は2行目の「speed」を選択しているのですが、8行目にある「speed」にもハイライトされています。

このように定義した変数がどこで使われているのか見たい時なんかに非常に便利です。これもデフォルトの機能で正直欲しいところ。

wrap-guideを無効化にする

Atomにはデフォルトで入っているパッケージがいくつかあるのですが、その中でも「これは別にいらないんじゃないか…」と思うパッケージが「wrap-guide」というプラグインです。
このパッケージがEnable（有効化）になっているとAtomの真ん中に線が一本入るようになります。

別にあっても気にしないという方はそのままでも何の影響もありませんが、気になるので僕は無効化にしています。
方法は環境設定の「パッケージ」から下へスクロールしていくと「wrap-giude」というプラグインがあるので「無効化にする」ボタンをクリックすればOK。

これで真ん中の線はなくなります。

エディタの設定

エディタ設定を少しいじるだけでAtomは劇的に使いやすくなります。
環境設定の「エディタ設定」を開き、今回は「インデントガイドを表示」「不可視文字を表示」「ソフトラップ」とお好みで「右端ガイドの位置でソフトラップ」にチェックを入れます。

それぞれチェックを入れることでどのように変化するのか説明していきます。

インデントガイドを表示

これはもう名前の通りなのですが、インデント（字下げ）をした時にどこからどこまでが同じ列なのか見やすくガイドを付けてくれます。文字で説明しても分かりにくいと思いますのでここは画像を見てもらいましょう。

ONとOFFを比較すると分かりやすいですね。
ONの時は字下げしたタグがどこまで続いているのか見やすいように、ガイド線がついています。

不可視文字を表示

名前の通り、スペースやタブ、改行などの本来は目に見えない透明な文字を薄い文字として認識できるようにしてくれます。
スペースやソフトタブは点々(・)で表されるようになり、ハードタブの場合は(>>)のような記号、改行は罫線のようなマーク(┐)でうっすらと表示されます。
ちなみに全角スペースは透明になりますので、全角スペースが原因でコードが動かなくなるというのを防ぐ事ができます。