Atomでタブとスペースを変換する方法

こんにちは、ryohei(@ityryohei)です!

複数のエンジニアでウェブサイトを制作する場合、最初に規約に目を通してコーディングをスタートするのが一般的かと思います。ただ、複数のエンジニアが関わると、規約があってもインデントの付け方には慣れや癖がありますので、タブとスペースの混在はある程度発生します。その際にタブからスペースへ、スペースからタブへ変換するのですが、Atomではタブ⇔スペースの変換がデフォルトで用意してあります。ページ内のタブとスペースを一発で変換することができますので、その方法をご紹介したいと思います!

コマンドパレットを開く

コマンド・パレットはAtomの機能をコマンド入力で呼び出すことができる機能です。一部を入力するだけでコマンドの候補が表示されるため、コマンドの一部を覚えておくだけで効率的にコマンドを利用することができます。

コマンドパレットはメニューの「表示」から開くことができますが、下記のショートカットでも開くことができます。

Windows

Ctrl + Shift + p

Mac

Command + Shift + p

ショートカットを入力すると下記画像のようなウィンドウが表示されます。こちらがコマンドパレットになります。

atom-tabs-to-spaces-002

では早速、コマンドを入力してみましょう!開いたコマンドパレット上で「wh」と入力してください。

atom-tabs-to-spaces-001

「wh」と入力するとコマンドの候補がずらりと表示されます。Whitespaceから始まるコマンドが空半関連のコマンドになります。このコマンドを利用してタブからスペース、スペースからタブの変換を行います。

タブをスペースに変換する

タブをスペースに変換する場合は下記のコマンドを実行します。

Whitespace: Convert Tabs To Spaces

上記コマンドを実行すると、タブがスペースに変換されます。注意点として、上記コマンドはタブが連続で入力されていると一つのタブとして処理されるようです(私のエディタ設定が影響している可能性があります...)。例としては下記のように変換されます。

//Before(Tabs)
<div>
  <div>
    <div>
      <div>
      </div>
    </div>
  </div>
</div>

//After(Spaces)
<div>
  <div>
  <div>
  <div>
  </div>
  </div>
  </div>
</div>

一つのタブ入力につきスペースに変換したい場合は下記のコマンドを実行します。

すべてのタブをスペースに変換する

すべてのタブをスペースに変換する場合は下記のコマンドを実行します。

Whitespace: Convert All Tabs To Spaces

上記を実行すると下記のように変換されます。

//Before(Tabs)
<div>
  <div>
    <div>
      <div>
      </div>
    </div>
  </div>
</div>

//After(Spaces)
<div>
  <div>
    <div>
      <div>
      </div>
    </div>
  </div>
</div>

スペースをタブに変換する

スペース入力をタブに変換する場合は下記のコマンドになります。

Whitespace: Convert Spaces To Tabs

インデントはコードの内容を追う上で大事な要素となります。コーディング規約はプロジェクトごとに異なりますので、最後にスペースとタブを変換する癖をつけておくと良いかもしれませんね!

以上、Atomでタブとスペースを変換する方法のご紹介でした!

Adobe Creative Cloudを通常価格で購入していませんか?

Adobe Creative Cloud(Adobe CC)はAdobe社が提供するクリエイター向けのサービスです。WEB制作の幅を広げる「Photoshop・Illustrator・XD」Youtuberや動画クリエイターの編集作業に欠かせない「Premiere Pro・After Effects」など全20以上のアプリが提供されており、幅広いプランが用意されています。

コンプリートプランはAdobe CCの全20以上のアプリが使用できるプランです。多くのアプリが使用できるため定価で購入すると年間7万円以上するプランですが、デジタルハリウッドのAdobeマスター講座では「基礎動画教材+Adobe CC コンプリートプラン(12ヵ月)」がセットになって39,980円(税込)で利用できます。定価より安価にAdobe Creative Cloudのライセンスを購入でき、以降のライセンス更新も可能。動画教材で基礎スキルを習得できるので、入門する方にも便利な講座です。詳しくは下記のリンクからチェックしてみてくださいね。

Adobeマスター講座はこちら

おすすめの書籍