remark-lint-mdx-jsx-shorthand-attribute

1.0.1 verified Fri May 01 auth: no javascript

A remark-lint rule that warns when verbose boolean attribute values (like `planet={true}`) are used in MDX JSX, enforcing shorthand syntax (`planet`). Version 1.0.0 stable release, part of the remark-lint ecosystem. ESM-only, requires Node 16+. Differentiators: focused MDX-specific linting, no configuration needed. Alternative to general remark-lint rules without MDX awareness.

Common errors

error Cannot find package 'remark-lint-mdx-jsx-shorthand-attribute' ↓

cause Package not installed

fix

Run npm install remark-lint-mdx-jsx-shorthand-attribute

error Unexpected verbose attribute value, expected shorthand boolean attribute ↓

cause Using `prop={true}` instead of `prop` in MDX JSX

fix

Change <Component prop={true} /> to <Component prop />

error ERR_REQUIRE_ESM ↓

cause Using require() on an ESM-only package

fix

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

Warnings

breaking Package is ESM-only and cannot be required with CommonJS require(). ↓

fix Use import syntax or dynamic import().

gotcha The rule assumes JavaScript; false positives may occur with other languages in MDX. ↓

fix Do not use this rule if MDX contains non-JavaScript expressions.

gotcha This rule is not included in any preset; must be explicitly added. ↓

fix Add the rule to your remark-lint plugin list manually.

Install

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

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

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

Imports

remarkLintMdxJsxShorthandAttribute

wrong

const remarkLintMdxJsxShorthandAttribute = require('remark-lint-mdx-jsx-shorthand-attribute')

correct

import remarkLintMdxJsxShorthandAttribute from 'remark-lint-mdx-jsx-shorthand-attribute'

ESM-only package; CommonJS require will fail.

default export

wrong

import { remarkLintMdxJsxShorthandAttribute } from 'remark-lint-mdx-jsx-shorthand-attribute'

correct

import remarkLintMdxJsxShorthandAttribute from 'remark-lint-mdx-jsx-shorthand-attribute'

The package exports only a default export; named imports are incorrect.

type import

wrong

import type { remarkLintMdxJsxShorthandAttribute } from 'remark-lint-mdx-jsx-shorthand-attribute'

correct

import type { Plugin } from 'unified'

Types are not exported from this package; use unified's Plugin type instead.

Quickstart

Demonstrates how to use the remark-lint rule with unified pipeline to lint an MDX file.

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

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

console.error(reporter(result));