Twoslash ESLint
This package provides a ESLint-backed Twoslasher runner. Instead of checking for types, it converts ESLint diagnostics into Twoslash compatible interface and present ESLint warning and errors.
For example:
ts
const unused = 1
type Foo = {
bar: string
}
Installation
bash
npm i -D twoslash-eslint
bash
pnpm i -D twoslash-eslint
bash
yarn add -D twoslash-eslint
bash
bun add -D twoslash-eslint
Usage
ts
import { createTwoslasher } from 'twoslash-eslint'
const code = `
console.log('Code to lint')
`
const twoslasher = createTwoslasher({
// Provide the ESLint FlatConfig array here
eslintConfig: [
{
files: ['**'],
plugins: { /* ... */ },
rules: { /* ... */ }
}
]
})
const result = twoslasher(code, 'index.ts')
Usage with Shiki
If you are using @shikijs/twoslash
and want to support both TypeScript Twoslash and ESLint TwoSlash, you can use the following code:
ts
import Shiki from '@shikijs/markdown-it'
import { transformerTwoslash } from '@shikijs/twoslash'
import { createTwoslasher as createTwoslasherESLint } from 'twoslash-eslint'
const shikiPlugin = await Shiki({
theme: 'vitesse-light',
// Or any other integrations that support passing Shiki transformers
transformers: [
// This is for normal TypeScript Twoslash
transformerTwoslash({
explicitTrigger: /\btwoslash\b/,
}),
// Create another transformer, but with different trigger and ESLint twoslasher
transformerTwoslash({
explicitTrigger: /\beslint-check\b/,
// Pass the custom twoslasher
twoslasher: createTwoslasherESLint({
eslintConfig: [
// ESLint flat config items here
]
}),
// Use hover to render errors instead of inserting a error line
// Up to your preference
errorRendering: 'hover',
}),
]
})
ts
// @noErrors
import Shiki from '@shikijs/markdown-it'
import { transformerTwoslash } from '@shikijs/twoslash'
import { createTwoslasher as createTwoslasherESLint } from 'twoslash-eslint'
const shikiPlugin = await Shiki({
theme: 'vitesse-light',
// Or any other integrations that support passing Shiki transformers
transformers: [
// This is for normal TypeScript Twoslash
transformerTwoslash({
explicitTrigger: /\btwoslash\b/,
}),
// Create another transformer, but with different trigger and ESLint twoslasher
transformerTwoslash({
explicitTrigger: /\beslint-check\b/,
// Pass the custom twoslasher
twoslasher: createTwoslasherESLint({
eslintConfig: [
// ESLint flat config items here
]
}),
// Use hover to render errors instead of inserting a error line
// Up to your preference
errorRendering: 'hover',
}),
]
})
And then you can have the following code in your markdown:
md
```ts twoslash
console.log('normal typescript twoslash')
```
```ts eslint-check
console.log('normal eslint twoslash')
```