EditorConfigを使用すると、チームで異なるエディタやIDEを使っていてもコードスタイルを統一することができます。本記事では、AtomにEditorConfigを導入する手順をまとめます
環境
- OS X El Capitan (v10.11)
- Atom 1.15.0 x64
editorconfigパッケージをAtomにインストール
Atom -> Preferences
Settings内の、Install
タブをクリックし、検索バーにeditorconfig
と入力しEnter
![settings.png](https://qiita-user-contents.imgix.net/https%3A%2F%2Fqiita-image-store.s3.amazonaws.com%2F0%2F172234%2F39123552-12c9-3e6d-6ae4-b6309cdeec32.png?ixlib=rb-4.0.0&auto=format&gif-q=60&q=75&s=ef433beb1651ac51f59f439a548def65)
editorconfigパッケージの、右のinstallボタンをクリック
![installed.png](https://qiita-user-contents.imgix.net/https%3A%2F%2Fqiita-image-store.s3.amazonaws.com%2F0%2F172234%2F740598bd-3127-f696-e898-bf5b1215788e.png?ixlib=rb-4.0.0&auto=format&gif-q=60&q=75&s=8ff24a91940b8688f3791b40210b78f6)
インストールできました
.editorconfigファイルを作成
プロジェクト直下に.editorconfig
ファイルを作成し、設定を記述する
.
└── .editorconfig
記述例
# このファイルより上の階層の.editorconfigファイルは評価しない
root = true
[*]
# インデントはスペース2つ分
indent_style = space
indent_size = 2
# 文字コードはUTF-8
charset = utf-8
# 行末の空白文字を削除
trim_trailing_whitespace = true
# ファイルの末尾が改行でない時に補完
insert_final_newline = true
# 改行コードはLF
end_of_line = lf
# 一行は80文字まで
max_line_length = 80
[*.md]
# Markdownの時は行末の空白文字を削除しない
trim_trailing_whitespace = false
動作確認
同じくプロジェクト直下にhello.js
を作成
.
├── .editorconfig
└── hello.js
何か書いてみる
const hello = () => {
console.log('hello'); //インデントはスペース2つ分になっている
};
hello();
.editorconfig
ファイルでindent_size = 4
に変更し、また新たに何か書いてみる
const hello = () => {
console.log('hello');
};
const world = () => {
console.log('world'); //インデントがスペース4つ分になっている
};
hello();
world();
インデントがスペース4つ分になっていれば、設定が正しく反映されている
ん...?
ウインドウ右下の黄色いネズミマークをクリックすると...
![mouse.png](https://qiita-user-contents.imgix.net/https%3A%2F%2Fqiita-image-store.s3.amazonaws.com%2F0%2F172234%2Fa96c5c3c-7546-72d5-26f5-eea9cde25991.png?ixlib=rb-4.0.0&auto=format&gif-q=60&q=75&s=bbb5ac7e7d54045e7d2d847f439f6cfd)
![warning.png](https://qiita-user-contents.imgix.net/https%3A%2F%2Fqiita-image-store.s3.amazonaws.com%2F0%2F172234%2F647a6490-f2fe-0b26-f4b3-d248d86cbb22.png?ixlib=rb-4.0.0&auto=format&gif-q=60&q=75&s=973f3c91fd5e46bc3ae3e014f58e97be)
「whitespace」というAtomのCore Packageが、.editorconfig
ファイル内のinsert_final_newline
とtrim_trailing_whitespace
の設定とコンフリクトする可能性があるとのこと
Core Packageは消せないので、無効化しましょう
Atom -> Preferences
Settings内の、packages
タブをクリックし、検索バーにwhitespace
と入力しEnter
![whitespacesetting.png](https://qiita-user-contents.imgix.net/https%3A%2F%2Fqiita-image-store.s3.amazonaws.com%2F0%2F172234%2F49e777da-703e-5251-23b0-f8d6c06eef25.png?ixlib=rb-4.0.0&auto=format&gif-q=60&q=75&s=15e924d82c4fdd19b140a6d46d3f3a1d)
whitespaceパッケージの、右のDisableボタンをクリック
![whitespacedisabled.png](https://qiita-user-contents.imgix.net/https%3A%2F%2Fqiita-image-store.s3.amazonaws.com%2F0%2F172234%2F54356be7-a289-70b3-47df-72850cb02682.png?ixlib=rb-4.0.0&auto=format&gif-q=60&q=75&s=ddb840a92de0564368f944d6f2d52507)
![disappered.png](https://qiita-user-contents.imgix.net/https%3A%2F%2Fqiita-image-store.s3.amazonaws.com%2F0%2F172234%2Fafbbeb90-6b14-8510-a2e6-ea307343a9f0.png?ixlib=rb-4.0.0&auto=format&gif-q=60&q=75&s=897116fe080461c54f05cb074539fffb)
ネズミさんはいなくなりました