_で始まる変数名を無視するよう設定、markdownレンダー部分のeslintエラー解消

Author: na-trium-144

app/[docs_id]/markdown.tsx

@@ -12,31 +12,31 @@ export function StyledMarkdown({ content }: { content: string }) {
 
 // TailwindCSSがh1などのタグのスタイルを消してしまうので、手動でスタイルを指定する必要がある
 const components: Components = {
-  h1: ({ node, ...props }) => (
+  h1: ({ node: _, ...props }) => (
     <h1 className="text-2xl font-bold my-4" {...props} />
   ),
-  h2: ({ node, ...props }) => (
+  h2: ({ node: _, ...props }) => (
     <h2 className="text-xl font-bold mt-4 mb-3 " {...props} />
   ),
-  h3: ({ node, ...props }) => (
+  h3: ({ node: _, ...props }) => (
     <h3 className="text-lg font-bold mt-4 mb-2" {...props} />
   ),
-  h4: ({ node, ...props }) => (
+  h4: ({ node: _, ...props }) => (
     <h4 className="text-base font-bold mt-3 mb-2" {...props} />
   ),
-  p: ({ node, ...props }) => <p className="mx-2 my-2" {...props} />,
-  ul: ({ node, ...props }) => (
+  p: ({ node: _, ...props }) => <p className="mx-2 my-2" {...props} />,
+  ul: ({ node: _, ...props }) => (
     <ul className="list-disc list-outside ml-6 my-2" {...props} />
   ),
-  ol: ({ node, ...props }) => (
+  ol: ({ node: _, ...props }) => (
     <ol className="list-decimal list-outside ml-6 my-2" {...props} />
   ),
-  li: ({ node, ...props }) => <li className="my-1" {...props} />,
-  a: ({ node, ...props }) => <a className="link link-info" {...props} />,
-  strong: ({ node, ...props }) => (
+  li: ({ node: _, ...props }) => <li className="my-1" {...props} />,
+  a: ({ node: _, ...props }) => <a className="link link-info" {...props} />,
+  strong: ({ node: _, ...props }) => (
     <strong className="text-primary" {...props} />
   ),
-  code: ({ node, className, ref, style, ...props }) => {
+  code: ({ node: _, className, ref: _, style: _, ...props }) => {
     const match = /language-(\w+)/.exec(className || "");
     if (match) {
       // block
@@ -73,11 +73,13 @@ const components: Components = {
       );
     }
   },
-  pre: ({ node, ...props }) => (
+  pre: ({ node: _, ...props }) => (
     <pre
       className="bg-base-200 border border-primary mx-2 my-2 rounded-lg font-mono text-sm overflow-x-auto"
       {...props}
     />
   ),
-  hr: ({ node, ...props }) => <hr className="border-primary my-4" {...props} />,
+  hr: ({ node: _, ...props }) => (
+    <hr className="border-primary my-4" {...props} />
+  ),
 };

eslint.config.mjs

@@ -10,7 +10,22 @@ const compat = new FlatCompat({
 });
 
 const eslintConfig = [
-  ...compat.extends("next/core-web-vitals", "next/typescript"),
+  ...compat.config({
+    extends: ["next/core-web-vitals", "next/typescript"],
+    rules: {
+      // Next.jsのデフォルト設定を上書き
+      "@typescript-eslint/no-unused-vars": [
+        "error",
+        {
+          vars: "all",
+          args: "after-used",
+          argsIgnorePattern: "^_",
+          varsIgnorePattern: "^_",
+          caughtErrorsIgnorePattern: "^_",
+        },
+      ],
+    },
+  }),
 ];
 
 export default eslintConfig;