Logo Windi CSS

Визуальный анализатор

Инструмент визуального анализатора для Windi CSS. Просмотрите использование утилит, сделайте обзор своей дизайн-системы, определите «плохие практики» и многое другое!

Начать

Выполните следующую команду в корне вашего проекта

npx windicss-analysis

Отчет об анализе будет доступен по адресу http://localhost:8113/

NPM

Или вы можете установить локально, чтобы повторно использовать ту же версию вашего локального модуля windicss

npm i -D windicss-analysis
package.json
{
  "scripts": {
    "analysis": "windicss-analysis"
  }
}

Расширение VS Code

Начиная с версии 0.8.0 Windi CSS Intellisense, он имеет встроенный анализатор.

  • Откройте проект с помощью Windi CSS в VS Code
  • Откройте Command Palette (⇧⌘P / Ctrl+Shift+P)
  • Выполните команду: Windi CSS: Run & Open Analysis
  • Смотрите Анализатор во втором столбце редактора

Предварительный просмотр онлайн

Вы можете предварительно просмотреть анализируемый отчет самого анализатора

analysis-demo.windicss.org

Вы можете создать свой собственный отчет и разместить его статически, выполнив следующую команду

npx windicss-analysis --html dist

FAQ

Он не обнаруживает мои файлы

Вам нужно будет настроить параметры extract.include в windi.config.js вместо файла конфигурации вашего фреймворка, чтобы он мог быть понят анализатором и поддерживался другими интеграциями. Например:

windi.config.js
import { defineConfig } from 'windicss/helpers'

export default defineConfig({
  extract: {
    include: [
      'src/**/*.{vue,jsx,tsx,svelte}',
      'shared/**/*.{vue,ts}',
    ],
  },
})

Могу ли я использовать отчет для других инструментов?

Да. Вы можете получить необработанный файл json через интерфейс командной строки

npx windicss-analysis --json report.json

и обработать его по своему усмотрению.

Вы также можете получить поддержку типов через:

import rawReport from './report.json'
import type { AnalysisReport } from 'windicss-analysis'

const report = rawReport as AnalysisReport

Программное использование?

Да. Как и в случае с обычным пакетом Node:

import { startServer } from 'windicss-analysis'

startServer({ /* ... */ })

Ознакомьтесь с украшениями типов, чтобы узнать о других доступных API.