remark-lint-mdx-jsx-attribute-sort

1.0.1 verified Fri May 01 auth: no javascript

A remark-lint rule that checks MDX JSX attribute ordering, ensuring attributes are sorted alphabetically. Current stable version is 1.0.1. Part of the remark-lint ecosystem, it is ESM-only, requires Node.js 16+, and is written in TypeScript with bundled types. Unlike generic lint rules, it specifically targets MDX JSX syntax, handling spreads (must come first) and shorthand attributes. Released under the unified collective.

Common errors

error Error [ERR_REQUIRE_ESM]: require() of ES Module ↓

cause Using CommonJS require() on an ESM-only package.

fix

Replace require() with import or use dynamic import().

error Unexpected attribute `largest` in 1st place, expected alphabetically sorted attributes, move it to 2nd place ↓

cause Attributes are not sorted alphabetically.

fix

Reorder attributes alphabetically; spreads must come before key-value attributes.

Warnings

breaking Package is ESM-only; CommonJS require() does not work. ↓

fix Use import syntax or dynamic import().

breaking Requires Node.js version 16 or later. ↓

fix Upgrade Node.js to >=16.

gotcha Spreads must come first; they are not sorted among themselves. ↓

fix Place all spread attributes before key-value attributes.

Install

npm install remark-lint-mdx-jsx-attribute-sort

yarn add remark-lint-mdx-jsx-attribute-sort

pnpm add remark-lint-mdx-jsx-attribute-sort

Imports

remarkLintMdxJsxAttributeSort

wrong

const remarkLintMdxJsxAttributeSort = require('remark-lint-mdx-jsx-attribute-sort')

correct

import remarkLintMdxJsxAttributeSort from 'remark-lint-mdx-jsx-attribute-sort'

Package is ESM-only; require() throws ERR_REQUIRE_ESM.

default export

wrong

import { remarkLintMdxJsxAttributeSort } from 'remark-lint-mdx-jsx-attribute-sort'

correct

import remarkLintMdxJsxAttributeSort from 'remark-lint-mdx-jsx-attribute-sort'

No named export; must use default import.

Quickstart

Set up a unified processor with remark-lint and the MDX JSX attribute sort rule, then lint an MDX file.

import { unified } from 'unified'
import remarkParse from 'remark-parse'
import remarkStringify from 'remark-stringify'
import remarkLint from 'remark-lint'
import remarkLintMdxJsxAttributeSort from 'remark-lint-mdx-jsx-attribute-sort'
import { read } from 'to-vfile'
import { reporter } from 'vfile-reporter'

const file = await read('example.mdx')
await unified()
  .use(remarkParse)
  .use(remarkLint)
  .use(remarkLintMdxJsxAttributeSort)
  .use(remarkStringify)
  .process(file)

console.error(reporter(file))