Formatting Made Easy: A Guide to Using Prettier

Photo by Jandira Sonnendeck on Unsplash

Inconsistent code formatting can hinder readability and cause friction in team projects. Prettier, a robust code formatter, addresses this issue by automatically applying uniform formatting rules. This enhances code readability and maintainability and eliminates time-consuming debates over formatting. This article will guide you using Prettier to achieve clean and consistent code formatting in your projects.

Install Prettier as a development dependency, not a production dependency, and lock it down to a specific version in your project’s package.json file. This ensures everyone on the project uses the same version of Prettier, helping to prevent any formatting inconsistencies that could occur with different versions.

npm install --save-dev --save-exact prettier

Create an empty config file named .prettierrc we are using Node.js. This file signifies the usage of Prettier for code formatting. The Node.js runtime evaluates the provided JavaScript code. The fs module function writes data to a file. The first argument is the file path, here .prettierrc and the second is the data to write, here an empty string {}with a newline character \n, creating an empty JSON object within the file.

node --eval "fs.writeFileSync('.prettierrc', '{}\n')"

Specify only the settings intended to customise or override Prettier’s default behaviour in the config file. This will accommodate Playwright’s specific project needs and personal preferences. As Prettier’s default settings are designed for most scenarios, you only need to enter a few configurations that diverge from these defaults.

{
  "semi": true,
  "proseWrap": "always",
  "singleQuote": true
}

The default value for semi is false, meaning semicolons are omitted at the end of statements. However, my personal preference is to always add semicolons at the end of statements.

proseWrap is a configuration setting that controls line wrapping in Markdown files. By default, it is set to "preserve", which keeps existing line breaks. However, the recommended setting is "always". Changing to this setting will wrap text that exceeds the default print width of 80 characters.

The singleQuote configuration setting determines the type of quotes used for strings in the formatted code. By setting singleQuote to true, single quotes (') will be used instead of the default double quotes (") where applicable.

Next, create a .prettierignore file. This tells the Prettier CLI and editors which files should not be formatted.

node --eval "fs.writeFileSync('.prettierignore', '{}\n')"

To format all TypeScript files in the current directory and subdirectories, use the **/*.ts pattern. This instructs Prettier to format all TypeScript files recursively. Be aware that this could be time-consuming for larger projects. To format a single file, replace the pattern with the specific file path. Adding the — write tag in the command will directly modify the files selected by the pattern. If there are formatting changes, Prettier will display messages for each modified file. These messages will indicate the file path and the number of lines added or removed during formatting.

npx prettier --write "**/*.ts"

While starting with command-line formatting is beneficial, to leverage Prettier’s full potential, it’s best to run it from your editor. After installing the Prettier extension, you can run it either through a keyboard shortcut or automatically upon saving a file.

To set this up, open your VS Code settings (File > Preferences > Settings) and ensure that the settings.json file contains the following entries. These settings designate the Prettier extension, developed by Esben Petersen, as the default code formatter used by VS Code. By setting it to "true", VS Code is instructed to automatically format the code each time you save a file, according to the rules defined in your Prettier configuration.

  "editor.defaultFormatter": "esbenp.prettier-vscode",
  "editor.formatOnSave": true,

My recent publication compiled a comprehensive collection of 100 similar typescript programs. Each program not only elucidates essential Typescript concepts and expounds upon the significance of test automation but also provides practical guidance on its implementation using Playwright. This resource will undoubtedly be valuable if you look deeper into similar topics.

Playwright's Cookbook: Recipes with Typescript