チームでコードを統一する色々な方法

こんにちは、森田です。
弊社は1人月のボリュームでアサインするプロジェクトでもバックアップなども考えて複数名体制で入ることが多いです。
その際に、メンバーのコードの書き方はなるべく統一したいです。

今回はGaji-LaboがやっているWebフロントエンドのチームでのコード統一の方法について紹介します。

コーディングルールで統一する

以前の記事で、CSSの命名のルール や 破綻しにくいHTML+CSSコーディングルール などを紹介しましたが、まずはコーディングルールをきっちり決めることからプロジェクトは始まります。

コードを書く前に GitHub リポジトリの Wiki などにコーディングルールを記載し、メンバーに読み込んでもらいます。
また、それと同時にレビューもしてもらいプロジェクトに沿ったルールになっているか？クライアントの求めているものと齟齬がないか？などの確認も兼ねています。

エディタでコードを統一する

弊社メンバーは全員 VSCode を使っているので、エディタでもコードを統一することがしやすいです。
（たまたま全員VSCodeなだけで、エディタの強要などは一切しておりません。）

.vscode ディレクトリというユーザー設定のディレクトリとファイルもgitに入れて共有しセッティングを統一することができます。

参考：User and Workspace Settings

EditorConfig で統一

コードな書き方以前に基本的なルールとして、インデントをタブにするかスペースにするか、クォートをシングルかダブルか最後の改行を入れるかなどの設定は  EditorConfig を使い、.editorconfigもgitに追加します。

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

このようなファイルがプロジェクト内にあることで文字コードやインデントなどを自動で統一してくれます。

lint ツールで統一

lintツールは主にCSS(SCSS)のリンター stylelint と、JavaScriptのリンター ESLint を使ってます。

lint はCLIでも使いますが、まずはエディターでコードを書きながらリアルタイムでエラーを確認しつつコードを書いていきます。

保存と同時に fix させて統一

lint ツールにはエラーチェックと同時にコードをフォーマットする --fix というオプションがあります。
VSCode はエディタ上で保存すると、この --fix オプションを走らせることができるので、基本的にこの設定をメンバー全員が使うことにしています。

下記のようなルールをVSCodeの設定ファイルに書きます。

"editor.codeActionsOnSave": {
  "source.fixAll.stylelint": true,
  "source.fixAll.eslint": true
},

Stylelint は少し前まで公式の拡張が無くなったり、fix を使うオプションがDEPRECATED になったりと正直微妙な使い勝手だったのですが、公式様が拡張を再度開発してくださり、fix の機能が追加され、私てきに念願の Vue.js のスタイルセクションにも fix が効いたりと神拡張になりました。

git push 時にコード統一する

メンバーはVSCodeで lint fix を実行できますが、外部パートナーの方などはVSCode を使っていない方もおられます。そもそも保存時のフォーマットも強要しているわけではありません。
その場合も考えて husky という npm パッケージで git push 時に lint fix を実行するようにしています。

パッケージをインストールし、下記のような設定を package.json に書くことで git push 実行時に指定したコマンドが走ります。

"husky": {
  "hooks": {
    "pre-push": "npm run lint fix"
  }
}

これでpush 時に lint fix が実行されるので、エディタでフォーマットをしなくてもリモートリポジトリには fix されたコードが push されます。

ファイル名が多い場合は lint-staged という npmバッケージも使って commit時にステージングのファイルのみを対象にする場合もあります。

まとめ

ルールやツールなども勿論ですが、「コードをちゃんと書く」「コードをこだわる」といったマインドなども統一して、チームのコードをより良いものに統一していきたいですね。

Gaji-Laboブログ内には、他にもチーム開発でのWebフロントエンドについて取り上げた記事があります。
チーム開発のために必要なコーディングルールやスタイルガイド、コンポーネントの設計方法など、実践をもとにしたリアルなWebフロントエンド知見に興味がある方におすすめの記事シリーズを「チーム開発でのWebフロントエンド」としてまとめていますので、あわせてお読みいただけるとうれしいです。