CSS
JavaScript
scss
npm
stylelint

stylelintの導入にあたりルール別のエラー数を出せるようにした

はじめに:boy:

ESLintの導入にあたりルール別のエラー数を出せるようにしたの続編です。
色々入れようとしていたらstylelintも必要になって作りました。

できたもの:punch:

今回は前回の反省をふまえ最初からnpmにpublishしました。
https://www.npmjs.com/package/stylelint-report-by-rule

ので若干ソースが変わってますが、基本jsonの形式が違うだけのでかなり似たような作りになっています。

https://github.com/isoppp/stylelint-report-by-rule/blob/master/bin/stylelint-report-by-rule.js

#!/usr/bin/env node

/**
 * @fileoverview Main CLI that is run via the stylelint-report-by-rule command.
 * @author isoppp
 */

const argv = process.argv
const cmd = argv[argv.length - 1]
const spawnSync = require('child_process').spawnSync

const cmdResult = spawnSync(cmd, { shell: true, maxBuffer: 10000 * 1024 })
const log = JSON.parse(cmdResult.stdout.toString())

const report = {}
log.forEach(item => {
  if (!item.errored) return

  item.warnings.forEach(warning => {
    const rule = warning.rule
    if (report[rule] == null) report[rule] = 0
    report[rule] += 1
  })
})

process.stdout.write(JSON.stringify(report, null, '\t'))

使い方:beginner:

npx stylelint-report-by-rule "yarn --silent run stylelint -f json \"example/*.*\""

コマンドにstylelintのjsonフォーマットの出力を渡す感じになります。

一度インストールしてやってもいいぜな方は npm i stylelint-report-by-rule するとstylelint-report-by-ruleというcliコマンドが使えるようになるかもしれません。多分。(npxしか考えてなかったので未検証)

結果:partly_sunny:

こんな結果が出ます

{
        "at-rule-no-unknown": 150,
        "max-empty-lines": 181,
        "block-opening-brace-space-before": 327,
        "declaration-block-trailing-semicolon": 412,
        ...
}

導入へ向けて:runner_tone2:

前回の記事と同じです。

おわりに:laughing:

両者共にこういうレポート出力できないんですかね…。
基本エラー0で運用だと思うので運用中にレポート出すシーンがないからでしょうか。

パッケージについては確かnpm公開にあたりのガイドラインか何かがあった気がしておりそれには恐らく全く準拠できていないものの、
簡易用途としてpublishして各々のPCでコマンドとして叩けるようにするのは敷居が低いんだなという感想でした。(怒られたりしてしまうとあれですが…)