slidev-md-lint

slidev-md-lint

Slidev のスライド（.md）に書いた Vue / HTML 部分 を、.vue ファイルと同じように ESLint でチェック・自動整形するための共有設定です。Markdown 部分は prettier-plugin-slidev で整えます。

何が直るか

eslint --fix（または VS Code の保存時の自動修正）で、たとえば次のように整います。

<!-- 修正前 -->
<div>
      <div>これを <MathText>$(\bm{x}, \bm{A}\bm{x})$</MathText> に代入する</div>
<br/>
  <ul><li>a <MathText>$x$</MathText> b</li></ul>
</div>

<!-- 修正後 -->
<div>
  <div>
    これを <MathText>$(\bm{x}, \bm{A}\bm{x})$</MathText> に代入する
  </div>
  <br />
  <ul>
    <li>
      a <MathText>$x$</MathText> b
    </li>
  </ul>
</div>

触らないもの

• インライン要素の改行: span、a、b、code、MathText、HighlightText、EqRef、Citation などは、前後に改行を足しません。改行すると表示上の空白が増えて、日本語や数式の見た目が変わるためです。ほかのインラインコンポーネントを足すときは、index.js の INLINE に追加してください。
• props の書き方: :currentChapter のような camelCase をハイフンにしません（vue/attribute-hyphenation を無効）。
• 数式の < >: パースエラーとして扱いません（vue/no-parsing-error を無効）。
• frontmatter とコードフェンス: 検査の対象外です。

インストール

npm i -D slidev-md-lint eslint prettier

eslint と prettier は peerDependencies です（ESLint 9 の flat config が必要）。

設定

eslint.config.js

import base from 'slidev-md-lint/base' // .js / .ts / .vue の基本ルール
import slidevMd from 'slidev-md-lint' // .md の中の Vue

export default [
  ...base,
  ...slidevMd,
  // プロジェクト固有のルールがあればここに追加
]

.md のうち、slides.md と pages/**/*.md が対象です。.vue / .ts の設定が別にある場合は slidev-md-lint（.md 用）だけを足してください。

prettier.config.js

import base from 'slidev-md-lint/prettier'

export default base

設定値は semi: false、singleQuote: true、printWidth: 80 などです。slides.md と pages/**/*.md は prettier-plugin-slidev のパーサーで整形します。

package.json

{
  "scripts": {
    "lint": "eslint .",
    "lint:fix": "eslint . --fix",
    "format": "prettier --write ."
  }
}

VS Code（保存時に自動で直す）

必要な拡張機能は ESLint と Prettier です。

.vscode/settings.json

{
  "editor.formatOnSave": true,
  "editor.codeActionsOnSave": {
    "source.fixAll.eslint": "explicit"
  },
  "editor.defaultFormatter": "esbenp.prettier-vscode",
  "eslint.validate": ["javascript", "typescript", "vue", "markdown"]
}

設定を変えたあとは、コマンドパレットの ESLint: Restart ESLint Server を実行してください。拡張機能が古い設定を覚えたままになります。

仕組み

.md を --- 区切りでスライドに分け、スライド 1 枚ごとに <template>…</template> で包んで、eslint-plugin-vue に渡します（ESLint の processor）。自動修正は元の .md の位置に補正して書き戻します。

注意

• 自動修正はファイルを書き換えます。初めて使うときは、先に git commit しておくと安心です。
• 空要素の <div /> は <div></div> に直します（Markdown 中の HTML として安全なため）。
• Slidev の記法のうち、frontmatter 以外の --- の使い方（コードフェンスの外で --- だけの行）はスライドの区切りとして扱います。

ライセンス

MIT