How to use the command 'prettier' (with examples)

Prettier is an opinionated code formatter for various programming languages like JavaScript, JSON, CSS, and YAML. It helps to enforce a consistent code style by automatically formatting the code according to predefined rules.

Use case 1: Format a file and print the result to stdout

Code:

prettier path/to/file

Motivation: When you want to quickly format a file and review the changes before committing them, you can use this command. It ensures that the code is properly formatted according to the rules defined in the Prettier configuration.

Explanation: The command prettier is followed by the path to the file that needs to be formatted. The result will be printed to the standard output (stdout).

Example output:

const foo = "bar";

Use case 2: Check if a specific file has been formatted

Code:

prettier --check path/to/file

Motivation: This command is useful when you want to ensure all files in a project are properly formatted. By checking if a file is already formatted, you can easily identify which files need to be fixed.

Explanation: The --check flag is used to indicate that we only want to check if the file is properly formatted. If the file is not formatted, Prettier will output an error message.

Example output:

path/to/file.js is not formatted

Use case 3: Run with a specific configuration file

Code:

prettier --config path/to/config_file path/to/file

Motivation: This command allows you to use a specific configuration file for Prettier instead of relying on the default configuration. It is helpful when you need to customize the formatting rules based on your project’s requirements.

Explanation: The --config flag is used to specify the path to the configuration file. Prettier will read the rules from the given file and apply them during formatting.

Example output:

Formatted file: path/to/file.js

Use case 4: Format a file or directory, replacing the original

Code:

prettier --write path/to/file_or_directory

Motivation: When you want to format a file or directory and replace the original file with the formatted version, this command can be used. It helps in automatically applying the formatting changes to the existing codebase.

Explanation: The --write flag is used to indicate that the file(s) should be formatted and the changes should be written back to the original file(s). Prettier will format the file(s) according to the defined rules.

Example output:

File(s) formatted successfully: path/to/file.js

Use case 5: Format files or directories recursively using single quotes and no trailing commas

Code:

prettier --single-quote --trailing-comma none --write path/to/file_or_directory

Motivation: This command is useful when you want to format a project recursively with specific formatting options. In this example, single quotes are used instead of double quotes, and no trailing commas are allowed.

Explanation: The --single-quote option enforces the use of single quotes instead of double quotes. The --trailing-comma none option disables trailing commas in the formatted code. The --write flag indicates that the changes should be written back to the original file(s).

Example output:

File(s) formatted successfully: path/to/file.js, path/to/directory/file.js

Use case 6: Format JavaScript and TypeScript files recursively, replacing the original

Code:

prettier --write "**/*.{js,jsx,ts,tsx}"

Motivation: When you want to format JavaScript and TypeScript files in a project recursively, this command can be used. It allows you to format multiple file types at once while replacing the original files.

Explanation: The --write flag indicates that the changes should be written back to the original file(s). The file pattern “**/*.{js,jsx,ts,tsx}” specifies which files to format. In this case, it matches all JavaScript and TypeScript files in the project directory and its subdirectories.

Example output:

Files formatted successfully: path/to/file1.js, path/to/file2.tsx

Conclusion

The prettier command provides several options for formatting code and enforcing a consistent coding style. By using different flags and configuration files, you can easily customize the formatting rules according to your project’s requirements. It helps in maintaining code quality and readability by ensuring consistent formatting across different files and directories.