ESLint Vue Editor for Slidev

Addon for Slidev (Presentation Slides for Developers)

Based on eslint-editor-vue from @ota-meshi

Usage

Install

npm i slidev-addon-eslint-editor-vue

yarn add slidev-addon-eslint-editor-vue

pnpm add slidev-addon-eslint-editor-vue

Slidev Configuration

Define addon in your slidev addons.

In your slides metadata (using Front Matter):

---
addons:
  - slidev-addon-eslint-editor-vue
---

Vite configuration

// vite.config.js
import { defineConfig, mergeConfig } from "vite"

import eevConfig from "slidev-addon-eslint-editor-vue/vite.config"

const config = defineConfig({
  // your config
})

export default mergeConfig(config, eevConfig)

Use in slides

Usually as any component.

• Can pass code as a code-block.

<ESLintVueEditor :rules="{ ... }">

```vue
<template>
  <div>Hello</div>
</template>
```

</ESLintVueEditor>

• Can pass code as a snippet.

<ESLintVueEditor :rules="{ ... }">

<<< @/snippets/code.vue

</ESLintVueEditor>

(Currently) Supported plugins

• eslint-plugin-vue
• eslint-plugin-vue-scoped-css
• @vkcn/eslint-plugin

Need another plugin? Add your