EditorConfigでコーディングルールの統一

チーム内で同じエディターを使われていますか？

• SublimeText
• Atom
• Vim
• IntelliJ IDEA

その他様々なエディターがチームでバラバラに使用していることが多いと思います。

またエディターだけでなく
「htmlのインデントはタブで( +･｀ω･)b」

「cssのインデントはスペースで(　･`ω･´)」
のようにそれぞれの自分ルールが存在していて、新しく入った人は間違えるだけで怒られることも... (￣ー￣；

そんな時コーディングルールを統一できれば喧嘩も起きず
チームのみんなが、自分の好きなエディターを統一されたルールで
使用できれば嬉しいですよね？

今回紹介するのはEditorConfigです。

設定自体すごく簡単で様々なエディターで共通して使用できます。

使用できるエディター

使用できるエディターはこれだけあります。

インストールが不要なもの

これらのエディターには最初から入っています。

インストールが必要なもの

導入方法

僕は今回3つのエディターで試したので、その際の導入方法を書きます。

Sublime Text

Macの場合
1. [cmd]+[shift]+[p]でパッケージコントロールを開きます
2. [install]と入力してInstallPackageを開きます
3. 開いたInstallPackageで[EditorConfig]を入力して選択します

Vim

Mac Vundleの場合
1. ~/.vimrcを開きPluginにPlugin 'editorconfig/editorconfig-vim'を追記します。
2. exモードで:PluginInstallを入力します。
二画面モードになりDone!と表示されれば導入は完了です。

IntelliJ IDEA

Mac
intelliJには元々入っていますが有効になっていない場合があるため
1.Preferences > PluginsのEditorConfigが有効になっていることを確認してください。

設定方法

プロジェクトディレクトリ配下に

「.editorconfig」ファイルを作成して記述していきます。

.editorconfigファイルの書き方

• indent_style
  ハードタブかソフトタブか。tabかspaceを指定できます。
• indent_size
  インデントを半角スペースいくつ分にするか。
• tab_width
  タブの幅。省略するとindent_sizeの幅が適応されます。
• end_of_line
  改行コードの種類(lf,cr,crlf)を指定する。
• charset
  文字コード。
• trim_trailing_whitespace
  行末の空白を削除するかどうか。(true||false)
• insert_final_newline
  最終行に空行を入れるかどうか。(true||false)
• root
  必ず先頭に記述します。
  これをtrueにしておかないとルート・ディレクトリまでたどってしまいます。
  このファイルを最上位の階層として以下のディレクトリのみを検索する。
  

ファイル名の指定方法

使い方

今回導入するにあたって、実際に書いた.editorconfigファイルが以下になります。

例としてみてください！

# root検索の停止
root = true

[*]
end_of_line = lf

[*.md]
trim_trailing_whitespace = false
insert_final_newline = true

[*.html]
charset = utf-8
indent_size = 2
indent_style = space
trim_trailing_whitespace = true
insert_final_newline = true

[{*.css,*.scss}]
charset = utf-8
indent_size = 2
indent_style = space
trim_trailing_whitespace = true
insert_final_newline = true

[{*.js,*.jsx}]
charset = utf-8
indent_size = 2
indent_style = space
trim_trailing_whitespace = true
insert_final_newline = true

このファイルはフロントで使用する言語ばかりですが、

もちろんバックエンドの言語も使用できます！( • ̀ω•́ )✧

gitでファイル管理を行っている場合.editorconfigファイルを

含めると全員のエディターで自動的に統一されます。

最後に

初めて見たときはたったこれだけの設定しかないのに意味あるのかな？
と思ったりしましたが、このルールすら守れていないと後から修正するのが
大変だったり、時間を使うことがあるので絶対入れたほうがいいなと思いました。
皆さんも是非導入して見てはいかがでしょうか？

参考サイト

EditorConfig 公式

↓こちらでも記事を公開しています！
ネオキャリアグループの技術者による開発ブログ