ESLint Parser/Plugin for MDX, helps you lint all ES syntaxes. Linting
codeblocks can be enabled withmdx/code-blockssetting too! Work perfectly witheslint-plugin-import,eslint-plugin-prettieror any other eslint plugins. And also can be integrated with remark-lint plugins to lint markdown syntaxes.
- VSCode Extension
- Packages
- Install
- Notice
- Usage
- Parser Options
- Parser API
- Rules
- Prettier Integration
- Sponsors
- Backers
- Changelog
- License
VSCode MDX: Integrates with VSCode ESLint, syntaxes highlighting and error reporting.
This repository is a monorepo managed by changesets 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-mdxIf 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.
.eslintrc file:
{
"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": {}
}
}eslint.config.js file:
import * as mdx from 'eslint-plugin-mdx'
export default [
{
...mdx.flat,
// optional, if you want to lint code blocks at the same
processor: mdx.createRemarkProcessor({
lintCodeBlocks: 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
languageMapper: {},
}),
},
{
...mdx.flatCodeBlocks,
rules: {
...mdx.flatCodeBlocks.rules,
// if you want to override some rules for code blocks
'no-var': 'error',
'prefer-const': 'error',
},
},
]Then, make sure ESLint knows to run on .md or .mdx files:
eslint . --ext js,md,mdx-
extensions(string | string[]):eslint-mdxwill only resolve.mdxfiles by default, if you want to resolve other extensions as like.mdx, you can use this option. -
markdownExtensions(string | string[]):eslint-mdxwill only treat.mdfiles 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 theremarkconfiguration defined in the project.
A new MDXCode estree node type is exported from eslint-mdx which represents code blocks in mdx like the following:
<div>
```js
export function foo() {
return 'bar'
}
```
</div>See also https://github.com/syntax-tree/mdast#code
A new MDXHeading estree node type is exported from eslint-mdx which represents markdown heading in mdx like the following:
<div>
# Here's a text gradient short code!
</div>See also https://github.com/syntax-tree/mdast#heading
import type { BaseNode } from 'estree'
import type { JSXElement } from 'estree-jsx'
export interface MDXCode extends BaseNode {
type: 'MDXCode'
value: string
lang?: string | null
meta?: string | null
}
export type HeadingDepth = 1 | 2 | 3 | 4 | 5 | 6
export interface MDXHeading extends BaseNode {
type: 'MDXHeading'
depth: HeadingDepth
children: JSXElement['children']
}possible fixable depends on your remark plugins:
Integration with remark-lint plugins, it will read remark's configuration automatically via unified-engine. 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.
![github-actions[bot] avatar](https://avatars.githubusercontent.com/in/15368?v=4 "github-actions[bot]")
![renovate[bot] avatar](https://avatars.githubusercontent.com/in/2740?v=4 "renovate[bot]")
React
Typescript
Django
Laravel
Facebook
Microsoft
Google
Alibaba
D3
Tencent