diff --git a/installation.mdx b/installation.mdx index a3a2c405f..c8699ed78 100644 --- a/installation.mdx +++ b/installation.mdx @@ -174,9 +174,51 @@ This command converts individual MDX endpoint pages to autogenerated pages defin While developing locally, we recommend using extensions in your IDE to recognize and format MDX files. -If you use Cursor, Windsurf, or VS Code, we recommend the [MDX VS Code extension](https://marketplace.visualstudio.com/items?itemName=unifiedjs.vscode-mdx) for syntax highlighting, and [Prettier](https://marketplace.visualstudio.com/items?itemName=esbenp.prettier-vscode) for code formatting. +### VS Code, Cursor, and Windsurf -If you use JetBrains, we recommend the [MDX IntelliJ IDEA plugin](https://plugins.jetbrains.com/plugin/14944-mdx) for syntax highlighting, and setting up [Prettier](https://prettier.io/docs/webstorm) for code formatting. +Install the following extensions: + +- [MDX VS Code extension](https://marketplace.visualstudio.com/items?itemName=unifiedjs.vscode-mdx) for syntax highlighting +- [Prettier](https://marketplace.visualstudio.com/items?itemName=esbenp.prettier-vscode) for code formatting + +To enable formatting on save, add the following to your `.vscode/settings.json`: + +```json +{ + "[mdx]": { + "editor.defaultFormatter": "esbenp.prettier-vscode", + "editor.formatOnSave": true + } +} +``` + +### JetBrains IDEs + +Install the following plugins: + +- [MDX IntelliJ IDEA plugin](https://plugins.jetbrains.com/plugin/14944-mdx) for syntax highlighting +- [Prettier](https://prettier.io/docs/webstorm) for code formatting + +To enable Prettier for MDX files, go to **Settings > Languages & Frameworks > JavaScript > Prettier** and add `mdx` to the file extensions. + +### Prettier configuration + +Create a `.prettierrc` file in your documentation root to customize formatting: + +```json +{ + "semi": false, + "singleQuote": true, + "tabWidth": 2, + "proseWrap": "always" +} +``` + +To format all MDX files in your project, run: + +```bash +npx prettier --write "**/*.mdx" +``` ## Troubleshooting