CtrlK
BlogDocsLog inGet started
Tessl Logo

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

SecuritybySnyk

Pending

The risk profile of this skill

Overview
Eval results
Files

index.mddocs/

ESLint Plugin for MDX

ESLint Plugin for MDX that enables linting and validation of MDX content with comprehensive support for JavaScript/JSX syntax and Markdown formatting. It provides seamless integration with existing ESLint configurations, supports linting of code blocks within MDX documents, and includes remark-lint integration for markdown syntax validation.

Package Information

  • Package Name: eslint-plugin-mdx
  • Package Type: npm
  • Language: TypeScript
  • Installation: npm install -D eslint-plugin-mdx
  • Peer Dependencies: eslint >=8.0.0

Core Imports

import { 
  configs, 
  processors, 
  rules, 
  meta,
  getGlobals,
  cjsRequire,
  createRemarkProcessor,
  DEFAULT_LANGUAGE_MAPPER,
  getShortLang,
  processorOptions,
  type LinterConfig,
  type ProcessorOptions,
  type ESLintMdxSettings
} from "eslint-plugin-mdx";

For CommonJS:

const { 
  configs, 
  processors, 
  rules, 
  meta,
  getGlobals,
  cjsRequire,
  createRemarkProcessor,
  DEFAULT_LANGUAGE_MAPPER,
  getShortLang,
  processorOptions
} = require("eslint-plugin-mdx");

Basic Usage

Classic ESLint Configuration

{
  "extends": ["plugin:mdx/recommended"],
  "settings": {
    "mdx/code-blocks": true,
    "mdx/language-mapper": {}
  }
}

Flat ESLint Configuration

import mdx from "eslint-plugin-mdx";

export default [
  {
    ...mdx.configs.flat,
    // optional
    processor: mdx.processors.remark,
    settings: {
      "mdx/code-blocks": true
    }
  }
];

Architecture

ESLint Plugin for MDX is built around several key components:

  • Configuration Presets: Pre-built ESLint configurations for different use cases and config formats
  • Processors: Custom ESLint processors that handle MDX file parsing and code block extraction
  • Rules: ESLint rules specific to MDX content, including remark-lint integration
  • Helpers: Utility functions for configuration and global management
  • Type Definitions: Complete TypeScript type definitions for all APIs

Capabilities

Configuration Presets

Pre-built ESLint configurations for MDX files supporting both classic and flat config formats. Includes base, recommended, and specialized configurations for code blocks.

interface ConfigsExport {
  base: Linter.LegacyConfig;
  recommended: Linter.LegacyConfig;
  codeBlocks: Linter.LegacyConfig;
  'code-blocks': Linter.LegacyConfig;
  flat: Linter.FlatConfig;
  flatCodeBlocks: Linter.FlatConfig;
  overrides: Linter.LegacyConfig;
}

declare const configs: ConfigsExport;

Configuration Presets

Processors

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

interface ProcessorsExport {
  remark: Linter.Processor;
}

declare const processors: ProcessorsExport;

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

Processors

Rules

ESLint rules for MDX content validation, including integration with remark-lint for markdown syntax checking.

interface RulesExport {
  remark: Rule.RuleModule;
}

declare const rules: RulesExport;

Rules

Helpers

Utility functions for managing ESLint configurations and globals conversion.

function getGlobals<
  T extends Record<string, unknown> | string[],
  G extends Record<string, boolean>,
  R extends G = G & Record<T extends Array<infer R> ? R : keyof T, false>
>(sources: T, initialGlobals?: G): R;

declare const cjsRequire: CjsRequire;

Helpers

Language Mapping

Language mapping utilities for code block processing and processor configuration.

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;

declare const processorOptions: ProcessorOptions;

Core Types

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

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

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

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

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

interface LinterConfig extends Linter.LegacyConfig {
  extractConfig?(filename?: string): Linter.LegacyConfig;
}

interface CjsRequire {
  <T = any>(id: string): T;
  resolve(id: string): string;
}

// 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;
}

Package Metadata

interface MetaExport {
  name: string;
  version: string;
}

declare const meta: MetaExport;

docs

configurations.md

helpers.md

index.md

processors.md

rules.md

tile.json