Skip to content
| Marketplace
Sign in
Visual Studio Code>Programming Languages>MDXNew to Visual Studio Code? Get it now.

MDX

unified

unifiedjs.com
|
154,314 installs
| (6) | Free
| Sponsor
Language support for MDX
Installation
Launch VS Code Quick Open (Ctrl+P), paste the following command, and press enter.
Copied to clipboard
More Info

Visual Studio Code extension for MDX

GitHub Actions Visual Studio Marketplace Version Visual Studio Marketplace Downloads Open VSX Version Open VSX Downloads

Adds language support for MDX.

Installation

You can install this extension from the Marketplace.

Settings

This extension provides the following settings:

  • mdx.experimentalLanguageServer: Enable experimental IntelliSense support for MDX files. (boolean, default: false)

Plugins

This extension supports remark syntax plugins. Plugins can be defined in an array of strings or string / options tuples. These plugins can be defined in tsconfig.json and will be resolved relative to that file.

For example, to support frontmatter with YAML and TOML and GFM:

{
  "compilerOptions": {
    // …
  },
  "mdx": {
    "plugins": [
      [
        "remark-frontmatter",
        ["toml", "yaml"]
      ],
      "remark-gfm"
    ]
  }
}

For a more complete list, see remark plugins.

Integration With VS Code ESLint

  1. First of all, you need to enable eslint-plugin-mdx which makes it possible to lint .mdx or .md files with ESLint.

  2. And then you will need to enable ESLint validation for .mdx and .md files like following:

    // .vscode/settings.json
    {
      "editor.codeActionsOnSave": {
        "source.fixAll.eslint": true
      },
      "eslint.options": {
        "extensions": [".js", ".jsx", ".md", ".mdx", ".ts", ".tsx"]
      },
      "eslint.validate": [
        "markdown",
        "mdx",
        "javascript",
        "javascriptreact",
        "typescript",
        "typescriptreact"
      ]
    }
    

Markdown Syntax

Markdown Syntax could also be linted via eslint-plugin-mdx and remark-lint plugins.

it will read remark’s configuration automatically via cosmiconfig. But .remarkignore will not be respected, you should use .eslintignore instead.

More usage detail please refer to eslint-plugin-mdx’s documentation.

Auto-close tags

If you want VS Code to automatically close tags while you type, you can install Auto Close Tag and configure it to also include the language mdx:

"auto-close-tag.activationOnLanguage": [
  "xml",
  "php",
  "...",
  "mdx"
]

Known vscode-eslint issues

  1. Fatal javascript OOM in GC during deserialization

    ESlint is using VS Code’s old, built-in version of NodeJS (v12) as provided by Electron. Please add the following setting to use system default Node runtime instead:

    {
      "eslint.runtime": "node"
    }
    

    Please visit microsoft/vscode-eslint#1498 (comment) as reference for details.

  2. JavaScript heap out of memory

    The default memory limit of Node.js is 1G, please add the following setting to increase the limit:

    {
      "eslint.execArgv": ["--max_old_space_size=8192"]
    }
    

    Please visit microsoft/vscode-eslint#733 as reference for details.

Sponsor

See § Sponsor on our site for how to help financially.

Vercel

Motif

HashiCorp

GitBook

Gatsby

Netlify

Coinbase

ThemeIsle

Expo

Boost Note

Holloway


You?

Changelog

Detailed changes for each release are documented in CHANGELOG.md.

License

MIT © JounQin@1stG.me

  • Contact us
  • Jobs
  • Privacy
  • Terms of use
  • Trademarks
© 2023 Microsoft