まちいろエンジニアブログ

南池袋のWebサービス開発会社、株式会社まちいろのエンジニアブログです。

コード解析・フォーマットツールを導入しよう

こんにちは、まちいろの工藤です。

まちいろでは言語毎にコード解析・フォーマットツールを導入しています。 弊社メンバーがよく使っているエディタ「Atom」のプラグインと合わせて、いくつか紹介したいと思います。

Ruby

Ruby には RuboCop という Ruby コード静的解析ツールがあります。 コーディングルールは .rubocop.yml に記述していきます。

github.com

RuboCop には、実行時にコーディング規約に準拠する形にコードを修正する autocorrect 機能があります。 例えば文字列は基本シングルクォーテーションで囲む、という規約だった場合、 ダブルクォーテーションで囲まれている部分を自動でシングルクォーテーションに修正します。

autocorrect を有効にするには、実行時に -a オプションを付与します。

$ rubocop -a

...

nn files inspected, nn offenses detected, nn offenses corrected

Atom から実行するには、linter-rubocop プラグインを導入します。 また、rubocop-auto-correct プラグインを導入すると、ファイル保存時に autocorrect を行うことができて便利です。 Golang の gofmt を使っている感覚でコーディングできます。

JavaScript

JavaScript でのコード解析は ESLint が有名です。 コーディングルールは .eslintrc に記述していきます。

eslint.org

ESLint にも autofix という自動修正のオプションがあります。 Atom では、linter-eslint プラグインを導入すると、コード解析だけでなくファイル保存時のフォーマットも行うことができます。

また、最近 (?) Prettier というコードフォーマッタが話題です。 既に Star の数が ESLint を超えてますね。。

github.com

こちらは Golang における gofmt 的な役割で、コードフォーマットに特化しています。 既に ESLint を導入している場合は、https://github.com/prettier/prettier-eslint を利用することで、.eslintrc の設定内容を元にフォーマットすることができます。

Atomprettier-atom プラグインを導入すると、ファイル保存時にフォーマットを実行することが可能です。

CSS

CSS では stylefmt (以前は cssfmt という名称だったようです) というコードフォーマッタがあります。 Stylelint との連携も可能なようですが、まちいろでは stylefmt のデフォルトルールで利用しています。

https://github.com/morishitter/stylefmt

Atomatom-stylefmt プラグインを導入すると、ファイル保存時にフォーマットを実行することが可能です。 ただし最新バージョンでは、language-postcss プラグインを導入しているとうまく動きませんでした。

最後に

いかがでしたでしょうか。

コードレビューを実施している現場は多いと思いますが、レビューの際にインデントや括弧の位置など、本質的ではないところを指摘するのは無駄なので、こういったツールを導入して自然にルールに準拠できるようにしていくと良いと思います。