Astro環境下でMarkuplintプラグインを使用する【環境設定】

Astro環境下でMarkuplintを導入したので備忘録を残します。

こんにちは。フロントエンドエンジニアを目指している Webコーダーのはるです。

今日は、Astro環境下でMarkuplintプラグインを使用する環境設定についてです。

認識の間違えている箇所がありましたら、お問い合わせからご指摘いただけるとうれしいです。

Astro環境構築
Markuplintの環境構築

Astro環境構築

Astroを自動CLIでインストール

npm、pnpm、またはYarnを使って、create-astro CLIツールによりAstroをインストールする方法です。

公式ドキュメントに沿って、Terminalからセットアップを行いました。

かなり簡易ですが備忘録です。

■ npm install

$ cd プロジェクトを作成したいディレクトリ

$ npm create astro@latest

■ 自動のセットアップウィザートに沿って設定

1. Where should we create your new project?
   → ./astro-site (ターミナルにいるディレクトリ内に新規作成される) 
2. How would you like to start your new project? 
   → Include sample files (Astroのディクトリ構造がサンプルで入ります)
3. Install dependencies?
   → Yes （依存関係をインストール(推奨) ）
4. Do you plan to write TypeScript? 
   → No (TypeScriptを使用するか否か)
5. Initialize a new git repository? 
   → Yes (git init)

■ set up 完了

■ Open in VSCode

$ cd astro-site (自分で作成したプロジェクト名)
$ code . (VSCodeを開く)

ちなみに、code . でVSCodeを開けるようにするには下記の設定が必要です。

VSCodeを開き、コマンドパレットを開く。（Shift + Cmd + P）

Shell Command: Install ‘code’ command in PATH を選択→install

codeコマンドが使用できるようになります。便利です。

Markuplintの環境構築

ゆうてんさん(@cloud10designs)が開発されているHTMLリンターです。

Markuplint - すべてのマークアップ開発者のためのHTMLリンター | Markuplint

あなたのマークアップに安寧を。すべてのマークアップ開発者のためのHTMLリンター。

Markuplintは、プラグインを通じてHTML以外の構文やテンプレートエンジンについても評価することができます。Pug, JSX(React), Vue, Svelte, Astro, PHP, Smarty, eRuby, EJS, Mustache/Handlebars, Nunjucks, Liquid用のプラグインが用意されています。（公式より）

Astroにも対応されているとのことで、環境構築に挑戦しました。

簡易ながら備忘録です。

下記を参考にさせていただきました。

HTML以外につかう | Markuplint

プラグインをつかうことで、テンプレートエンジンやフレームワークなどのHTML以外の構文にも適用できます。

@markuplint/astro-parser

astro parser for markuplint. Latest version: 4.3.0, last published: 20 hours ago. Start using @markuplint/astro-parser i...

（　■ VSCodeの拡張機能「markuplint」をインストール→再起動）

■ npm install for Astro

パーサープラグインをインストールします

$ npm install -D @markuplint/astro-parser

■ パーサープラグインの適用 for Astro

ディレクトリルートに、.markuplintrcファイルを作成し、以下を記述。

// .markuplintrc

{
　"parser": {
　　".astro$": "@markuplint/astro-parser"
　},
  "extends": ["markuplint:recommended"],
  "pretenders": [
　　{
　　　"selector": "List",
　　　"as": "ul"
　　},
　　{
　　　"selector": "Card",
　　　"as": "li"
　　}
　]
}

extendsには、適用するルールを設定します。recommendにしました。

（preset設定）

プリセットをつかう | Markuplint

いくつかのプリセットがあります。ルールはそれぞれを有効にする必要があるため、これらを指定することをオススメします。

■ package.jsonにオプションを追加

// package.json

"scripts": {
　"lint": "markuplint ./src/pages/index.astro"
}

パスには、チェックしたいファイルのパスを入れます。

対象のページを一度にチェックしたいときは、以下のように設定します。

"scripts": {
　"lint": "markuplint \"./src/**/*.astro\""
}

ゆうてんさんが教えてくださいました。ありがとうございます！

いえいえ、こちらこそご利用ありがとうございます。

もし対象のページを一度にチェックしたい場合は

"scripts": {
"lint": "markuplint \"./src/**/*.astro\""
}

とするとよいですよ。

— ゆうてん🖖 (@cloud10designs) March 27, 2023