読者です 読者をやめる 読者になる 読者になる

ネオキャリアグループ開発者ブログ

ネオキャリアグループの技術者による開発ブログ

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

コーディング

こんにちはエンジニアの松崎です。
早速ですが皆さんチーム内で同じエディターを使われていますか?

  • SublimeText
  • Atom
  • Vim
  • IntelliJ IDEA

その他様々なエディターをチーム内でバラバラに使用していることが多いと思います。
またエディターだけでなく
「htmlのインデントはタブで( +・`ω・)b」
「cssのインデントはスペースで( ・`ω・´)」
のようにそれぞれの自分ルールが存在していて、新しく入った人は間違えるだけで怒られることも… ( ̄ー ̄;

今回紹介するのはEditorConfigです。
EditorConfigを導入すると、 チーム内で統一されたコーディングルールを、様々なエディターで共通して使うことができます!

f:id:daiki-matsuzaki:20170228130615p:plain

目次

使用できるエディター

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

Editorconfigのインストールが不要なもの f:id:daiki-matsuzaki:20170228120846p:plain これらのエディターには、EditorConfigのプラグインが初めから入っています。

Editorconfigのインストールが必要なもの f:id:daiki-matsuzaki:20170228120852p:plain

導入方法

僕は今回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にしておかないとルート・ディレクトリまでたどってしまいます。
    このファイルを最上位の階層として以下のディレクトリのみを検索する。

ファイル名の指定方法

セレクタ 効果
* “/"を除いた任意の文字列
** 任意の文字列
? 任意の一文字
[name] nameに一致するもの
[!name] nameに一致しないもの
{s1,s2,s3} s1,s2,s3に一致する各々

使い方

今回導入するにあたって、実際に書いた.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ファイルを
含めると全員のエディターで自動的に統一されます。

最後に

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

弊社について

ネオキャリアでは、エンジニアの募集を行っています。
ぜひ!募集記事をチェックしていただけると嬉しいです!(*>ω<)b

www.wantedly.com

www.wantedly.com

参考サイト

editorconfig.org

こちらの記事は、Qiitaに投稿したものと同じ内容になっています。

qiita.com