feat: support parsing markdown via eslint-mdx natively (#621)

Author: JounQin

.changeset/slimy-boats-fold.md

@@ -1,5 +1,5 @@
 ---
-'eslint-plugin-prettier': patch
+"eslint-plugin-prettier": patch
 ---
 
 Add exports mapping to package.json, to allow `import eslintPluginRecommended from 'eslint-plugin-prettier/recommended'` to work as expected.

.changeset/warm-cougars-attack.md

@@ -0,0 +1,5 @@
+---
+"eslint-plugin-prettier": patch
+---
+
+feat: support parsing `markdown` via `eslint-mdx` natively

.prettierrc

@@ -1,5 +1,13 @@
 {
   "arrowParens": "avoid",
   "singleQuote": true,
-  "plugins": ["@prettier/plugin-pug", "prettier-plugin-pkg"]
+  "plugins": ["@prettier/plugin-pug", "prettier-plugin-pkg"],
+  "overrides": [
+    {
+      "files": ".changeset/**/*",
+      "options": {
+        "singleQuote": false
+      }
+    }
+  ]
 }

eslint-plugin-prettier.js

@@ -9,8 +9,10 @@
  * @typedef {import('eslint').AST.Range} Range
  * @typedef {import('eslint').AST.SourceLocation} SourceLocation
  * @typedef {import('eslint').ESLint.Plugin} Plugin
+ * @typedef {import('eslint').ESLint.ObjectMetaProperties} ObjectMetaProperties
  * @typedef {import('prettier').FileInfoOptions} FileInfoOptions
- * @typedef {import('prettier').Options & { onDiskFilepath: string, parserPath: string, usePrettierrc?: boolean }} Options
+ * @typedef {import('prettier').Options} PrettierOptions
+ * @typedef {PrettierOptions & { onDiskFilepath: string, parserMeta?: ObjectMetaProperties['meta'], parserPath?: string, usePrettierrc?: boolean }} Options
  */
 
 'use strict';
@@ -167,10 +169,12 @@ const eslintPluginPrettier = {
             }
 
             /**
-             * @type {{}}
+             * @type {PrettierOptions}
              */
             const eslintPrettierOptions = context.options[0] || {};
 
+            const parser = context.languageOptions?.parser;
+
             // prettier.format() may throw a SyntaxError if it cannot parse the
             // source code it is given. Usually for JS files this isn't a
             // problem as ESLint will report invalid syntax before trying to
@@ -190,6 +194,12 @@ const eslintPluginPrettier = {
                   ...eslintPrettierOptions,
                   filepath,
                   onDiskFilepath,
+                  parserMeta:
+                    parser &&
+                    (parser.meta ?? {
+                      name: parser.name,
+                      version: parser.version,
+                    }),
                   parserPath: context.parserPath,
                   usePrettierrc,
                 },

eslint.config.js

@@ -25,14 +25,6 @@ module.exports = [
       'eslint-plugin/report-message-format': ['error', '^[^a-z].*\\.$'],
     },
   },
-  {
-    files: ['**/*.md'],
-    rules: { 'prettier/prettier': ['error', { parser: 'markdown' }] },
-  },
-  {
-    files: ['**/*.mdx'],
-    rules: { 'prettier/prettier': ['error', { parser: 'mdx' }] },
-  },
   // Global ignores
   // If a config block only contains an `ignores` key, then the globs are
   // ignored globally

package.json

@@ -99,7 +99,8 @@
   },
   "pnpm": {
     "patchedDependencies": {
-      "@graphql-eslint/eslint-plugin@3.20.0": "patches/@graphql-eslint__eslint-plugin@3.20.0.patch"
+      "@graphql-eslint/eslint-plugin@3.20.0": "patches/@graphql-eslint__eslint-plugin@3.20.0.patch",
+      "@types/eslint@8.44.7": "patches/@types__eslint@8.44.7.patch"
     }
   }
 }

patches/@types__eslint@8.44.7.patch

@@ -0,0 +1,14 @@
+diff --git a/index.d.ts b/index.d.ts
+index 75ae420e38148c632230763f26382ef0d9024427..6b8b08da2e25b54dedf41f1db0f2ba6e2c718b30 100644
+--- a/index.d.ts
++++ b/index.d.ts
+@@ -753,6 +753,9 @@ export namespace Rule {
+         id: string;
+         options: any[];
+         settings: { [name: string]: any };
++        languageOptions: {
++            parser: Linter.ParserModule;
++        } & Linter.ParserOptions;
+         parserPath: string;
+         parserOptions: Linter.ParserOptions;
+         parserServices: SourceCode.ParserServices;

pnpm-lock.yaml

@@ -0,0 +1,5 @@
+# Heading
+
+```ts
+export declare const x = 1
+```

test/fixtures/md.md

@@ -38,7 +38,7 @@ const eslint = new ESLint({
     extends: 'plugin:prettier/recommended',
     overrides: [
       {
-        files: '*.mdx',
+        files: ['*.{md,mdx}'],
         extends: 'plugin:mdx/recommended',
         settings: {
           'mdx/code-block': true,
@@ -228,6 +228,26 @@ mdxRuleTester.run('eslint-plugin-mdx', rule, {
   ],
 });
 
+runFixture('*.md', [
+  [
+    {
+      column: 27,
+      endColumn: 27,
+      endLine: 4,
+      fix: {
+        range: [43, 43],
+        text: ';',
+      },
+      line: 4,
+      message: 'Insert `;`',
+      messageId: 'insert',
+      nodeType: null,
+      ruleId: 'prettier/prettier',
+      severity: 2,
+    },
+  ],
+]);
+
 runFixture('*.mdx', [
   [
     {

test/prettier.js

@@ -2,7 +2,8 @@
 
 /**
  * @typedef {import('prettier').FileInfoOptions} FileInfoOptions
- * @typedef {import('prettier').Options & { onDiskFilepath: string, parserPath?: string, usePrettierrc?: boolean }} Options
+ * @typedef {import('eslint').ESLint.ObjectMetaProperties} ObjectMetaProperties
+ * @typedef {import('prettier').Options & { onDiskFilepath: string, parserMeta?: ObjectMetaProperties['meta'], parserPath?: string, usePrettierrc?: boolean }} Options
  */
 
 const { runAsWorker } = require('synckit');
@@ -24,6 +25,7 @@ runAsWorker(
     {
       filepath,
       onDiskFilepath,
+      parserMeta,
       parserPath,
       usePrettierrc,
       ...eslintPrettierOptions
@@ -58,7 +60,7 @@ runAsWorker(
       return;
     }
 
-    const initialOptions = {};
+    const initialOptions = { parser: inferredParser ?? 'babel' };
 
     // ESLint supports processors that let you extract and lint JS
     // fragments within a non-JS language. In the cases where prettier
@@ -94,9 +96,9 @@ runAsWorker(
       // 2. `eslint-plugin-html`
       // 3. `eslint-plugin-markdown@1` (replacement: `eslint-plugin-markdown@2+`)
       // 4. `eslint-plugin-svelte3` (replacement: `eslint-plugin-svelte@2+`)
-      const parserBlocklist = [null, 'markdown', 'html'];
+      const parserBlocklist = ['html'];
 
-      let inferParserToBabel = parserBlocklist.includes(inferredParser);
+      let inferParserToBabel = parserBlocklist.includes(initialOptions.parser);
 
       switch (inferredParser) {
         // it could be processed by `@graphql-eslint/eslint-plugin` or `eslint-plugin-graphql`
@@ -109,12 +111,24 @@ runAsWorker(
           }
           break;
         }
+        case 'markdown': {
+          // it could be processed by `eslint-plugin-markdown@1` or correctly parsed by `eslint-mdx`
+          if (
+            (typeof parserMeta !== 'undefined' &&
+              parserMeta.name !== 'eslint-mdx') ||
+            (typeof parserPath === 'string' &&
+              !/([\\/])eslint-mdx\1/.test(parserPath))
+          ) {
+            inferParserToBabel = true;
+          }
+          break;
+        }
         // it could be processed by `@ota-meshi/eslint-plugin-svelte`, `eslint-plugin-svelte` or `eslint-plugin-svelte3`
         case 'svelte': {
           // The `source` would be modified by `eslint-plugin-svelte3`
           if (
             typeof parserPath === 'string' &&
-            !parserPath.includes('svelte-eslint-parser')
+            !/([\\/])svelte-eslint-parser\1/.test(parserPath)
           ) {
             // We do not support `eslint-plugin-svelte3`,
             // the users should run `prettier` on `.svelte` files manually
@@ -152,6 +166,9 @@ runAsWorker(
       }
     }
 
+    /**
+     * @type {import('prettier').Options}
+     */
     const prettierOptions = {
       ...initialOptions,
       ...prettierRcOptions,