@eslint/config-inspector/README.md

A visual tool for inspecting and understanding your ESLint flat configs

<img src="./public/favicon.svg" width="100" height="100" alt="ESLint Config Inspector"><br>

# ESLint Config Inspector

[![npm version][npm-version-src]][npm-version-href]
[![npm downloads][npm-downloads-src]][npm-downloads-href]

A visual tool for inspecting and understanding your [ESLint flat configs](https://eslint.org/docs/latest/use/configure/configuration-files-new).

<img width="1252" alt="Screenshot 1" src="https://github.com/eslint/config-inspector/assets/11247099/d6551d44-445e-4f22-9d8e-ccb8042a6226">
<img width="1362" alt="Screenshot 2" src="https://github.com/eslint/config-inspector/assets/11247099/d74a057a-f674-4a8d-977f-d9b6a3cde949">

## Usage

Go to the project root that contains `eslint.config.js` and run:

```bash
npx @eslint/config-inspector@latest
```

Visit http://localhost:7777/ to view and play with your ESLint config. Changes to the config file will be updated automatically.

Run `npx @eslint/config-inspector --help` to see all the CLI options available.

### Online Preview

Or play it right in your browser now:

[![Open in StackBlitz](https://developer.stackblitz.com/img/open_in_stackblitz.svg)](https://stackblitz.com/~/github.com/eslint/config-inspector)

### Static Build

It is also possible to build a static web app for your ESLint config:

```bash
npx @eslint/config-inspector build
```

This will generate a Single-Page Application (SPA) under `dist/__eslint-config-inspector`, with the snapshot of the current ESLint config. You can deploy it somewhere, or use it for comparison etc.

Run `npx @eslint/config-inspector build --help` to see all the CLI options available.

## Contributing

We operate under the [ESLint Contributor Guidelines](http://eslint.org/docs/developer-guide/contributing), so please be sure to read them before contributing. If you're not sure where to dig in, check out the [issues](https://github.com/eslint/config-inspector/issues).

### Development

This project uses the following stack:

- [pnpm](https://pnpm.io/) for package management
- [Nuxt](https://nuxt.com/) & [Vue](https://vuejs.org) for the app
- [devframe](https://devfra.me) for the dev server, RPC transport, and static build
- [UnoCSS](https://unocss.dev/) for styling
  - With [attributify mode](https://unocss.dev/presets/attributify) enabled
- Use [ESLint](https://eslint.org/) for linting and formatting

To start the development server:

- Install dependencies via `pnpm install` (we highly recommend you to [enable `corepack enable`](https://nodejs.org/api/corepack.html) first)
- Run `pnpm cli:dev` to build the SPA once and start the inspector at http://localhost:7777
- Run `pnpm dev` to iterate on Vue components with HMR (the payload fetch will fail without the inspector running)

To test the production build:

- Run `pnpm build` to build the inspector tool and the CLI
- Run `pnpm start` to start the production server at http://localhost:7777

## License

[Apache-2.0](./LICENSE) License

<!-- Badges -->

[npm-version-src]: https://img.shields.io/npm/v/@eslint/config-inspector?style=flat&colorA=080f12&colorB=1fa669
[npm-version-href]: https://npmjs.com/package/@eslint/config-inspector
[npm-downloads-src]: https://img.shields.io/npm/dm/@eslint/config-inspector?style=flat&colorA=080f12&colorB=1fa669
[npm-downloads-href]: https://npmjs.com/package/@eslint/config-inspector

<!-- NOTE: This section is autogenerated. Do not manually edit. -->
<!--sponsorsstart-->

## Sponsors

The following companies, organizations, and individuals support ESLint's ongoing maintenance and development. [Become a Sponsor](https://eslint.org/donate)
to get your logo on our READMEs and [website](https://eslint.org/sponsors).

<h3>Platinum Sponsors</h3>
<p><a href="https://automattic.com"><img src="https://images.opencollective.com/automattic/d0ef3e1/logo.png" alt="Automattic" height="128"></a></p><h3>Gold Sponsors</h3>
<p><a href="https://qlty.sh/"><img src="https://images.opencollective.com/qltysh/33d157d/logo.png" alt="Qlty Software" height="96"></a> <a href="https://shopify.engineering/"><img src="https://avatars.githubusercontent.com/u/8085" alt="Shopify" height="96"></a> <a href="https://www.coderabbit.ai/?utm_source=cr_org&utm_medium=github"><img src="https://avatars.githubusercontent.com/u/132028505" alt="CodeRabbit" height="96"></a></p><h3>Silver Sponsors</h3>
<p><a href="https://vite.dev/"><img src="https://images.opencollective.com/vite/d472863/logo.png" alt="Vite" height="64"></a> <a href="https://liftoff.io/"><img src="https://images.opencollective.com/liftoff/2d6c3b6/logo.png" alt="Liftoff" height="64"></a> <a href="https://stackblitz.com"><img src="https://avatars.githubusercontent.com/u/28635252" alt="StackBlitz" height="64"></a></p><h3>Bronze Sponsors</h3>
<p><a href="https://cybozu.co.jp/"><img src="https://images.opencollective.com/cybozu/933e46d/logo.png" alt="Cybozu" height="32"></a> <a href="https://opensource.sap.com"><img src="https://avatars.githubusercontent.com/u/2531208" alt="SAP" height="32"></a> <a href="https://syntax.fm"><img src="https://github.com/syntaxfm.png" alt="Syntax" height="32"></a> <a href="https://icons8.com/"><img src="https://images.opencollective.com/icons8/7fa1641/logo.png" alt="Icons8" height="32"></a> <a href="https://discord.com"><img src="https://images.opencollective.com/discordapp/f9645d9/logo.png" alt="Discord" height="32"></a> <a href="https://www.gitbook.com"><img src="https://avatars.githubusercontent.com/u/7111340" alt="GitBook" height="32"></a> <a href="https://citadel-ai.com"><img src="https://avatars.githubusercontent.com/u/75781367" alt="Citadel AI" height="32"></a></p>
<h3>Technology Sponsors</h3>
Technology sponsors allow us to use their products and services for free as part of a contribution to the open source ecosystem and our work.
<p><a href="https://netlify.com"><img src="https://raw.githubusercontent.com/eslint/eslint.org/main/src/assets/images/techsponsors/netlify-icon.svg" alt="Netlify" height="32"></a> <a href="https://algolia.com"><img src="https://raw.githubusercontent.com/eslint/eslint.org/main/src/assets/images/techsponsors/algolia-icon.svg" alt="Algolia" height="32"></a> <a href="https://1password.com"><img src="https://raw.githubusercontent.com/eslint/eslint.org/main/src/assets/images/techsponsors/1password-icon.svg" alt="1Password" height="32"></a></p>
<!--sponsorsend-->