テキストエディタ『Atom』を使用し始めた。まず設定したこと

※（注意）↑アイキャッチ画像がAtomかどうかは不明です

テキストエディタ「Atom」を使ってみようかと思います。今まで使用していたテキストエディタなどで設定していた内容や便利そうなものを一先ず設定してみます。設定した順番は記事の流れの通りです。

日本語表記に変更

まずは、これから色々と使用・設定していく上で、日本語表記に変更しておきます。
英語でもなんとなくは分かるのですが、少しでも使いやすいように日本語にしておきます。

上部メニュー「File」をクリックする
「Settings」をクリックする
「Settings」タブが開かれる。その中の左側のメニューの「Install」をクリックする
右側に「Install Packages」が開かれる。「Search packages」に『Japanese-menu』と入力する
しばらくすると入力欄の下に検索結果がリストで表示される。その中の「Japanese-menu」の「Install」をクリックする
しばらくするとインストールが完了する

これで設定も完了です。すべてではありませんが、ある程度日本語で表記されました。

スペースを目に見えるようにする

これまでに使用したテキストエディタでも全角・半角スペースを見えるように表示していました。プログラムを書いているとスペースが原因でエラーが出たりすることがあります。その際に見えるようにしておいた方がエラー箇所の発見が早くなります。

そもそもスペースを見えるようにしておけば、記述中に気付くので後々凡ミスで時間を費やすことも防げます。ほかにも、誰かのソースを触ったり、だれかのソースの不具合調査をする際にもたいへん助かります。

半角スペースを可視化する

※日本語設定済なので、以降日本語表記で説明します

上部メニュー「ファイル」をクリックする
「環境設定」をクリックする
「設定」タブが開かれる。その中の左側のメニューの「エディタ設定」をクリックする
右側に「エディタ設定」が開かれる。少し下にスクロールする。すると「不可視文字を表示」とあるので、チェックする

これで設定完了です。改行等の文字も可視化されました。

一つ不思議な感覚だったのが、行内の文字と文字の間のスペースは可視化されないんですね。
下記画像を見てみてください。「 — — 」と1行に書いているのですが、最初と最後のスペースは「・」で可視化されていますが、「—」と「—」の間のスペースは可視化されていません。

他のテキストエディタでは文字と文字の間も可視化されていたので、違和感がありました。後で調べてみますが、この方が見やすい場合もあるかもしれませんね。

全角スペースを可視化する

上部メニュー「ファイル」をクリックする
「環境設定」をクリックする
「設定」タブが開かれる。その中の左側のメニューの「インストール」をクリックする
右側に「パッケージのインストール」が開かれる。「Search packages」に『show-ideographic-space』と入力する
※「テーマのインストール」が開かれた場合は、「Search packages」の右側にある「パッケージ」をクリックしてください
しばらくすると入力欄の下に検索結果がリストで表示される。その中の「show-ideographic-space」の「インストール」をクリックする
しばらくするとインストールが完了する

これで設定完了です。全角スペースが可視化されました。

半角スペースとは異なり「—」と「—」の間のスペースも可視化されています。

テーマの変更

入力画面はもう少し黒よりではっきりした色の方が好きなので、テーマを変更します。調べてすぐに「monokai」という定番テーマを発見しました。これに即決です。

上部メニュー「ファイル」をクリックする
「環境設定」をクリックする
「設定」タブが開かれる。その中の左側のメニューの「インストール」をクリックする
右側に「パッケージのインストール」が開かれる。「Search packages」の右側にある「テーマ」タブをクリックする
※「テーマのインストール」が開かれた場合は、ここ「4」の手順は不要です
右側に「テーマのインストール」が開かれる。「Search packages」に『monokai』と入力する
しばらくすると入力欄の下に検索結果がリストで表示される。その中の「monokai」の「インストール」をクリックする
しばらくするとインストールが完了する

これでテーマ「monokai」がインストールされました。次にテーマを設定します。

「設定」タブの中の左側のメニューの「テーマ」をクリックする
右側に「テーマの選択」が開かれる。「シンタックステーマ」が『One Dark』になっているので、『monokai』に変更する

これで設定完了です。

↓

可視化表示をもう少し見やすく

可視化した部分ですが、テーマの変更で見やすくなりましたが、もう少しくっきりさせたいので全角・半角スペースの色を変更します。

上部メニュー「ファイル」をクリックする
「環境設定」をクリックする
「設定」タブが開かれる。その中の左側のメニューの「テーマ」をクリックする
右側に「テーマの選択」が開かれる。最初に『Atomはスタイルシートを編集してスタイルを変更することもできます』とあるので、その「スタイルシート」をクリックする
「styles.less」が開かれる。一番下に下記ソースを貼り付ける
※「#777」を違う色に変更すると色が変わります。とりあえずコメントと同じくらいの色味に変更

// 半角スペース
atom-text-editor::shadow {
  .invisible-character {
    color: #777;
  }
}

// 全角スペース
atom-text-editor, atom-text-editor.editor {
  .highlight.ideographic-space {
    .region:after {
      color: #777;
    }
  }
}