WordPressやSymfonyのTipsを中心にアニメや日常の出来事について語ります。
メニュー

ソースコードのインデントを一瞬で自動整形するSublime Text 3のテクニック

この記事は約3分13秒で読めます

Sublime-Text-3-ReIndent
ゆっきー
ども、カフェブロガーの悠木です。 お気に入りのカフェはドトールコーヒーです。 14時からの限定スイーツ「シューシャポー」が大好きです。

WordPressでテーマやプラグインをいじるとき、仕事で他人の作ったソースを見るときにインデントが揃っていないことってありませんか?
プロのプログラマーであれば! インデントを揃えるのは読みやすくすることは最低限のマナーです!

とはいえ、インデントが揃っていないソースコードを目にすることが多々あり、その度に直していては日が暮れます。
そんな訳で、汚いソースコードを一瞬で整形して見栄え良くしてくれる小技をご紹介します!

インデントについて

インデントについて補足したいと思います。
Sublime Text 3の整形方法をさっと知りたい人はこちら

プログラムのソースコードを書くときに、行の先頭に空白を入れて階層を作って読みやすくすることを「インデント」と言います。

インデントで使う文字

インデントでは半角スペースまたはタブを使います。
※全角スペースは使いません。

半角スペース2桁、または半角スペース4桁のルールでコーディングされていることが多いです。

インデントをする上での注意点

タブを使うと他のエディタで見た時に表示が崩れる場合がある

タブは1回の入力でエディタにもよりますが、通常4桁分の半角スペース幅を表現できる便利な文字です。ただし、エディタの設定によっては幅が異なるので他の人が見た時に見た目が変わります。

特に半角スペースとタブが入り乱れているソースコードの場合は見た目が崩れてしまいます。

半角スペースでもタブでもどちらでも構いませんが、どちらかに揃えておくか、タブは半角スペース何個分か明確に決めておくとよいでしょう。

インデントは何桁でコーディングすればいいの?

プログラミングは基本的に一人でやることは少ないです。
一人でやるならコーディングも自由です。

ただし、仕事でのプログラミングはチーム開発です。
「郷に入っては郷に従え」という言葉があるように、プロジェクト内のルールに従いましょう。

タブを使っているプロジェクトの中で自分だけ半角スペースを使っていては・・・逆にそれがインデントを崩してしまう結果になります。

プロジェクトによってはタブで統一されていたり、半角スペース8桁になっている場合もあります。

インデントを整形しない方が読みやすい場合もある

<table>タグや<li>タグなど階層が深くなってしまいがちなものについてはあえてインデントをしない場合もあります。

完璧にインデントで整形することによって横スクロールしないと端まで読めない・・・なんて読みにくいソースコードになると本末転倒です。

柔軟にいきましょう。

読みやすいソースコードを書こう!

読みやすいコードを書くことはプロのプログラマーとしては当たり前です。
いい加減なインデントをしているソースは読みたくないですし。

ということで前置きが長くなってしまいしたが、揃っていないソースコードのインデントを一瞬できれいに整形するSublime Text 3の小技をご紹介します。

Sublime Text 3 インデント整形術(Reindent)

Sublime-Text-3-ReIndent
  1. 整形したい箇所を範囲選択する
  2. メニューの編集(Edit)
  3. -行の操作(Line)
  4. –Reindent

「Reindent」から自動整形が行われます。一瞬で綺麗になるソースコードを見るのはたまりません・・・!

インデントの自動整形にショートカットキーを割り当てる

インデントの自動整形はデフォルトではショートカットキーは割り当てられていません。
ということでショートカットキーを割り当てたいと思います。

Windows:Ctrl+Shift+R
Mac:Commond+Shift+R

上記のショートカットでソースコードの整形が行われるようにします。
やり方は下のとおりです。

  1. 基本設定(Preferences)
  2. Key Bindings – User
Default(OSX).sublime-keymap
キーバインドに自動整形を割り当てる方法(追記)

上記のソースコードを1行追記してください。

キーバインドに自動整形を割り当てる方法(新規)

今までキーバインドを触ったことがない人は上記のようになっていればok!

自動整形されるインデントの桁数を変更したい場合

View-Indentation-Tab Width
  1. 表示(View)
  2. インデント設定(Indentation)
  3. Tab Width:4

Tab Width:」からインデントの桁数を1〜8の間で変更できます。
4桁が無難かな・・・と思います。

自動整形されるインデントで追加されるタブを半角スペースに変更したい場合

View-Indentation-Indent Using Spaces

Indent Using Spaces」にチェックを入れるとインデントはタブではなく半角スペースを使用します。
自動整形の時だけではなく、tabキーを入力した場合も半角スペースが表示されます。

参考元サイト

関連記事

  1. Sublime Text 3 CSVデータにするテクニック
  2. ノートパソコンを打つ女性 オフィスシーン
  3. コードが書かれたモニター
  4. 【Sublime Text 3】ショートカットキー一覧(Windows/Mac対応)
  5. コーディング
  6. パソコン

PR

カテゴリー