Skip to content

Commit

Permalink
feat: migrate from eslint-flat-config-viewer (#1)
Browse files Browse the repository at this point in the history
  • Loading branch information
antfu authored Mar 29, 2024
1 parent d31dfc2 commit 4acbd4f
Show file tree
Hide file tree
Showing 44 changed files with 11,483 additions and 0 deletions.
68 changes: 68 additions & 0 deletions .github/workflows/ci.yml
Original file line number Diff line number Diff line change
@@ -0,0 +1,68 @@
name: CI

on:
push:
branches:
- main

pull_request:
branches:
- main

jobs:
lint:
runs-on: ubuntu-latest
steps:
- uses: actions/checkout@v3

- name: Install pnpm
uses: pnpm/action-setup@v2

- name: Set node
uses: actions/setup-node@v3
with:
node-version: lts/*

- name: Setup
run: npm i -g @antfu/ni

- name: Install
run: nci

- name: Lint
run: nr lint

- name: Typecheck
run: nr typecheck

test:
runs-on: ${{ matrix.os }}

strategy:
matrix:
node: [lts/*]
os: [ubuntu-latest, windows-latest, macos-latest]
fail-fast: false

steps:
- uses: actions/checkout@v3

- name: Install pnpm
uses: pnpm/action-setup@v2

- name: Set node ${{ matrix.node }}
uses: actions/setup-node@v3
with:
node-version: ${{ matrix.node }}

- name: Setup
run: npm i -g @antfu/ni

- name: Install
run: nci

- name: Build
run: nr build

# - name: Test
# run: nr test
56 changes: 56 additions & 0 deletions .github/workflows/release-please.yml
Original file line number Diff line number Diff line change
@@ -0,0 +1,56 @@
on:
push:
branches:
- main
name: release-please
jobs:
release-please:
runs-on: ubuntu-latest
permissions:
contents: write
pull-requests: write
id-token: write
steps:
- uses: google-github-actions/release-please-action@v3
id: release
with:
release-type: node
package-name: '@eslint/config-inspector'
pull-request-title-pattern: 'chore: release ${version}'
changelog-types: >
[
{ "type": "feat", "section": "Features", "hidden": false },
{ "type": "fix", "section": "Bug Fixes", "hidden": false },
{ "type": "docs", "section": "Documentation", "hidden": false },
{ "type": "build", "section": "Build Related", "hidden": false },
{ "type": "chore", "section": "Chores", "hidden": false },
{ "type": "perf", "section": "Chores", "hidden": false },
{ "type": "ci", "section": "Chores", "hidden": false },
{ "type": "refactor", "section": "Chores", "hidden": false },
{ "type": "test", "section": "Chores", "hidden": false }
]
- uses: actions/checkout@v3
if: ${{ steps.release.outputs.release_created }}
- uses: actions/setup-node@v3
with:
node-version: lts/*
registry-url: https://registry.npmjs.org
if: ${{ steps.release.outputs.release_created }}
- run: npm install
if: ${{ steps.release.outputs.release_created }}
- run: npm publish --provenance
env:
NODE_AUTH_TOKEN: ${{ secrets.NPM_TOKEN }}
if: ${{ steps.release.outputs.release_created }}
- run: 'npx @humanwhocodes/tweet "@eslint/config-inspector ${{ steps.release.outputs.tag_name }} has been released: ${{ steps.release.outputs.html_url }}"'
if: ${{ steps.release.outputs.release_created }}
env:
TWITTER_CONSUMER_KEY: ${{ secrets.TWITTER_CONSUMER_KEY }}
TWITTER_CONSUMER_SECRET: ${{ secrets.TWITTER_CONSUMER_SECRET }}
TWITTER_ACCESS_TOKEN_KEY: ${{ secrets.TWITTER_ACCESS_TOKEN_KEY }}
TWITTER_ACCESS_TOKEN_SECRET: ${{ secrets.TWITTER_ACCESS_TOKEN_SECRET }}
- run: 'npx @humanwhocodes/toot "@eslint/config-inspector ${{ steps.release.outputs.tag_name }} has been released: ${{ steps.release.outputs.html_url }}"'
if: ${{ steps.release.outputs.release_created }}
env:
MASTODON_ACCESS_TOKEN: ${{ secrets.MASTODON_ACCESS_TOKEN }}
MASTODON_HOST: ${{ secrets.MASTODON_HOST }}
7 changes: 7 additions & 0 deletions .gitignore
Original file line number Diff line number Diff line change
@@ -0,0 +1,7 @@
node_modules
*.log
dist
.output
.nuxt
.env
.idea/
3 changes: 3 additions & 0 deletions .npmrc
Original file line number Diff line number Diff line change
@@ -0,0 +1,3 @@
shamefully-hoist=true
strict-peer-dependencies=false
shell-emulator=true
4 changes: 4 additions & 0 deletions .stackblitzrc
Original file line number Diff line number Diff line change
@@ -0,0 +1,4 @@
{
"installDependencies": true,
"startCommand": "npm run dev"
}
10 changes: 10 additions & 0 deletions .vscode/extensions.json
Original file line number Diff line number Diff line change
@@ -0,0 +1,10 @@
{
"recommendations": [
"antfu.iconify",
"antfu.unocss",
"antfu.goto-alias",
"csstools.postcss",
"dbaeumer.vscode-eslint",
"vue.volar"
]
}
41 changes: 41 additions & 0 deletions .vscode/settings.json
Original file line number Diff line number Diff line change
@@ -0,0 +1,41 @@
{
// Enable the ESlint flat config support
"eslint.experimental.useFlatConfig": true,

// Disable the default formatter, use eslint instead
"prettier.enable": false,
"editor.formatOnSave": false,

// Auto fix
"editor.codeActionsOnSave": {
"source.fixAll": "explicit",
"source.organizeImports": "never"
},

// Silent the stylistic rules in you IDE, but still auto fix them
"eslint.rules.customizations": [
{ "rule": "style/*", "severity": "off" },
{ "rule": "*-indent", "severity": "off" },
{ "rule": "*-spacing", "severity": "off" },
{ "rule": "*-spaces", "severity": "off" },
{ "rule": "*-order", "severity": "off" },
{ "rule": "*-dangle", "severity": "off" },
{ "rule": "*-newline", "severity": "off" },
{ "rule": "*quotes", "severity": "off" },
{ "rule": "*semi", "severity": "off" }
],

// Enable eslint for all supported languages
"eslint.validate": [
"javascript",
"javascriptreact",
"typescript",
"typescriptreact",
"vue",
"html",
"markdown",
"json",
"jsonc",
"yaml"
]
}
38 changes: 38 additions & 0 deletions README.md
Original file line number Diff line number Diff line change
@@ -0,0 +1,38 @@
<img src="./public/favicon.svg" width="100" height="100"><br>

# ESLint Config Inspector

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

A visual tool to help you view and understand your [ESLint Flat configs](https://eslint.org/docs/latest/use/configure/configuration-files-new).

<img width="1199" alt="Screenshot" src="https://github.com/antfu/eslint-flat-config-viewer/assets/11247099/f386563a-c655-458e-a2c3-0af19ebec958">
<img width="1199" alt="Screenshot" src="https://github.com/antfu/eslint-flat-config-viewer/assets/11247099/44edeb05-02b3-4bca-8da6-768984e8d829">

## Usage

Change the directory to your project root that contains `eslint.config.js` and run:

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

Goto http://localhost:7777/ to view your ESLint config. Whenever you update your ESLint config, the page will be updated automatically.

---

Or play it in your browser:

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

## License

[Apache-2.0](./LICENSE) License

<!-- Badges -->

[npm-version-src]: https://img.shields.io/npm/v/eslint-flat-config-viewer?style=flat&colorA=080f12&colorB=1fa669
[npm-version-href]: https://npmjs.com/package/eslint-flat-config-viewer
[npm-downloads-src]: https://img.shields.io/npm/dm/eslint-flat-config-viewer?style=flat&colorA=080f12&colorB=1fa669
[npm-downloads-href]: https://npmjs.com/package/eslint-flat-config-viewer
48 changes: 48 additions & 0 deletions app.vue
Original file line number Diff line number Diff line change
@@ -0,0 +1,48 @@
<script setup lang="ts">
import { useHead } from '@unhead/vue'
import { errorInfo } from './composables/payload'
import 'floating-vue/dist/style.css'
import './styles/global.css'
import './composables/dark'
import { version } from './package.json'
import { ensureDataFetch } from '~/composables/payload'
useHead({
title: 'ESLint Config Inspector',
})
await ensureDataFetch()
</script>

<template>
<div v-if="errorInfo" grid h-full w-full place-content-center whitespace-pre-line>
<div font-200 text-xl mb6>
<a
href="https://github.com/eslint/config-inspector" target="_blank"
flex="inline gap-2 items-center" mr1
>
<img src="/favicon.svg" inline-block h-1em>
<span op75>ESLint Config Inspector</span>
</a>
<sup op50>v{{ version }}</sup>
</div>

<div text-2xl text-red5 font-bold>
Failed to load <span rounded bg-red:5 px2>eslint.config.js</span><br>
</div>

<div text-lg text-red font-mono>
{{ errorInfo.error }}
</div>

<div op50 mt6>
Note that
<a href="https://github.com/eslint/config-inspector" target="_blank" hover:underline>config inspector</a>
only works with the <a href="https://eslint.org/docs/latest/use/configure/configuration-files-new" target="_blank" font-bold hover:underline>flat config format</a>.
</div>
</div>
<div v-else px14 py10>
<NavBar />
<NuxtPage />
</div>
</template>
15 changes: 15 additions & 0 deletions bin.mjs
Original file line number Diff line number Diff line change
@@ -0,0 +1,15 @@
#!/usr/bin/env node

import process from 'node:process'
import open from 'open'
import { getPort } from 'get-port-please'

process.env.HOST = process.env.HOST || '127.0.0.1'
process.env.PORT = process.env.PORT || await getPort({ port: 7777 })

await Promise.all([
import('./dist/server/index.mjs'),
process.env.NO_OPEN
? undefined
: open(`http://localhost:${process.env.PORT}`),
])
22 changes: 22 additions & 0 deletions components/ColorizedConfigName.ts
Original file line number Diff line number Diff line change
@@ -0,0 +1,22 @@
export default defineComponent({
props: {
name: {
type: String,
required: true,
},
},
setup(props) {
const parts = computed(() => props.name.split(/([:/])/g).filter(Boolean))
return () => h('span', parts.value.map((part, i) => {
return h(
'span',
[':', '/'].includes(part)
? { style: { opacity: 0.4 } }
: i !== parts.value.length - 1
? { style: { color: getPluginColor(part) } }
: null,
part,
)
}))
},
})
57 changes: 57 additions & 0 deletions components/ColorizedRuleName.vue
Original file line number Diff line number Diff line change
@@ -0,0 +1,57 @@
<script setup lang="ts">
import { computed } from 'vue'
const props = defineProps<{
name: string
prefix?: string
url?: string
as?: string
deprecated?: boolean
borderless?: boolean
break?: boolean
}>()
const parsed = computed(() => {
if (props.prefix) {
if (props.name.startsWith(props.prefix)) {
return {
scope: props.prefix,
name: props.name.slice(props.prefix.length).replace(/^\/+/, ''),
}
}
else {
return {
scope: undefined,
name: props.name,
}
}
}
const parts = props.name.split('/')
if (parts.length === 1) {
return {
scope: undefined,
name: parts[0],
}
}
return {
scope: parts[0],
name: parts.slice(1).join('/'),
}
})
</script>

<template>
<component
:is="as || 'div'"
ws-nowrap font-mono of-hidden text-ellipsis
:class="[
deprecated ? 'line-through' : '',
borderless ? '' : 'border border-base px2 bg-gray:5 rounded',
]"
>
<span v-if="parsed.scope" :style="{ color: getPluginColor(parsed.scope) }">{{ parsed.scope }}</span>
<span v-if="parsed.scope" op30>/</span>
<br v-if="parsed.scope && props.break">
<span op75>{{ parsed.name }}</span>
</component>
</template>
Loading

0 comments on commit 4acbd4f

Please sign in to comment.