ESLint Parser/Plugin for MDX, helps you lint all ES syntaxes excluding
code
block of course. Work perfectly witheslint-plugin-import
,eslint-plugin-prettier
or any other eslint plugins.
VSCode Extension
VSCode MDX: Integrates with VSCode ESLint, syntaxes highlighting and error reporting.
Packages
This repository is a monorepo managed by Lerna what means we actually publish several packages to npm from same codebase, including:
Package | Description | Version | Peer Dependencies | Dependencies |
---|---|---|---|---|
eslint-mdx |
ESLint Parser for MDX | |||
@rxts/eslint-plugin-mdx |
ESLint Plugin, Configuration and Rules for MDX |
Install
# yarn
yarn add -D @rxts/eslint-plugin-mdx
# npm
npm i -D @rxts/eslint-plugin-mdx
Usage
-
In your ESLint config file:
-
If you're using
eslint >= 6.0.0
, add:{ "extends": ["plugin:@rxts/mdx/recommended"], "overrides": [ { "files": ["*.mdx"], "extends": ["plugin:@rxts/mdx/overrides"] } ] }
-
If you're using
eslint@^5.0.0
, you need to enable this parser/plugin manually, becauseeslint@5
does not supportextends
foroverrides
property in its configuration:const { configs } = require('@rxts/eslint-plugin-mdx') const rebass = require('rebass') module.exports = { extends: ['plugin:@rxts/mdx/recommended'], overrides: [ Object.assign( { files: ['*.mdx'], }, configs.overrides, ), ], }
-
-
Make sure ESLint knows to run on
.mdx
files:eslint . --ext js,mdx
Parser Options
-
parser
(string | ParserConfig | ParserFn
): Custom parser for ES syntax is supported, although@typescript-eslint/parser
orbabel-eslint
will be detected automatically what means you actually do not need to do this:{ "extends": ["plugin:@rxts/mdx/recommended"], "parserOptions": { "parser": "babel-eslint" } }
-
extensions
(string | string[]
):eslint-mdx
will only resolve.mdx
files by default, files with other extensions will be resolved by theparser
option. If you want to resolve other extensions as like.mdx
, you can use this option.
Rules
@rxts/mdx/no-jsx-html-comments
HTML style comments in jsx block is invalid, this rule will help you to fix it by transforming it to JSX style comments.
@rxts/mdx/no-unescaped-entities
Inline JSX like Inline <Component />
is supported by MDX, but rule react/no-unescaped-entities
from eslint-plugin-react is incompatible with it, @rxts/mdx/no-unescaped-entities
is the replacement.
@rxts/mdx/no-unused-expressions
MDX can render jsx
block automatically without exporting them, but ESLint will report no-unused-expressions
issue which could be unexpected, this rule is a replacement of it, so make sure that you've turned off the original no-unused-expressions
rule.
Limitation
This parser/plugin can only handle ES syntaxes for you, markdown related syntaxes will just be ignored, you can use markdownlint or remark-lint to lint that part.
I have a very preliminary idea to integrate with remark-lint.
Changelog
Detailed changes for each release are documented in CHANGELOG.md.