ガイド

はじめる

もっとも簡単な方法: VS Code 拡張

Markuplint拡張をVisual Studio Marketplaceからインストールするか、VS Codeの拡張機能パネルで「markuplint」と検索してください。

これだけです。 HTMLファイルを開けば、Markuplintがリアルタイムでチェックを始めます。インストールも設定ファイルも不要です。デフォルトで推奨プリセットが適用されます。

警告にホバーすると、ルール名と詳細が表示されます。ルール名をクリックするとドキュメントに飛べます。

ヒント

VS Codeベースのエディタにも対応しています: Cursor、Windsurf、VSCodiumなど、VS Code拡張をサポートするエディタで利用できます。

フレームワーク（React、Vueなど）で使う

プロジェクトでJSX、Vue、Svelteなどのテンプレート構文を使っている場合は、Markuplintとパーサープラグインをプロジェクトにインストールします:

npm

npm install -D markuplint @markuplint/jsx-parser @markuplint/react-spec

Yarn

yarn add --dev markuplint @markuplint/jsx-parser @markuplint/react-spec

pnpm

pnpm add -D markuplint @markuplint/jsx-parser @markuplint/react-spec

Bun

bun add --dev markuplint @markuplint/jsx-parser @markuplint/react-spec

プロジェクトルートに設定ファイル（.markuplintrc）を作成します:

.markuplintrc

{
  "extends": ["markuplint:recommended-react"],
  "parser": {
    "\\.jsx$": "@markuplint/jsx-parser"
  },
  "specs": {
    "\\.jsx$": "@markuplint/react-spec"
  }
}

備考

npx markuplint --init を実行すると、対話形式でセットアップすることもできます。

対応する構文の一覧と設定例はHTML以外の構文で使うを参照してください。

コマンドラインから使う

CIやnpmスクリプトでMarkuplintを実行したい場合は、プロジェクトにインストールします:

npm

npm install -D markuplint

Yarn

yarn add --dev markuplint

pnpm

pnpm add -D markuplint

Bun

bun add --dev markuplint

package.jsonにスクリプトを追加します:

package.json

{
  "scripts": {
    "lint:html": "markuplint \"**/*.html\""
  }
}

npm

npm run lint:html

Yarn

yarn lint:html

pnpm

pnpm run lint:html

Bun

bun run lint:html

備考

設定ファイルが見つからない場合は推奨プリセットが自動的に適用されます。

必須スペック

• Node.js v22.0.0以上

次のステップ

• プリセットを使う — プロジェクトに合ったプリセットを選び、有効にするルールをカスタマイズする
• ルールを設定する — 個別のルールを調整し、特定の要素に異なる設定を適用する
• HTML以外の構文で使う — JSX、Vue、Svelte、Pug、PHPなどのパーサーを設定する
• 設定 — 設定ファイルの形式と利用可能なすべてのプロパティについて