Prettier does not work at VSCODE

Discover why your Prettier setup in VSCode isn't working & how to fix it with this step-by-step example.

Prettier and Visual Studio Code

Prettier is a code formatter designed to make code easier to read and more consistent across different editors and codebases. It is available as an extension for Visual Studio Code (VSCode), and can be used to automatically format code when saving or when manually triggering it.

To install the Prettier extension for VSCode, open the Extensions tab of VSCode, search for Prettier, and click Install. Once the extension is installed, it will format code on save, or you can manually trigger it by pressing Ctrl+Shift+P and typing "Format Document" and hitting Enter.

Prettier can also be configured to format code in other ways. To do so, open the Settings tab in VSCode, search for Prettier, and click Open Settings (JSON). This will open a JSON file with all of Prettier's options.

{
  "prettier.useTabs": true,
  "prettier.tabWidth": 4,
  "prettier.singleQuote": true
}

The above is an example of how to configure Prettier to use tabs instead of spaces, set the tab width to 4 spaces, and use single quotes instead of double quotes when formatting code. These are just a few of the many options available for configuring Prettier, so be sure to explore the full list of options to find the ones that best suit your needs.

Once Prettier is configured, it will make coding in VSCode much easier, as it will automatically format code as you type, and you won't have to worry about manually formatting code when saving. It also makes it much easier to collaborate with other developers, as everyone will have the same formatting conventions.