chore: add support for markdown files in project eslint config

Rel1cx · Rel1cx · commit 4539e7f9e5cd · 2024-12-27T04:08:05.000+08:00
diff --git a/.vscode/settings.json b/.vscode/settings.json
@@ -32,6 +32,8 @@
     "typescript",
     "typescriptreact",
     "yaml",
+    "markdown",
+    "mdx",
     "github-actions-workflow" // for GitHub Actions workflow files
   ],
   "editor.codeActionsOnSave": {
diff --git a/CHANGELOG.md b/CHANGELOG.md
@@ -1279,6 +1279,3 @@ function useAuth() {
 
 - Update Options of rule `jsx/no-useless-fragment`.
 - Optimize bundle size.
-
-```
-```
diff --git a/README.md b/README.md
@@ -1,3 +1,5 @@
+<!-- eslint-disable markdown/no-html -->
+
 <p align="center"><img src="https://eslint-react.xyz/logo.svg" alt="logo" width="150" /></p>
 
 <h1 align="center" alt="title">ESLint React</h1>
diff --git a/eslint.config.ts b/eslint.config.ts
@@ -3,6 +3,7 @@ import url from "node:url";
 
 import { Record } from "effect";
 import eslintJs from "@eslint/js";
+import eslintMarkdown from "@eslint/markdown";
 import eslintPluginImport from "eslint-plugin-import-x";
 import eslintPluginJsdoc from "eslint-plugin-jsdoc";
 import eslintPluginLocal from "@workspace/eslint-plugin-local";
@@ -23,6 +24,7 @@ const dirname = url.fileURLToPath(new URL(".", import.meta.url));
 
 const GLOB_JS = ["*.{js,jsx,cjs,mjs}", "**/*.{js,jsx,cjs,mjs}"];
 const GLOB_TS = ["*.{ts,tsx,cts,mts}", "**/*.{ts,tsx,cts,mts}"];
+const GLOB_MD = ["*.md", "**/*.md"];
 const GLOB_TEST = [
   "**/*.spec.{ts,tsx,cts,mts}",
   "**/*.test.{ts,tsx,cts,mts}",
@@ -94,6 +96,21 @@ const typeCheckedRules = {
 
 export default tseslint.config(
   eslintConfigFlatGitignore(),
+  {
+    extends: [
+      // @ts-expect-error - TODO: make types compatible
+      eslintMarkdown.configs.recommended,
+    ],
+    files: GLOB_MD,
+    ignores: [
+      "packages/**/docs/**/*.md",
+    ],
+    language: "markdown/gfm",
+    rules: {
+      "markdown/no-html": "error",
+      "markdown/no-missing-label-refs": "off",
+    },
+  },
   {
     name: "global-ignores",
     ignores: [
diff --git a/examples/next-app/tsconfig.json b/examples/next-app/tsconfig.json
@@ -1,6 +1,6 @@
 {
   "compilerOptions": {
-    "target": "es5",
+    "target": "ES2021",
     "lib": [
       "dom",
       "dom.iterable",
diff --git a/packages/plugins/eslint-plugin/README.md b/packages/plugins/eslint-plugin/README.md
@@ -1,3 +1,5 @@
+<!-- eslint-disable markdown/no-html -->
+
 <p align="center"><img src="https://eslint-react.xyz/logo.svg" alt="logo" width="150" /></p>
 
 <h1 align="center" alt="title">ESLint React</h1>
diff --git a/packages/plugins/eslint-plugin/src/utils/transform-keys.ts b/packages/plugins/eslint-plugin/src/utils/transform-keys.ts
@@ -1,15 +1,23 @@
-/* eslint-disable @susisu/safe-typescript/no-type-assertion, better-mutation/no-mutation */
+/* eslint-disable @typescript-eslint/no-unsafe-type-assertion, @susisu/safe-typescript/no-type-assertion, better-mutation/no-mutation */
 // Copied from https://github.com/gustavoguichard/string-ts/blob/9dd444f03fdfa225f1643e6f1f8c18f9480224bb/src/utils/object-keys/transform-keys.ts#L12
 
 import { typeOf } from "@eslint-react/types";
 
+/**
+ * This function is used to shallowly transform the keys of an object.
+ * It will only be transformed at runtime, so it's not type safe.
+ * @param obj the object to transform.
+ * @param transform the function to transform the keys from string to string.
+ * @returns the transformed object.
+ * @example transformKeys({ 'foo-bar': { 'fizz-buzz': true } }, camelCase)
+ * // { fooBar: { 'fizz-buzz': true } }
+ */
 export function transformKeys<T>(obj: T, transform: (s: string) => string): T {
   if (typeOf(obj) !== "object") return obj;
-  // eslint-disable-next-line @typescript-eslint/no-unsafe-type-assertion
+
   const res = {} as T;
   for (const key in obj) {
     res[transform(key) as keyof T] = obj[key];
   }
-
   return res;
 }
diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml
diff --git a/website/eslint.config.mjs b/website/eslint.config.mjs
@@ -1,22 +1,35 @@
-// ts-check
-
 import eslintJs from "@eslint/js";
 import eslintReact from "@eslint-react/eslint-plugin";
+import eslintMarkdown from "@eslint/markdown";
 import eslintPluginMdx from "eslint-plugin-mdx";
 import eslintPluginNext from "@next/eslint-plugin-next";
 import eslintPluginReactHooks from "eslint-plugin-react-hooks";
+import eslintPluginReactRefresh from "eslint-plugin-react-refresh";
 import eslintPluginSimpleImportSort from "eslint-plugin-simple-import-sort";
 import tseslint from "typescript-eslint";
 import gitignore from "eslint-config-flat-gitignore";
 
-const GLOB_TS = ["**/*.{ts,tsx}"];
-const GLOB_JS = ["**/*.{js,cjs,mjs}"];
+import TSCONFIG from "./tsconfig.json" with { type: "json" };
+
+const GLOB_TS = ["**/*.ts", "**/*.tsx"];
+const GLOB_JS = ["**/*.js", "**/*.jsx"];
+const GLOB_MD = ["**/*.md"];
 const GLOB_MDX = ["**/*.mdx"];
 const GLOB_APP = ["app/**/*.{js,ts,jsx,tsx}"];
-const GLOB_CONFIG = ["**/*.config.{js,mjs,cjs,ts,tsx}"];
+const GLOB_CONFIG = ["**/*.config.{js,mjs,ts,tsx}"];
 
 export default tseslint.config(
-  eslintJs.configs.recommended,
+  {
+    files: GLOB_MD,
+    extends: [
+      eslintMarkdown.configs.recommended,
+    ],
+    language: "markdown/gfm",
+    rules: {
+      "markdown/no-html": "error",
+      "markdown/no-missing-label-refs": "off",
+    },
+  },
   {
     ...eslintPluginMdx.flat,
     files: GLOB_MDX,
@@ -26,30 +39,47 @@ export default tseslint.config(
   },
   {
     files: GLOB_TS,
+    extends: [
+      eslintJs.configs.recommended,
+      tseslint.configs.recommended,
+    ],
+  },
+  {
+    files: TSCONFIG.include,
     extends: [
       tseslint.configs.recommendedTypeChecked,
     ],
     languageOptions: {
       parser: tseslint.parser,
       parserOptions: {
         project: "./tsconfig.json",
+        projectService: true,
         tsconfigRootDir: import.meta.dirname,
       },
     },
   },
   {
-    files: [...GLOB_TS, ...GLOB_MDX],
-    ...eslintReact.configs.recommended,
+    files: TSCONFIG.include,
+    ...eslintReact.configs["recommended-type-checked"],
   },
   {
-    files: GLOB_TS,
+    files: TSCONFIG.include,
     plugins: {
       "react-hooks": eslintPluginReactHooks,
     },
     rules: eslintPluginReactHooks.configs.recommended.rules,
   },
   {
-    files: GLOB_TS,
+    files: TSCONFIG.include,
+    plugins: {
+      "react-refresh": eslintPluginReactRefresh,
+    },
+    rules: {
+      "react-refresh/only-export-components": "warn",
+    },
+  },
+  {
+    files: TSCONFIG.include,
     plugins: {
       "@next/next": eslintPluginNext,
     },
@@ -59,13 +89,13 @@ export default tseslint.config(
     },
   },
   {
-    files: [...GLOB_TS, ...GLOB_MDX],
+    files: GLOB_JS,
     plugins: {
       "simple-import-sort": eslintPluginSimpleImportSort,
     },
     rules: {
-      "simple-import-sort/exports": "warn",
       "simple-import-sort/imports": "warn",
+      "simple-import-sort/exports": "warn",
     },
   },
   {
@@ -75,18 +105,12 @@ export default tseslint.config(
     },
   },
   {
-    files: [...GLOB_JS, ...GLOB_MDX],
-    ...tseslint.configs.disableTypeChecked,
-  },
-  {
-    files: GLOB_JS,
+    files: [...GLOB_JS, ...GLOB_CONFIG],
     rules: {
+      ...tseslint.configs.disableTypeChecked.rules,
       "no-undef": "off",
-      "@typescript-eslint/no-require-imports": "off",
+      "no-console": "off",
     },
   },
   gitignore(),
-  {
-    ignores: GLOB_CONFIG,
-  },
 );
diff --git a/website/tsconfig.json b/website/tsconfig.json
@@ -4,28 +4,23 @@
     "@tsconfig/node22/tsconfig.json"
   ],
   "compilerOptions": {
+    "target": "ES2021",
     "lib": [
-      "DOM",
-      "DOM.Iterable",
-      "ESNext"
+      "dom",
+      "dom.iterable",
+      "esnext"
     ],
-    "noEmit": true,
-    "module": "ESNext",
-    "moduleResolution": "bundler",
+    "allowJs": true,
     "skipLibCheck": true,
-    "moduleDetection": "force",
-    "isolatedModules": true,
-    "verbatimModuleSyntax": true,
-    "allowJs": false,
-    "checkJs": false,
     "strict": true,
-    "noImplicitAny": true,
-    "noImplicitThis": true,
-    "noUnusedLocals": false,
-    "noUnusedParameters": false,
-    "exactOptionalPropertyTypes": true,
-    "composite": false,
-    "stripInternal": false,
+    "forceConsistentCasingInFileNames": true,
+    "noEmit": true,
+    "incremental": true,
+    "esModuleInterop": true,
+    "module": "esnext",
+    "moduleResolution": "node",
+    "resolveJsonModule": true,
+    "isolatedModules": true,
     "jsx": "preserve",
     "paths": {
       "#": [
@@ -35,15 +30,18 @@
         "./*"
       ]
     },
-    "resolveJsonModule": true,
-    "incremental": true
+    "plugins": [
+      {
+        "name": "next"
+      }
+    ]
   },
   "include": [
-    "*.d.ts",
-    "*.config.js",
-    "*.config.mjs",
     "**/*.ts",
-    "**/*.tsx"
+    "**/*.tsx",
+    "*.d.ts",
+    "next-env.d.ts",
+    ".next/types/**/*.ts"
   ],
   "exclude": [
     "node_modules"
diff --git a/workspace/eslint-plugin-deps/package.json b/workspace/eslint-plugin-deps/package.json
@@ -4,6 +4,7 @@
   "private": true,
   "description": "Local ESLint dependencies",
   "dependencies": {
+    "@eslint/markdown": "^6.2.1",
     "@susisu/eslint-plugin-safe-typescript": "^0.9.2",
     "eslint-plugin-better-mutation": "^1.5.0",
     "eslint-plugin-eslint-plugin": "^6.4.0",

Original file line number	Diff line number	Diff line change
`@@ -1,3 +1,5 @@`
	`1`	`+<!-- eslint-disable markdown/no-html -->`
	`2`	`+`
`1`	`3`	`<p align="center"><img src="https://eslint-react.xyz/logo.svg" alt="logo" width="150" /></p>`
`2`	`4`
`3`	`5`	`<h1 align="center" alt="title">ESLint React</h1>`
Original file line number	Diff line number	Diff line change
`@@ -1,6 +1,6 @@`
`1`	`1`	`{`
`2`	`2`	`"compilerOptions": {`
`3`		`- "target": "es5",`
	`3`	`+ "target": "ES2021",`
`4`	`4`	`"lib": [`
`5`	`5`	`"dom",`
`6`	`6`	`"dom.iterable",`