Word wrap mdx files in VS Code

Last Updated: April 4, 2022

By default VS Code Editor enables word wrapping feature for only markdown files.

When we create .mdx file in VS Code Editor, it does not word wrap the content by default.

Let's explore different ways for doing word wrap of .mdx file.

Word wrapping of single .mdx fileLink to this heading

We can do word wrapping of a particular .mdx file by running command "Toggle Word Wrap" from "Command Palette" as shown below:

Video showing how to do word wrapping of single .mdx file in VS Code

This command will word wrap only for the current .mdx file. When you open another .mdx file, then you need to run this command again.

Also, the change in word wrap setting does not persist. That means, when you close and open the VS Code Editor, then you need to again execute this "Toggle Word Wrap" command again for those files.

Persistent word wrapping for whole workspaceLink to this heading

If we need to by default enable word wrapping for all the .mdx files in our workspace, then we can do that by following below steps:

1. Create/Edit VS Code settings fileLink to this heading

Create/Edit settings.json file in .vscode folder in your workspace.

2. Add configuration to enable word-wrapping by file formatLink to this heading

Add below lines of configuration into .vscode/settings.json file:

{
  "[mdx]": {
    "editor.wordWrap": "on"
  }
}

Above configuration will enable word-wrapping for all the .mdx file in your workspace. It will wrap the content at viewport width.

But, if we need to wrap at particular column size, then we can set it to wordWrapColumn as shown below:

{
  "[mdx]": {
    "editor.wordWrap": "wordWrapColumn",
    "editor.wordWrapColumn": 75
  }
}

This will wrap all the .mdx files at max 75 columns.

If we need to keep word wrap at fixed column for all kind of files, then we can write editor.wordWrapColumn at root level as shown below:

{
  "[mdx]": {
    "editor.wordWrap": "wordWrapColumn",
  },
  "editor.wordWrapColumn": 75
}

If we need to word wrap the content at viewport width when the viewport width is less than the set wordWrapColumn, then we can set editor.wordWrap to bounded as shown below:

{
  "[mdx]": {
    "editor.wordWrap": "bounded",
    "editor.wordWrapColumn": 75
  },
}

This will wrap the content at 75 column when viewport width is greater than that, else it will wrap the content at viewport width as shown in below video.

Video showing difference between wordWrapColumn and bounded wrapping in VS Code

This is how we can word wrap content of .mdx files in our workspace.

Do you have any question related to this post? Just Ask Me on Twitter

Word wrap mdx files in VS Code

IntroductionLink to this heading

Word wrapping of single .mdx fileLink to this heading

Persistent word wrapping for whole workspaceLink to this heading

1. Create/Edit VS Code settings fileLink to this heading

2. Add configuration to enable word-wrapping by file formatLink to this heading