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

morita

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

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

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

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

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

弊社コーポレートサイトの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でも使いますが、まずはエディターでコードを書きながらリアルタイムでエラーを確認しつつコードを書いていきます。

via https://github.com/stylelint/vscode-stylelint

保存と同時に 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では、HTML/CSSコンポーネント設計経験が豊富なパートナーさんを募集しています

現在、Gaji-Laboの開発チームの一員としてプロジェクトに一緒に取り組んでくれる業務委託のパートナーさんを募集しています。現在は特に正しいHTMLマークアップやCSS設計の業務経験が豊富なWebフロントエンドエンジニアを必要としています。


パートナー契約へのお問い合わせもお仕事へのお問い合わせも、どちらもいつでも大歓迎です。まずはオンラインでのリモート面談からはじめましょう。ぜひお気軽にお問い合わせください!

お問い合わせしてみる!


morita

投稿者 Morita Sou

フロントエンドチームマネージャー。
適切な技術提案やコミュニケーションを出来るように心掛けています。CSS設計・CMS構築や開発環境の構築などを得意としています。
Macやエディタ、開発環境などを快適にすることにいつも燃えています。