Prettier Code Formatting for TypeScript Beginners

15.3 Formatting Code with Prettier

In the world of software development, maintaining a consistent code style is crucial for readability, maintainability, and collaboration. Prettier is a powerful tool that helps developers achieve this by automatically formatting code according to a set of predefined rules. In this section, we’ll explore how Prettier can be integrated into your TypeScript projects to ensure your code is always neat and tidy.

What is Prettier?

Prettier is an opinionated code formatter that supports a wide range of languages, including JavaScript and TypeScript. It enforces a consistent style by parsing your code and reprinting it with its own rules, which are configurable to some extent. This means that no matter how you write your code, Prettier will format it according to the rules you set, ensuring uniformity across your entire codebase.

Why Use Prettier?

• Consistency: Prettier ensures that all code follows the same style, making it easier to read and understand.
• Saves Time: By automating the formatting process, Prettier saves developers from manually formatting code.
• Reduces Code Review Overhead: With consistent formatting, code reviews can focus on logic and functionality rather than style.
• Improves Collaboration: A uniform code style makes it easier for teams to work together, as everyone adheres to the same formatting rules.

Setting Up Prettier with TypeScript

Let’s walk through the steps to set up Prettier in a TypeScript project.

Step 1: Install Prettier

First, you need to install Prettier as a development dependency in your project. You can do this using npm or yarn:

npm install --save-dev prettier

or

yarn add --dev prettier

Step 2: Create a Prettier Configuration File

Prettier can be configured using a .prettierrc file. This file can be in JSON, YAML, or JavaScript format. Here’s an example of a basic .prettierrc file:

{
  "semi": true,
  "singleQuote": true,
  "trailingComma": "all",
  "printWidth": 80
}

• semi: Adds a semicolon at the end of every statement.
• singleQuote: Uses single quotes instead of double quotes.
• trailingComma: Adds trailing commas wherever possible.
• printWidth: Sets the maximum line length.

Step 3: Add Prettier to Your Scripts

To format your code using Prettier, you can add a script to your package.json file:

"scripts": {
  "format": "prettier --write 'src/**/*.ts'"
}

This script will format all TypeScript files in the src directory.

Configuring Prettier Options

Prettier offers a variety of configuration options to match your project’s style preferences. Here are some commonly used options:

• tabWidth: Specify the number of spaces per indentation level.
• useTabs: Indent lines with tabs instead of spaces.
• jsxSingleQuote: Use single quotes in JSX.
• bracketSpacing: Print spaces between brackets in object literals.
• arrowParens: Include parentheses around a sole arrow function parameter.

You can find a full list of options in the Prettier documentation.

Integrating Prettier with Code Editors

Most modern code editors support Prettier integration, allowing you to format your code automatically on save.

Visual Studio Code

1. Install the Prettier Extension: Go to the Extensions view (Ctrl+Shift+X), search for “Prettier - Code formatter”, and install it.
2. Configure Format on Save: Open your settings (Ctrl+,), search for “format on save”, and enable it.
3. Set Prettier as Default Formatter: In your settings, search for “default formatter” and set it to Prettier.

WebStorm

1. Enable Prettier: Go to Preferences > Languages & Frameworks > JavaScript > Prettier.
2. Configure Prettier: Check the “On code reformat” and “On save” options to format your code automatically.

Benefits of Consistent Formatting

Consistent code formatting offers numerous benefits:

• Readability: Code is easier to read and understand when it follows a consistent style.
• Maintainability: Consistent formatting reduces the cognitive load required to understand code, making it easier to maintain.
• Collaboration: Teams can work more effectively when everyone adheres to the same code style.
• Reduced Errors: Consistent formatting can help prevent syntax errors and other issues that arise from poorly formatted code.

Try It Yourself

Let’s try formatting a simple TypeScript file with Prettier. Create a file named example.ts with the following content:

function greet(name: string) {
  console.log("Hello, " + name + "!");
}

greet("World");

Now, run the Prettier script:

npm run format

After running the script, your example.ts file should be formatted as follows:

function greet(name: string) {
  console.log('Hello, ' + name + '!');
}

greet('World');

Visualizing the Prettier Workflow

To better understand how Prettier fits into your development workflow, let’s look at a simple diagram:

    graph TD;
	    A[Write Code] --> B[Run Prettier];
	    B --> C[Formatted Code];
	    C --> D[Commit to Repository];
	    D --> E[Collaborate with Team];

This flowchart illustrates the process of writing code, running Prettier to format it, and then committing the formatted code to your repository for collaboration.

Further Reading

For more information on Prettier and its configuration options, check out the following resources:

• Prettier Documentation
• Prettier GitHub Repository

Summary

In this section, we’ve explored how Prettier can be used to maintain consistent code formatting in your TypeScript projects. By automating the formatting process, Prettier saves time, reduces errors, and improves collaboration. With Prettier integrated into your development workflow, you can focus more on writing quality code and less on formatting details.

Quiz Time!