gistfile1.md

Visible CLIのセットアップ

VisibleのCLI版のインストール方法です

1. Node.js, NPMのインストール

Visible CLIの実行にはNode.jsとNPMが必要です。

• Node.js: >= 12.x
• NPM: >= 6.x

既にインストールされているかどうかは下記のコマンドで確認できます（バージョンが表示されればインストール済み）

node --version && npm --version

macOSをお使いで、Homebrewをインストール済みの場合、以下のようにインストールできます。

brew install node

2. Visible CLIのインストール

NPMレジストリからVisibleのCLI版と標準プラグインをダウンロードします。

npm i -g @visi/cli @visi/plugin-standard

次に設定ファイルを初期化します。Visible CLIがインストールできている場合は init コマンドで現在のディレクトリに設定ファイル .visiblerc.json が生成され、デフォルトの設定が書き込まれます。

visible init

3. 診断

visible コマンドでWebサイトのURLを診断できます。

visible --url=https://example.com

診断結果として問題があった箇所のHTMLやCSSがハイライトされて画面に表示されます。

SPAの場合

Webサイトによっては診断開始時までにレンダリングが行われない場合がありますが、visiblerc.jsonにミリ秒で下記の設定を行うと一定時間待ってから診断するようにできます。

{
  "plugins": [..],
+  "settings": {
+    "delay": 1000
+  }
}

生データの表示

CLI版は診断結果として整形されたコードフレームを表示しますが、もし内部実装に興味をお持ちの場合は、--jsonフラグの付与で整形前のデータを表示できます。

visible --json --url=https://example.com

備考: Visibleのアンインストール

rm ~/.visiblerc.json
npm uninstall --global @visi/cli @visi/plugin-standard