なっく日報

技術やら生活やらのメモ

JavaScriptのコード品質を可視化する

いきなり結論から言ってしまうと、

platoを使うのがよいでしょう。

github.com

platoとは

JavaScriptのコードの品質を数値化&可視化してくれるツールです。

blog.asial.co.jp

結構前の記事になりますが、↑の記事がわかりやすいですね。

↓のような数値が見られます。

  • メンテナンス性
  • ソースコード行数
  • JSHint/ESLintのエラー数
  • などなど...

jQueryのサンプルのHTMLがあるので、そちらをみる方がイメージつかみやすいと思います。

http://jsoverson.github.io/plato/examples/jquery/

platoのインストール&使い方

npm i -g plato
plato -r -d report src

で、reportディレクトリにきれいなHTMLが出力されます。

簡単。

応用編

platoのメンテナンス性等々を計算するのは、依存している↓のライブラリで行っています。

github.com

コチラの方が細かい数字がいろいろと出力されるので、もっと品質を極めたいんだ!という人は、自分で可視化した方がよいかもしれません。

本日の記事はこんなところで。