フロント開発を支えるモジュール群
February 10, 2019
フロント開発を支えるモジュール
チームメンバーは十人十色で、そういったチームワークにおいてルールを作り守っていくのはマネジメントコストがかかる。 そういった問題を解決する際に、フロント開発で役立つモジュールを紹介。
Prettier
Prettier
はコードフォーマッター。
個人による表記揺れを整形してくれる。
セミコロンやクォーテーションのような宗教戦争の元を解決してくれる。
ESLint
ESLint
はJavaScript
の静的検証ツール。
Prettier
と似たようなところがあり、スペースのルールなども統一できる。
また、ランタイムエラーを事前に発見できるという点でかなり有用。
TypeScript
用のTSLint
などもある(ただし、最近ではTSLint
は見放されている)。
stylelint
ESLint
のStyle(CSS)
バージョンだと思って問題ない。
例えば、margin
に対して設定している値にpx
がついていないと警告を出してくる。
ただし、ルールを強めすぎるとかえってコーディングにストレスがかかるので、そこは調整が必要。
import-sort
文字通り、import
文のソートを行ってくれる。
アトミックデザインなどを採用して細かくコンポーネントを切っているとimport
文だけで数十行あるってこともそんなに少なくはないので、そういった時に役立つ。
lint-staged
上記のLinter
類は基本的に一度適用させてしまったあとは変更しないかぎり再び適用する意味はない。
そういった時に役立つのがlint-staged
。
git add
してステージに上がっているファイルに対してLinter
を適用することができる。
commitlint
ここまで来るとだいたい予想つくと思うが、コミットメッセージのLinter
。
大規模開発やOSS
界隈ではほとんど採用されている。
husky
git commit
と git push
にフックするためのモジュール。
特に、lint-staged
とcommitlint
の2つと合わせて使われる。
おわりに
上記で紹介したモジュール群を導入すればソースの品質は上がる。 しかし、品質を優先しすぎて開発スピードが落ちてはいけない場面もあるので、適切に採用していく必要がある。
Written by Ryo @neer_chan