Search code examples
visual-studio-codemarkdownprettier

How to stop Prettier from tabbing every list item after the first one in Visual Studio Code? (Markdown)


Problem (Markdown)

When I have any kind of list, every list item after the first is being tabbed for no reason.

Currently on save

- [Dashboard](#dashboard)
  - [Table of Contents](#table-of-contents)
  - [Running as a developer](#running-as-a-developer)
  - [Data Tab](#data-tab)
  - [Disclaimer](#disclaimer)

Desired result on save

- [Dashboard](#dashboard)
- [Table of Contents](#table-of-contents)
- [Running as a developer](#running-as-a-developer)
- [Data Tab](#data-tab)
- [Disclaimer](#disclaimer)

How can I fix this within VS Code?

Tried:

  • Change Prettier tab width
  • Format document with another formatter like "Markdown All in one"

Prettier Configuration

VS Code Extension: Prettier - Code formatter(esbenp.prettier-vscode)


Solution

  • I found the problem. There is nothing wrong with prettier.

    The issue was that in my markdown file this is how my headers were :

        # Dashboard
        ## ...
        ## ...
    

    For the table of contents ... major sections must have the same amount of '#'. That's why prettier kept tabbing the rest. (more hashtags mean subsections)

    So originally, I set it up such that everything is a subsection of "Dashboard".

    Fix:

        ## Dashboard
        ## ...
        ## ...