複数人のコードスタイルを統一するには「EditorConfig」が便利で、記事「エディター間のインデントや改行コードを統一する為のEditorConfigの設定方法」にて解説しました。

記事にある通り、通常は.editorconfigというテキストファイルを更新して設定します。しかし、WebStormやIntelliJ IDEAを使うと、テキストのファイルを直接編集することなくUI上からコードスタイルを設定し、.editorconfigを出力できます。コードスタイルがどのように変化するかを目視しながら設定できるので、直感的な作業が可能です。

EditorConfigの設定

例としてHTMLコードのインデントをスペース2つに設定してみましょう。

[Code Style]→[HTML]より、[Use tab character]のチェックを外し、[Indent]を2に設定します。

他にも、JavaScript、CSS、TypeScript等、多くのコードスタイルを設定できます。

.editorconfigファイルの書き出し

設定が完了したら、設定内容を.editorconfigファイルに書き出します。この.editorconfigファイルをGit等で共有することで、各開発者の各エディターのコードスタイルを統一できるのです。

[Code Style]画面より、[EditorConfig]の箇所にある[Export]をクリックします。

次のような.editorconfigファイルが書き出されます。

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

[{*.jhm,*.xslt,*.xul,*.rng,*.xsl,*.xsd,*.ant,*.svg,*.tld,*.fxml,*.jrxml,*.xml,*.jnlp,*.wsdl}]
indent_style=space
indent_size=2

[{.babelrc,.stylelintrc,.eslintrc,jest.config,*.json,*.jsb3,*.jsb2,*.bowerrc}]
indent_style=space
indent_size=2

EditorConfigの設定をコードに反映

[Preferences]→[Editor]→[Code Style]より、[Enable Editor Config support]にチェックが入っていることを確認してください。

コードスタイルを反映させるには、該当ファイルを選択した状態で[Code]→[Reformat Code]を実行します。キーボードショートカットを使うと便利です(macOSなら[alt]+[command]+[L])。なお、WebStormにもコードフォーマット機能がありますが、EditorConfigを有効にした場合、EditorConfigの設定が優先されます。

また、フォルダを選択した状態で[Code]→[Reformat Code]を実行することで、フォルダ内の全ファイルに対して一括でコードスタイルを設定できます。

WebStorm(IntelliJ IDEA)で快適なEditorConfigライフを

筆者はこれまでEditorConfigの設定を変更する際に直接テキストファイルを編集してきましたが、WebStorm(IntelliJ IDEA)のこの機能のおかげで直感的に設定を行うことができるようになり、設定時間が短縮できました。何より、HTMLではこのコードスタイル、JavaScriptではこのコードスタイル、というように、言語毎に設定を分けたい場合に、いちいちテキストファイルで分岐条件を書くよりも、かなり楽です。是非使ってみてください。