Help us understand the problem. What is going on with this article?

どんなエディタでもEditorConfigを使ってコードの統一性を高める

More than 1 year has passed since last update.

よくある会話として下のようなものがありますよね。
「ソフトタブですか?ハードタブですか?」
「インデントはいくつですか?」
※ソフトタブはタブが半角スペースで、ハードタブはタブがタブ。

そんなものはエディタの設定で統一すればよいからと。頭を悩ませる理由がわからないと。
と、思うんですよね。ひとりで作業しているときはね。

現状、私の周りで何が起きたかというと。

  • PhpStorm派
  • Vim信者
  • Atom使いたい派
  • なぜかときどきSublimeText使う派

と、なってくるわけですね。
エディタ毎に設定していってもよいんですけど、プロジェクト毎にどうのこうのしなきゃいけなくてめんどう。

結果

コードがグッチャグチャになって人間関係までグッチャグチャ
となるわけですね。

人をイライラさせたければソフトタブのところにハードタブぶち込んだり、タブ4で統一しているところに2をぶち込めばよくて。簡単だね!

概要 - 人間関係を崩さないためのEditorConfig

Kobito.PWgkpJ.png

What is EditorConfigに書かれていることを雑に訳すとこんな感じ。

EditorConfigは、異なるエディタ・IDE間でも一貫したコーディングスタイルを定義、維持するツールです。エディタコンフィグは、コーディングスタイルの定義をするファイルフォーマットとそのフォーマットを読みこみ、エディタに定義を結びつけるプラグインから成り立っています。エディタコンフィグファイルの書き方はリーダブルだし、バージョンコントロールもできるから便利だよ!

対応エディタ

プラグインが必要ないもの

Kobito.uHlmiU.png

プラグインをインストールすることで対応できるもの

Kobito.DhRakA.png

これでだいたい問題ないんじゃないかな。
この中になくて周りが使ってそうなもので思い浮かぶのもあるにはあるけども、そんなものはやっぱり知りません( ◠‿◠ )

[エディタ別]プラグインのインストール方法

いろんな人に使ってほしいと思うのでいろいろなエディタにインストールする手順を書いてみました。他にもこれでどうやるの?とかあれば、編集リクエスト出すなりしてもらえると対応すると思います。

Atom

ターミナルで以下のようにうつだけ。
apm install editorconfig

GUIがよいって人はいつも通りSetting > Installから検索すれば出ます。
Kobito.XFWJWt.png

VisualStudio Code

Shift+Cmd+Pでパレットを開き、Install Extentionから検索してインストール。

あるいはターミナルで以下を入力。

code --install-extension EditorConfig.EditorConfig

Vim

NeoBundleを使ってインストールだなんてことはもうVimmerにあらためて言う価値があるのだろうか。 .vimrcに以下を記述されてどうぞ。
NeoBundle 'editorconfig/editorconfig-vim'

Sublime Text

Cmd+Shift+Pでパレット開いてからInstall Package選んで探すとふつうに見つかります。

Kobito.aMFePo.png

Brackets

File - Extension Manager(拡張機能マネージャー)で探せば割とふつうに見つかります。

Kobito.6R2EwQ.png

PhpStorm

PreferenceからPluginの項目を選択して、Install JetBrains pluginボタンを押す。で、検索してInstall pluginボタンを押すだけです。押すだけと言いましたが、割とステップ多いのでPhpStormでもっとラクにできるやり方あれば知りたいです。

Kobito.jqxLLy.png

Xcode

Alcatraz使えばよいんじゃないですかね(雑)

.editorconfigファイル

これでプロジェクトディレクトリに.editorconfigファイルを用意すれば設定が適応されるようになります。つまりgitの管理対象にいれればプロジェクトで統一可能ということです。

これからどんな項目があるかとか見るのですが、まずはちょっとデフォルトで入るファイルの中身を見てみましょう。
こんな感じ。

# EditorConfig helps developers define and maintain consistent
# coding styles between different editors and IDEs
# editorconfig.org

root = true


[*]

# Change these settings to your own preference
indent_style = space
indent_size = 2

# We recommend you to keep these unchanged
end_of_line = lf
charset = utf-8
trim_trailing_whitespace = true
insert_final_newline = true

[*.md]
trim_trailing_whitespace = false

設定ファイルの書き方

設定ファイルは上記の通りプロパティと値の一覧です。
どんなプロパティがあってどんな値を取るかまとめました。

  • indent_style
    ハードタブかソフトタブか。tabspaceを指定できます。

  • indent_size
    インデントを半角スペースいくつ分にするか。指定するのは整数であればなんでもいけると思いますが、わたしは2か4しか入れたことがないです。

  • tab_width
    タブの幅なんですけど、省略するとindent_sizeの数値が適応されます。

  • end_of_line
    改行コードの種類lfcrcrlfを指定する。

  • charset
    文字コード。utf-8指定しておけばよいんじゃないですかね。

  • trim_trailing_whitespace
    行末の空白を削除するかどうか。truefalseを指定できます。

  • insert_final_newline
    最終行に空行を入れるかどうか。truefalse

  • root
    これをtrueにしておかないとルート・ディレクトリまでたどってしまいます。ただroot機能のおかげで、.editorconfigが同階層に存在しない場合にルートに存在する.editorconfigファイルを参照してくれるわけです。
    root = trueはかならず最初に書いておくと思っていてください。

ファイル名の指定方法

特に難しいことはないですが、公式のページに書いてあるモノを掲載しておきます。

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

特殊文字からのエスケープはバックスラッシュです。
あとコメントアウトは#シャープ;セミコロンです。

サンプル

root = true

[*]
indent_style = space
end_of_line = lf
charset = utf-8
trim_trailing_whitespace = true
insert_final_newline = true
indent_size = 4

[*.md]
trim_trailing_whitespace = false

[package.json,*.less,*.coffee]
indent_size = 2

なんか自分が昔使ってたファイルをコピペしてきたんですけど、この記事書こうと思い立ったのがかなり前でどこのコピペか覚えてません( ◠‿◠ )

参考

EditorConfig

以上です。みなさんなかよくしましょう。

余談ですが、「どんなエディタでもEditorConfigを使って〜」というタイトルには、会社の人にEditorConfigに対応してないエディタ使うじゃねえっていう圧力を込めました。


不人気な前記事 load-grunt-configでのGruntのファイル分割をすべてCoffeeScriptで実現する

naru0504
UXデザイナーです。 プログラミングなんて一切わかりません( ◠‿◠ )
opt
"INNOVATION AGENCY" を標榜するインターネット広告代理店。エンジニア組織 "Opt Techonologies" を中心にアドテクetc...に取り組んでいます。
https://opt-technologies.jp/
Why not register and get more from Qiita?
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away
Comments
No comments
Sign up for free and join this conversation.
If you already have a Qiita account
Why do not you register as a user and use Qiita more conveniently?
You need to log in to use this function. Qiita can be used more conveniently after logging in.
You seem to be reading articles frequently this month. Qiita can be used more conveniently after logging in.
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away
ユーザーは見つかりませんでした