tessl/npm-eslint-plugin-mdx

ESLint Plugin for MDX that enables linting and validation of MDX content with comprehensive support for JavaScript/JSX syntax and Markdown formatting.

—

Pending

Quality

Pending

Does it follow best practices?

Impact

Pending

No eval scenarios have been run

Securityby

Pending

The risk profile of this skill

Overview

Eval results

Files

Processors

Name: tessl/npm-eslint-plugin-mdx
Author: tessl

ESLint processors for handling MDX file parsing and code block extraction. The remark processor provides core MDX parsing with configurable options for code block linting and language mapping.

Capabilities

Remark Processor

The main processor for handling MDX files, providing parsing and code block extraction functionality.

declare const remark: Linter.Processor;

The remark processor includes:

MDX file parsing with remark/unified
Code block extraction and processing
Support for autofix operations
Configurable language mapping

Create Remark Processor

Factory function for creating customized remark processors with specific options.

function createRemarkProcessor(options?: ProcessorOptions): Linter.Processor;

// From eslint-mdx
interface SyncOptions {
  ignoreRemarkConfig?: boolean;
  remarkConfigPath?: string;
  extensions?: string[];
  markdownExtensions?: string[];
}

interface ProcessorOptions extends SyncOptions {
  lintCodeBlocks?: boolean;
  languageMapper?: Record<string, string> | false;
}

Usage Examples:

import { createRemarkProcessor } from "eslint-plugin-mdx";

// Basic processor
const processor = createRemarkProcessor();

// Custom processor with options
const customProcessor = createRemarkProcessor({
  lintCodeBlocks: true,
  languageMapper: {
    "js": "javascript",
    "ts": "typescript"
  },
  ignoreRemarkConfig: false
});

// Flat config usage
export default [
  {
    files: ["**/*.mdx"],
    processor: customProcessor
  }
];

Language Mapping

Utilities for mapping code block languages to file extensions for proper linting.

declare const DEFAULT_LANGUAGE_MAPPER: {
  readonly ecmascript: "js";
  readonly javascript: "js";
  readonly javascriptreact: "jsx";
  readonly typescript: "ts";
  readonly typescriptreact: "tsx";
  readonly markdown: "md";
  readonly markdownjsx: "mdx";
  readonly markdownreact: "mdx";
  readonly mdown: "md";
  readonly mkdn: "md";
};

function getShortLang(
  filename: string,
  languageMapper?: Record<string, string> | false
): string;

The getShortLang function:

Maps long language names to short extensions
Supports custom language mappers
Falls back to lowercase language names
Can be disabled by setting languageMapper to false

Processor Options

Global processor options configuration object.

declare const processorOptions: ProcessorOptions;

This constant provides default processor options that can be used for configuration reference or as a starting point for custom processors.

Processors Export

All processors are available through a unified export object.

interface ProcessorsExport {
  remark: Linter.Processor;
}

declare const processors: ProcessorsExport;

Processor Types

interface ESLintMdxSettings {
  'mdx/code-blocks'?: boolean;
  'mdx/language-mapper'?: Record<string, string> | false;
  'mdx/ignore-remark-config'?: boolean;
  'mdx/remark-config-path'?: string;
}

interface RangeMap {
  indent: number;
  js: number;
  md: number;
}

interface CodeBlock extends Code {
  baseIndentText: string;
  comments: string[];
  rangeMap: RangeMap[];
}

// From mdast
interface Code {
  type: 'code';
  lang?: string;
  meta?: string;
  value: string;
  position?: Position;
}

interface Position {
  start: Point;
  end: Point;
}

interface Point {
  line: number;
  column: number;
  offset?: number;
}

ESLint Integration

The processors integrate with ESLint's processing pipeline:

Preprocess: Extract code blocks from MDX content and create virtual files
Process: Each code block is linted as a separate file with appropriate language mapping
Postprocess: Combine and sort lint messages from MDX content and code blocks

Configuration Example:

// .eslintrc.js
module.exports = {
  settings: {
    "mdx/code-blocks": true, // Enable code block linting
    "mdx/language-mapper": { // Custom language mapping
      "js": "javascript",
      "ts": "typescript"
    }
  },
  overrides: [
    {
      files: ["*.mdx"],
      processor: "mdx/remark"
    }
  ]
};