Atomでインデント設定に困ったらEditorConfigを使用する

2015.3.28

Atomで言語別にインデントのルールを設定したい。以前は言語別でソフトタブの設定ができたようなのですが、現在はできないようです。困った…。そんな時に出会った「EditorConfig」が便利でしたので、設定方法を紹介します。

現在、Atomのインデント設定は以下の様になっております。

  • 言語別に半角スペースの数を変更できる
  • ハードタブかソフトタブかを切り替えることができる
  • 言語別にハードタブかソフトタブかを変更できない

以前は言語別でソフトタブの設定ができたようなのですが、現在はできないようです。
そこで、プラグインのsyntax-settingsを導入して設定を試してみるも、上手くいかず撃沈。
これは困った。

そこで、対応策を探していると、EditorConfigというものに出会いました。

EditorConfigとは

プロジェクト毎にコーディングルールが異なったり、複数人で編集することによって、インデントがタブだったり半角スペースだったり、改行コードが違う、一部ファイルだけ文字コードがShift_JISになってしまっている、といった問題が起こり得ます。
これらの設定を統一し、共有するためのツールがEditorConfigです。
例で少し挙げましたが、EditorConfigでは下記の設定が可能です。

  • 言語別のインデントの設定（タブか半角スペースか）
  • タブの幅（タブの場合）
  • 半角スペースの数（半角スペースの場合）
  • 改行コード
  • 文字コード
  • 先行する空白文字を削除するか
  • ファイルを改行で終えるか
  • EditorConfigファイルの探索を終えるか

EditorConfigについて詳しいことが知りたい方は、下記のサイトを参考にしてみてください。

AtomでEditorConfigを設定する

「EditorConfig」をインストール

AtomはEditorConfigに対応しているので、プラグインをインストールします。
インストール方法は2つ。お好きな方法でインストールしてください。

コマンドプロンプト若しくはターミナルからインストール

$ apm install editorconfig

Atomからインストール

File → Settings → Install → 「EditorConfig」で検索

次に、.editorconfigファイルを作成いたします。

root = true

[*]
indent_style = tab
end_of_line = crlf
charset = utf-8
trim_trailing_whitespace = true
insert_final_newline = true

[package.json]
indent_style = space
indent_size = 2

[*.md]
trim_trailing_whitespace = false

[*.html]
indent_style = space
indent_size = 2

[*.css]
tab_width = 4

[*.js]
tab_width = 4

上記では、htmlの時は半角スペース2つのソフトタブでインデント、css,javascriptの時は半角スペース4つ分のハードタブでインデント、という設定を行っております。

EditorConfigは、編集しているファイルから一番近いところにある.editorconfigファイルの設定を参照します。
ですので、作成したファイルは、各プロジェクトのルートに配置します。そうすることで、プロジェクト別にEditorConfigを設定することが可能になります。
チームメンバーと共有するには、作成した.editorconfigファイルを他メンバーに共有し、該当ディレクトリに配置するだけです。とても簡単ですね。

これをプロジェクト別ではなく、エディターの設定として利用する場合は、ホームディレクトリに配置することで、全てのファイルに適用されます。

EditorConfigをチームで採用する際の注意点

EditorConfigに対応しているエディターは限られています。
対応していないエディターを使用しているメンバーには別途共有が必要ですね。
とはいえ主要エディターの多くは対応済みのようです。
対応エディターは公式サイトをご確認ください。

今回はAtomのインデント設定で壁にぶつかったことでEditorConfigというものがあるのを知りました（情弱か…）。
学習コストはほとんど必要なく、エディターさえ対応していればよいので、実務で使用してみるのもいいかなと思います。

Related Posts