Product
Introducing Socket Optimize
We're excited to introduce Socket Optimize, a powerful CLI command to secure open source dependencies with tested, optimized package overrides.
eslint-plugin-mdx
Advanced tools
eslint-plugin-mdx is an ESLint plugin that provides linting and formatting capabilities for MDX (Markdown with JSX) files. It helps ensure code quality and consistency in MDX files by applying ESLint rules.
Linting MDX Files
This configuration enables linting for MDX files by extending the recommended settings provided by eslint-plugin-mdx.
module.exports = {
"extends": [
"plugin:mdx/recommended"
],
"overrides": [
{
"files": ["*.mdx"],
"extends": ["plugin:mdx/recommended"]
}
]
};
Custom MDX Rules
This configuration demonstrates how to apply custom rules specifically for MDX files. In this example, the rule 'mdx/no-jsx-html-comments' is set to 'error'.
module.exports = {
"overrides": [
{
"files": ["*.mdx"],
"extends": ["plugin:mdx/recommended"],
"rules": {
"mdx/no-jsx-html-comments": "error"
}
}
]
};
Integrating with Prettier
This configuration shows how to integrate eslint-plugin-mdx with Prettier for consistent code formatting in MDX files.
module.exports = {
"extends": [
"plugin:mdx/recommended",
"prettier"
],
"overrides": [
{
"files": ["*.mdx"],
"extends": ["plugin:mdx/recommended", "prettier/mdx"]
}
]
};
eslint-plugin-markdown is an ESLint plugin that allows linting of JavaScript code blocks within Markdown files. While it focuses on JavaScript within Markdown, eslint-plugin-mdx is specifically designed for MDX files, which combine Markdown and JSX.
remark-lint is a Markdown linter built on the remark ecosystem. It provides a wide range of rules for linting Markdown files. Unlike eslint-plugin-mdx, which is tailored for MDX files, remark-lint is focused solely on Markdown.
eslint-plugin-react is an ESLint plugin for React-specific linting rules. While it is not designed for MDX files, it can be used in conjunction with eslint-plugin-mdx to ensure React code within MDX files adheres to best practices.
ESLint Parser/Plugin for MDX, helps you lint all ES syntaxes. Linting
code
blocks can be enabled withmdx/code-blocks
setting too! Work perfectly witheslint-plugin-import
,eslint-plugin-prettier
or any other eslint plugins. And also can be integrated with remark-lint plugins to lint markdown syntaxes.
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.4.0
, just add:
{
"extends": ["plugin:mdx/recommended"],
// optional, if you want to lint code blocks at the same time
"settings": {
"mdx/code-blocks": true
}
}
If you're using eslint >=6.0.0 and <6.4.0
, add as following because it does not support overrides from npm pkg:
{
"extends": ["plugin:mdx/recommended"],
// optional, if you want to lint code blocks at the same time
"settings": {
"mdx/code-blocks": true
},
"overrides": [
{
"files": ["*.md"],
"rules": {
"prettier/prettier": [
2,
{
// unnecessary if you're not using `eslint-plugin-prettier`, but required if you are
"parser": "markdown"
}
]
}
},
{
"files": ["*.mdx"],
"extends": ["plugin:mdx/overrides"]
},
{
"files": "**/*.{md,mdx}/**",
"extends": "plugin:mdx/code-blocks"
}
]
}
If you're using eslint@^5.0.0
, you need to enable this parser/plugin manually, because eslint@5
does not support extends
for overrides
property in its configuration:
const { configs } = require('eslint-plugin-mdx')
module.exports = {
extends: ['plugin:mdx/recommended'],
// optional, if you want to lint code blocks at the same time
settings: {
'mdx/code-blocks': true,
},
overrides: [
{
files: ['*.md'],
rules: {
'prettier/prettier': [
2,
{
// unnecessary if you're not using `eslint-plugin-prettier`, but required if you are
parser: 'markdown',
},
],
},
},
{
files: ['*.mdx'],
...configs.overrides,
},
{
files: '**/*.{md,mdx}/**',
...configs.codeBlocks,
},
],
}
Make sure ESLint knows to run on .md
or .mdx
files:
eslint . --ext js,md,mdx
parser
(string | ParserConfig | ParserFn
): Custom parser for ES syntax is supported, although @typescript-eslint/parser
or @babel/eslint-parser
or babel-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 the parser
option. If you want to resolve other extensions as like .mdx
, you can use this option.
markdownExtensions
(string | string[]
): eslint-mdx
will only treat .md
files as plain markdown by default, and will lint them via remark plugins. If you want to resolve other extensions as like .md
, you can use this option.
Fixable: 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, so make sure that you've turned off the original no-unescaped-entities
rule.
MDX can render jsx
block automatically without exporting them, but ESLint will report no-unused-expressions
issue which could be unexpected, this rule is the replacement, so make sure that you've turned off the original no-unused-expressions
rule.
possible fixable depends on your remark plugins:
Integration with remark-lint plugins, it will read remark's configuration automatically via cosmiconfig. But .remarkignore
will not be respected, you should use .eslintignore
instead.
If you want to disable or change severity of some related rules, it won't work by setting rules in eslint config like 'remark-lint-no-duplicate-headings': 0
, you should change your remark config instead like following:
{
"plugins": [
"@1stg/remark-config",
// change to error severity, notice `[]` is required
["lint-no-duplicate-headings", [2]],
// disable following plugin
[
"lint-no-multiple-toplevel-headings",
[0] // or false
]
]
}
If you're using remark-lint feature with Prettier both together, you can try remark-preset-prettier which helps you to turn off all rules that are unnecessary or might conflict with Prettier.
{
"plugins": [
"preset-lint-consistent",
"preset-lint-recommended",
"preset-lint-markdown-style-guide",
"preset-prettier"
]
}
Detailed changes for each release are documented in CHANGELOG.md.
FAQs
ESLint Plugin for MDX
The npm package eslint-plugin-mdx receives a total of 261,076 weekly downloads. As such, eslint-plugin-mdx popularity was classified as popular.
We found that eslint-plugin-mdx demonstrated a healthy version release cadence and project activity because the last version was released less than a year ago. It has 4 open source maintainers collaborating on the project.
Did you know?
Socket for GitHub automatically highlights issues in each pull request and monitors the health of all your open source dependencies. Discover the contents of your packages and block harmful activity before you install or update your dependencies.
Product
We're excited to introduce Socket Optimize, a powerful CLI command to secure open source dependencies with tested, optimized package overrides.
Product
We're excited to announce that Socket now supports the Java programming language.
Security News
Socket detected a malicious Python package impersonating a popular browser cookie library to steal passwords, screenshots, webcam images, and Discord tokens.