feat: use processor to display remark reports directly (#281)

Author: JounQin

.eslintrc.js

@@ -1,12 +1,6 @@
 const tsNode = require('ts-node')
 
-tsNode.register({
-  compilerOptions: {
-    module: 'commonjs',
-    pretty: true,
-  },
-  transpileOnly: true,
-})
+tsNode.register()
 
 module.exports = {
   root: true,

package.json

@@ -75,7 +75,13 @@
   "prettier": "@1stg/prettier-config",
   "remarkConfig": {
     "plugins": [
-      "@1stg/remark-config"
+      "@1stg/remark-config",
+      [
+        "lint-no-duplicate-headings",
+        [
+          2
+        ]
+      ]
     ]
   },
   "renovate": {

packages/eslint-plugin-mdx/src/configs/base.ts

@@ -1,4 +1,7 @@
-export const base = {
+import { Linter } from 'eslint'
+
+export const base: Linter.Config = {
   parser: 'eslint-mdx',
   plugins: ['mdx'],
+  processor: 'mdx/remark',
 }

packages/eslint-plugin-mdx/src/configs/overrides.ts

@@ -1,3 +1,5 @@
+import { Linter } from 'eslint'
+
 import { base } from './base'
 import { getGlobals } from './helper'
 
@@ -12,7 +14,7 @@ try {
   rebass = ['Box', 'Flex', 'Text', 'Heading', 'Link', 'Button', 'Image', 'Card']
 }
 
-export const overrides = {
+export const overrides: Linter.Config = {
   ...base,
   globals: getGlobals(rebass, {
     React: false,

packages/eslint-plugin-mdx/src/configs/recommended.ts

@@ -1,10 +1,11 @@
+import { Linter } from 'eslint'
 import { version } from 'eslint/package.json'
 
 import { base } from './base'
 
 const minorVersion = +version.split('.').slice(0, 2).join('.')
 
-export const recommended = {
+export const recommended: Linter.Config = {
   ...base,
   rules: {
     'mdx/no-jsx-html-comments': 2,

packages/eslint-plugin-mdx/src/index.ts

@@ -1,4 +1,5 @@
 export * as configs from './configs'
 
 export * from './configs/helper'
+export * from './processors'
 export * from './rules'

packages/eslint-plugin-mdx/src/processors/index.ts

@@ -0,0 +1,4 @@
+import { remark } from './remark'
+
+// related to https://github.com/benmosher/eslint-plugin-import/issues/2002
+export const processors = { remark }

packages/eslint-plugin-mdx/src/processors/remark.ts

@@ -0,0 +1,36 @@
+import { Linter } from 'eslint'
+
+import { RemarkLintMessage } from '../rules'
+
+export const remark = {
+  postprocess(lintMessages: Linter.LintMessage[][]): Linter.LintMessage[] {
+    const messages: Linter.LintMessage[] = []
+    for (const lintMessageList of lintMessages) {
+      messages.push(
+        ...lintMessageList.map(lintMessage => {
+          const {
+            message,
+            ruleId: eslintRuleId,
+            severity: eslintSeverity,
+          } = lintMessage
+          if (eslintRuleId !== 'mdx/remark') {
+            return lintMessage
+          }
+
+          const { source, ruleId, reason, severity } = JSON.parse(
+            message,
+          ) as RemarkLintMessage
+
+          return {
+            ...lintMessage,
+            ruleId: `${source}-${ruleId}`,
+            message: reason,
+            severity: Math.max(eslintSeverity, severity) as Linter.Severity,
+          }
+        }),
+      )
+    }
+    return messages
+  },
+  supportsAutofix: true,
+}

packages/eslint-plugin-mdx/src/rules/remark.ts

@@ -5,6 +5,7 @@ import { DEFAULT_EXTENSIONS, MARKDOWN_EXTENSIONS } from 'eslint-mdx'
 import vfile from 'vfile'
 
 import { getRemarkProcessor } from './helper'
+import { RemarkLintMessage } from './types'
 
 export const remark: Rule.RuleModule = {
   meta: {
@@ -14,9 +15,6 @@ export const remark: Rule.RuleModule = {
       category: 'Stylistic Issues',
       recommended: true,
     },
-    messages: {
-      remarkReport: '{{ source }}:{{ ruleId }} - {{ reason }}',
-    },
     fixable: 'code',
   },
   create(context) {
@@ -34,6 +32,7 @@ export const remark: Rule.RuleModule = {
       options.markdownExtensions || [],
     ).includes(extname)
     return {
+      // eslint-disable-next-line sonarjs/cognitive-complexity
       Program(node) {
         /* istanbul ignore if */
         if (!isMdx && !isMarkdown) {
@@ -59,15 +58,26 @@ export const remark: Rule.RuleModule = {
           source,
           reason,
           ruleId,
+          fatal,
           location: { start, end },
         } of file.messages) {
+          // https://github.com/remarkjs/remark-lint/issues/65#issuecomment-220800231
+          /* istanbul ignore next */
+          const severity = fatal ? 2 : fatal == null ? 0 : 1
+          /* istanbul ignore if */
+          if (!severity) {
+            // should never happen, just for robustness
+            continue
+          }
+          const message: RemarkLintMessage = {
+            reason,
+            source,
+            ruleId,
+            severity,
+          }
           context.report({
-            messageId: 'remarkReport',
-            data: {
-              reason,
-              source,
-              ruleId,
-            },
+            // related to https://github.com/eslint/eslint/issues/14198
+            message: JSON.stringify(message),
             loc: {
               // ! eslint ast column is 0-indexed, but unified is 1-indexed
               start: {

packages/eslint-plugin-mdx/src/rules/types.ts

@@ -1,3 +1,4 @@
+import { Linter } from 'eslint'
 // eslint-disable-next-line node/no-extraneous-import
 import { ExpressionStatement, Node } from 'estree'
 import { Attacher } from 'unified'
@@ -18,3 +19,10 @@ export interface RemarkConfig {
   settings: Record<string, string>
   plugins: Array<RemarkPlugin | [RemarkPlugin, ...unknown[]]>
 }
+
+export interface RemarkLintMessage {
+  reason: string
+  source: string
+  ruleId: string
+  severity: Linter.Severity
+}