How to check if Prettier is working?

When checking if Prettier is working, we can confirm it by following these steps:

1. Check Prettier Configuration File

First, verify if the project contains a Prettier configuration file (e.g., .prettierrc or prettier.config.js). This configuration file defines the formatting rules.

Example: Locate the .prettierrc file in the project root directory and ensure its content correctly configures the formatting rules.

json
{
  "semi": false,
  "singleQuote": true
}

2. Run Prettier CLI Command

Use the Prettier command-line tool to format files and verify if it produces the expected results.

Example: Run the following command in the terminal to check if the file is formatted as expected:

bash
prettier --write src/**/*.js

This command formats all .js files in the src directory.

3. Check IDE Plugins

If you are using an Integrated Development Environment (IDE), such as VSCode, ensure that the Prettier plugin is installed and enabled, and configured correctly.

Example: In VSCode, search for and install the "Prettier - Code formatter" plugin via the Extensions sidebar. After installation, enter settings to ensure that "Format On Save" is enabled, so that Prettier automatically formats the code each time you save the file.

json
// VSCode Settings
"editor.formatOnSave": true,

4. Check Project Scripts

Verify if package.json contains a script set to format code using Prettier.

Example:

json
{
  "scripts": {
    "format": "prettier --write ."
  }
}

Run npm run format and verify if the code formatting matches the expected changes.

5. Code Comparison

Compare before and after formatting using version control systems (e.g., git) to check for changes in code style.

Example: Commit changes to git before and after formatting, then use git diff to view the changes and confirm if they are due to Prettier's formatting adjustments.

By following these steps, we can systematically check and verify if Prettier is working correctly in the project. If any step fails or the results do not match expectations, further investigation into the configuration file settings or plugin installation status may be required.