https://idea-hack.com/blog/115477/
Atom エディターで全角スペースを表示させる方法

Atom エディターで全角スペースを表示させる方法

エディター上で全角スペースを記入してしまうと、後々不具合に遭遇することがあります。主に sitemap.xml など、通常のページとドキュメント宣言が異なるページで発生しますので、日々の仕事の中で自然と気づく物ではないので注意が必要です。

私はAtomエディターを好んで使いますが、Atom には標準で全角を表示する機能が備わっていないので、外部モジュールを導入する必要があります。

Atom エディターで全角を表示する方法

Atom エディターに全角を表示するモジュールを実装して、ソースコード上の全角スペースを可視化して、日本語環境特有の不具合を防止する方法を紹介します。

Step 1
全角スペース表示パッケージをダウンロード
Show Ideographic Space Packageをダウンロードする

全角スペースを表示する外部モジュール[Show Ideographic Space Package]をインストールします。

ページを開いて右上枠の[Install]をクリックします。

KAZU

Atom エディター内の [Atom ▶ Preferences ▶ Install ]からもインストールが可能です。

Step 2
全角スペースが可視化されているかを確認
全角表示の時は□マークが表示される様になる

正常にインストールが完了していると、全角スペースが「☐」で表示されているはずです。

これで、全角スペースによる不具合を避けることが可能です。

Step 3
(おまけ)全角スペースのスタイル変更

「初期状態の全角スペースの表示では見にくい」という方はスタイルシートを編集して見た目を変更することが可能です。

~/.atom/packages/show-ideographic-space/styles/show-ideographic-space.less を開いて下記コードを編集してください。

CSS
atom-text-editor, atom-text-editor.editor {
  .highlight.ideographic-space {
    .region:after {
      color: #800000;
      content: '×';
      background-color: #CCCCCC;
    }
  }
}