{"id":15013649,"url":"https://github.com/ncuillery/prettier-plugin-mdx-no-text-child","last_synced_at":"2026-02-04T05:05:19.547Z","repository":{"id":42887550,"uuid":"254716978","full_name":"ncuillery/prettier-plugin-mdx-no-text-child","owner":"ncuillery","description":"Prettier plugin to enforce that MDX tags are always separated from their child by a blank line","archived":false,"fork":false,"pushed_at":"2023-01-06T03:12:42.000Z","size":699,"stargazers_count":2,"open_issues_count":11,"forks_count":0,"subscribers_count":2,"default_branch":"master","last_synced_at":"2025-04-05T18:52:10.699Z","etag":null,"topics":["mdx","mdx-js","prettier","prettier-plugin"],"latest_commit_sha":null,"homepage":"","language":"TypeScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"mit","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/ncuillery.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":"LICENSE","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null}},"created_at":"2020-04-10T19:18:44.000Z","updated_at":"2020-10-15T19:22:47.000Z","dependencies_parsed_at":"2023-02-05T04:46:59.889Z","dependency_job_id":null,"html_url":"https://github.com/ncuillery/prettier-plugin-mdx-no-text-child","commit_stats":null,"previous_names":[],"tags_count":1,"template":false,"template_full_name":null,"purl":"pkg:github/ncuillery/prettier-plugin-mdx-no-text-child","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/ncuillery%2Fprettier-plugin-mdx-no-text-child","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/ncuillery%2Fprettier-plugin-mdx-no-text-child/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/ncuillery%2Fprettier-plugin-mdx-no-text-child/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/ncuillery%2Fprettier-plugin-mdx-no-text-child/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/ncuillery","download_url":"https://codeload.github.com/ncuillery/prettier-plugin-mdx-no-text-child/tar.gz/refs/heads/master","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/ncuillery%2Fprettier-plugin-mdx-no-text-child/sbom","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":263434336,"owners_count":23465942,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["mdx","mdx-js","prettier","prettier-plugin"],"created_at":"2024-09-24T19:44:36.568Z","updated_at":"2026-02-04T05:05:19.523Z","avatar_url":"https://github.com/ncuillery.png","language":"TypeScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"![CI](https://github.com/ncuillery/prettier-plugin-mdx-no-text-child/workflows/CI/badge.svg?branch=master) [![Coverage Status](https://coveralls.io/repos/github/ncuillery/prettier-plugin-mdx-no-text-child/badge.svg?branch=master)](https://coveralls.io/github/ncuillery/prettier-plugin-mdx-no-text-child?branch=master) [![npm](https://img.shields.io/npm/v/prettier-plugin-mdx-no-text-child)](https://www.npmjs.com/package/prettier-plugin-mdx-no-text-child)\n\n# Usage\n\nAdd this plugin as a dev dependency:\n\n```bash\nnpm i -D prettier-plugin-mdx-no-text-child\n\n# or\n\nyarn add -D prettier-plugin-mdx-no-text-child\n```\n\nAnd that's it, Prettier will automatically load the plugin based on the package name (`prettier-plugin-*`).\n\n# General Purpose\n\nMDX is a markdown extension that allows insertion of JSX inside the Markdown markup. This is especially useful for referencing custom component.\n\nExample:\n\n```mdx\n# This is the header\n\n\u003cInfo\u003e\n\nThis is an info block.\n\n\u003c/Info\u003e\n```\n\nIn MDX, the line break after the opening tag is meaningful and define what the child node is:\n\n\u003ctable\u003e\n\u003ctbody\u003e\n\u003ctr\u003e\u003cth\u003eMDX markup\u003c/th\u003e\u003cth\u003eJSX result\u003c/th\u003e\u003c/tr\u003e\n\u003ctr\u003e\n\u003ctd\u003e\n        \n```mdx\n\u003cInfo\u003e\n\nThis is a **paragraph**.\n\n\u003c/Info\u003e\n```\n\n\u003c/td\u003e\n\u003ctd\u003e\n        \n```jsx\n\u003cInfo\u003e\n  \u003cp\u003e\n    This is a \u003cstrong\u003eparagraph\u003c/strong\u003e.\n  \u003c/p\u003e\n\u003c/Info\u003e\n```\n\n\u003c/td\u003e\n\u003c/tr\u003e\n\u003ctr\u003e\u003cth\u003eMDX markup\u003c/th\u003e\u003cth\u003eJSX result\u003c/th\u003e\u003c/tr\u003e\n\u003ctr\u003e\n\u003ctd\u003e\n        \n```mdx\n\u003cInfo\u003e\nThis is **not** a paragraph.\n\u003c/Info\u003e\n```\n\n\u003c/td\u003e\n\u003ctd\u003e\n        \n```jsx\n\u003cInfo\u003e\n  This is **not** a paragraph.\n\u003c/Info\u003e\n```\n\n\u003c/td\u003e\n\u003c/tr\u003e\n\u003c/tbody\u003e\n\u003c/table\u003e\n\nAs custom components are often used in MDX to wrap other elements (i.e. an image with a caption), this behavior leads to mistakes and unexpected results.\n\nExample:\n\n\u003ctable\u003e\n\u003ctbody\u003e\n\u003ctr\u003e\u003cth\u003eMDX markup\u003c/th\u003e\u003cth\u003eJSX result\u003c/th\u003e\u003c/tr\u003e\n\u003ctr\u003e\n\u003ctd\u003e\n        \n```mdx\n\u003cInfo\u003e\nThis is not a **paragraph**.\n\nBut **this one** is.\n\u003c/Info\u003e\n\n````\n\n\u003c/td\u003e\n\u003ctd\u003e\n\n```jsx\n\u003cInfo\u003e\n  This is not a **paragraph**.\n  \u003cp\u003e\n    But \u003cstrong\u003ethis one\u003c/strong\u003e is.\n  \u003c/p\u003e\n\u003c/Info\u003e\n````\n\n\u003c/td\u003e\n\u003c/tr\u003e\n\u003c/tbody\u003e\n\u003c/table\u003e\n\nSee this issue for more context: https://github.com/mdx-js/mdx/issues/628\n\n## Prettier\n\nPrettier supports MDX since the version 1.15.0. By default, Prettier formats the previous example as is:\n\n```diff\n\u003cInfo\u003e\nThis is not a **paragraph**.\n\nBut **this one** is.\n+\n\u003c/Info\u003e\n```\n\nPrettier inserts a line break before the closing tag, but it doesn't insert a line break after the opening tag because it would change the meaning of the code (and Prettier is only about formatting).\n\nWell, this plugin does:\n\n```diff\n\u003cInfo\u003e\n+\nThis is not a **paragraph**.\n\nBut **this one** is.\n+\n\u003c/Info\u003e\n```\n\n# Roadmap\n\nThis is a 0.x version because this plugin is currently just smart enough to suit my own needs.\n\nTo enter 1.0, it needs to be more flexible and have options to exclude specific tags, or insert line breaks only if there are multiple children.\n\nIt also need more test cases, there are a LOT of untested situations where the formatting can go wrong.\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fncuillery%2Fprettier-plugin-mdx-no-text-child","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fncuillery%2Fprettier-plugin-mdx-no-text-child","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fncuillery%2Fprettier-plugin-mdx-no-text-child/lists"}