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 |
---|---|---|
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
If you're using multi languages, js/jsx/ts/tsx/vue
, etc for example, you'd better to always use overrides
feature of ESLint, because configs may be overridden by following configs.
See #251 for more details.
In your ESLint 8+ config file, just add:
{
"extends": ["plugin:mdx/recommended"],
// optional, if you want to lint code blocks at the same time
"settings": {
"mdx/code-blocks": true,
// optional, if you want to disable language mapper, set it to `false`
// if you want to override the default language mapper inside, you can provide your own
"mdx/language-mapper": {}
}
}
Make sure ESLint knows to run on .md
or .mdx
files:
eslint . --ext js,md,mdx
extensions
(string | string[]
): eslint-mdx
will only resolve .mdx
files by default, 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.
ignoreRemarkConfig
(boolean
): Ignore the remark
configuration defined in the project.
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"
]
}
1stG | RxTS | UnTS |
---|---|---|
1stG | RxTS | UnTS |
---|---|---|
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.