chore: MDXをESLintとremark-lintでlintする

.remarkrc.js

@@ -0,0 +1,64 @@
+// @ts-check
+import remarkPresetLintConsistent from "remark-preset-lint-consistent"
+import remarkPresetLintRecommended from "remark-preset-lint-recommended"
+import remarkMdx from "remark-mdx"
+import remarkFrontmatter from "remark-frontmatter"
+import remarkMath from "remark-math"
+import remarkGfm from "remark-gfm"
+import remarkPresetLintMarkdownStyleGuide from "remark-preset-lint-markdown-style-guide"
+import remarkPresetPrettier from "remark-preset-prettier"
+import remarkLintNoLiteralUrls from "remark-lint-no-literal-urls"
+import { lintRule } from "unified-lint-rule"
+import * as fs from "node:fs/promises"
+import { build } from "esbuild"
+
+/**
+ * Import a TypeScript module
+ * @param {string} path Path to the TypeScript file
+ * @returns {Promise<any>} The module
+ */
+const importTs = async (path) => {
+  const codeTs = (await fs.readFile(path)).toString()
+  const codeJs = (
+    await build({
+      stdin: {
+        contents: codeTs,
+        resolveDir: ".",
+        loader: "ts",
+      },
+      bundle: true,
+      format: "esm",
+      target: "es6",
+      write: false,
+    })
+  ).outputFiles[0].text
+  return import(`data:application/javascript;base64,${Buffer.from(codeJs).toString("base64url")}`)
+}
+
+const { remarkCallout } = await importTs("./src/lib/remark-plugins/remarkCallout.ts")
+
+/** @type {import("remark-preset-lint-recommended").Preset} */
+// @ts-expect-error: remark-preset-prettier types are wrong
+export default {
+  settings: {
+    bullet: "-",
+    resourceLink: false,
+  },
+  plugins: [
+    remarkMdx,
+    remarkGfm,
+    remarkFrontmatter,
+    remarkMath,
+    lintRule(
+      {
+        origin: "remark-lint:callout",
+      },
+      remarkCallout(),
+    ),
+    remarkPresetLintConsistent,
+    remarkPresetLintRecommended,
+    remarkPresetLintMarkdownStyleGuide,
+    remarkPresetPrettier,
+    [remarkLintNoLiteralUrls, false], // disable this rule because mdx only supports literal urls
+  ],
+}

.vscode/extensions.json

@@ -1,4 +1,9 @@
 {
-  "recommendations": ["astro-build.astro-vscode"],
+  "recommendations": [
+    "astro-build.astro-vscode",
+    "unifiedjs.vscode-mdx",
+    "dbaeumer.vscode-eslint",
+    "esbenp.prettier-vscode"
+  ],
   "unwantedRecommendations": []
 }

.vscode/settings.json

@@ -3,7 +3,7 @@
   "[astro]": {
     "editor.defaultFormatter": "esbenp.prettier-vscode"
   },
-  "eslint.validate": ["javascript", "javascriptreact", "astro", "typescript", "typescriptreact"],
+  "eslint.validate": ["javascript", "javascriptreact", "astro", "typescript", "typescriptreact", "markdown", "mdx"],
   "eslint.experimental.useFlatConfig": true,
   "tailwindCSS.experimental.classRegex": [
     // key名がtwで始まるものをtailwindのクラスとして認識する

eslint.config.js

@@ -8,9 +8,12 @@ import globals from "globals"
 import typescriptESLint from "@typescript-eslint/eslint-plugin"
 import typescriptESLintParser from "@typescript-eslint/parser"
 import astroESLintParser from "astro-eslint-parser"
+import * as mdx from "eslint-plugin-mdx"
 
 /// <reference types="@eslint-types/typescript-eslint" />
 
+const isFix = process.argv.findIndex((arg) => arg.startsWith("--fix")) !== -1
+
 const compat = new FlatCompat()
 
 const globalConfig = defineFlatConfig([
@@ -56,11 +59,34 @@ const astroConfig = defineFlatConfig({
   },
 })
 
+// todo: auto-fixで出力されるMDXが壊れているため、簡易的な対応として自動修正を無効化している。恐らくASTからMDXへの変換の際に問題が発生していると思われる
+/** @type {import("eslint-define-config").FlatESLintConfig[]} */
+const mdxConfig = isFix
+  ? []
+  : // @ts-expect-error: eslint-mdxはeslint-define-configに対応していない
+    // @see https://github.com/mdx-js/eslint-mdx/issues/526
+    defineFlatConfig([
+      {
+        ...mdx.flat,
+        processor: mdx.createRemarkProcessor({
+          lintCodeBlocks: false,
+          languageMapper: {},
+        }),
+      },
+      {
+        ...mdx.flatCodeBlocks,
+        rules: {
+          ...mdx.flatCodeBlocks.rules,
+        },
+      },
+    ])
+
 export default defineFlatConfig([
   gitignore(),
   eslint.configs.recommended,
   eslintConfigPrettier,
   ...extendedConfig,
   ...globalConfig,
   astroConfig,
+  ...mdxConfig,
 ])

package.json

@@ -11,7 +11,7 @@
     "format": "prettier --ignore-path .gitignore --write . --cache",
     "format:check": "prettier --ignore-path .gitignore --check . --cache",
     "lint": "eslint .",
-    "lint:fix": "eslint --fix .",
+    "lint:fix": "eslint --quiet --fix . && eslint .",
     "test": "bun test",
     "prepare": "husky install"
   },
@@ -56,6 +56,7 @@
     "eslint-define-config": "^2.0.0",
     "eslint-plugin-astro": "^0.31.0",
     "eslint-plugin-jsx-a11y": "^6.8.0",
+    "eslint-plugin-mdx": "^3.1.5",
     "globals": "^13.24.0",
     "hast-util-from-html": "^2.0.1",
     "hast-util-select": "^6.0.2",
@@ -73,9 +74,18 @@
     "rehype-custom-code": "^0.3.2",
     "rehype-katex": "^7.0.0",
     "rehype-stringify": "^10.0.0",
+    "remark-cli": "^12.0.0",
+    "remark-frontmatter": "^5.0.0",
+    "remark-gfm": "^4.0.0",
+    "remark-lint-no-literal-urls": "^3.1.2",
     "remark-math": "^6.0.0",
+    "remark-mdx": "^3.0.0",
     "remark-meta-string": "^0.1.0",
     "remark-parse": "^11.0.0",
+    "remark-preset-lint-consistent": "^5.1.2",
+    "remark-preset-lint-markdown-style-guide": "^5.1.3",
+    "remark-preset-lint-recommended": "^6.1.3",
+    "remark-preset-prettier": "^2.0.1",
     "remark-rehype": "^11.0.0",
     "shikiji": "^0.10.0",
     "sirv": "^2.0.4",
@@ -84,6 +94,7 @@
     "typescript": "^5.3.3",
     "unfurl.js": "^6.3.2",
     "unified": "^11.0.4",
+    "unified-lint-rule": "^2.1.2",
     "unist-util-inspect": "^8.0.0",
     "unist-util-visit": "^5.0.0",
     "vite": "^5.0.10"