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 MDX: Integrates with VSCode ESLint, syntaxes highlighting and error reporting.
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 | |||
eslint-plugin-mdx |
ESLint Plugin, Configuration and Rules for MDX |
# yarn
yarn add -D eslint-plugin-mdx
# npm
npm i -D eslint-plugin-mdx
-
In your ESLint config file:
-
If you're using
eslint >= 6.0.0
, add:{ "extends": ["plugin:mdx/recommended"], "overrides": [ { "files": ["*.mdx"], "extends": ["plugin: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('eslint-plugin-mdx') const rebass = require('rebass') module.exports = { extends: ['plugin:mdx/recommended'], overrides: [ Object.assign( { files: ['*.mdx'], }, configs.overrides, ), ], }
-
-
Make sure ESLint knows to run on
.mdx
files:eslint . --ext js,mdx
-
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: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.
HTML style comments in jsx block is invalid, this rule will help you to fix it by transforming it to JSX style comments.
Inline JSX like Inline <Component />
is supported by MDX, but rule react/no-unescaped-entities
from eslint-plugin-react is incompatible with it, mdx/no-unescaped-entities
is the replacement.
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.
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.
Detailed changes for each release are documented in CHANGELOG.md.