Skip to content

Formatting

Consistent code formatting is essential for maintaining readability and collaboration within a development team. This section outlines how to leverage the Prettier extension in Visual Studio Code for formatting your code.

Prettier Setup

Prettier is a code formatter that automatically formats your code to ensure consistent styling across your project. Follow these steps to set up Prettier in Visual Studio Code:

  1. Install the Prettier extension from the Visual Studio Code Marketplace.

  2. Open your project in Visual Studio Code.

Formatting Your Code

Once Prettier is installed and configured, you can format your code in Visual Studio Code using the following methods:

Automatic Formatting:

Prettier automatically formats your code on save. To enable this feature, add the following configuration to your Visual Studio Code settings:

"editor.formatOnSave": true

Manual Formatting:

You can also format your code manually by invoking the format command (Shift + Alt + F on Windows/Linux, Shift + Option + F on macOS) or using the "Format Document" option from the context menu.

Ignoring Files

You can exclude specific files or directories from being formatted by Prettier by adding them to a .prettierignore file in the root of your project. Use this file to list files, directories, or patterns that should be ignored.

Was this page helpful?

Happy React is loading...