Prettier

Developers aim to improve readability and maintain consistency when writing code. Therefore, maintaining a consistent code style contributes to promoting clean and effective code writing, facilitating collaborative work. However, code style is subjective and can lead to conflicts during collaborative efforts. To address this issue, there is a tool called Prettier.


Installation (Prettier Command Line Tool)

This command installs Prettier as a development dependency for your project. When installed as a development dependency, you can use Prettier within your project. To use the installed Prettier, you can execute commands in the terminal to automatically format files or integrate it into your project's build scripts to format files.

Installation

npm install prettier --save-dev

Installation (VSCode Extension)

This extension is designed to work with Prettier and is integrated for use in Visual Studio Code. Upon installing this extension, you can automatically format files using Prettier within the code editor. When writing code, this extension provides automatic formatting functionality for supported file types. You can also enable automatic code formatting every time you save.

To install this extension, search for "Prettier - Code formatter" in the VSCode Extensions tab and proceed with the installation.

Prettier VSCode

Usage

You can use Prettier to transform inconsistent and hard-to-read code into a more consistent format.

  • Name
    singleQuote: true
    Type
    Usage
    Description

    This option configures the code to wrap strings with single quotes (') within the code. In this example, it's set to true, so all strings are enclosed in single quotes.

  • Name
    tabWidth: 2
    Type
    Usage
    Description

    This option indicates the number of spaces used for indentation. With it set to 2, each indent consists of two spaces.

  • Name
    semi: true
    Type
    Usage
    Description

    This option configures the usage of semicolons (;) at the end of statements. Since it's set to true, semicolons are appended at the end of statements.

  • Name
    arrowParens: 'avoid'
    Type
    Usage
    Description

    This option determines whether to omit parentheses when an arrow function has only one argument. With it set to 'avoid', parentheses are omitted in arrow functions with a single argument.

  • Name
    printWidth: 80
    Type
    Usage
    Description

    This option sets the maximum width of a single line. In this example, it's set to 80, so lines exceeding 80 characters will be wrapped.

  • Name
    bracketSpacing: true
    Type
    Usage
    Description

    This option configures the usage of spaces within curly braces () in object literals. With it set to true, spaces are used within curly braces of object literals.

In team projects, it's essential to follow the team's Prettier settings. When working on individual projects, you can configure settings and then proceed to write code for creating readable code.

prettier.config.js

module.exports = {
    singleQuote: true,
    trailingComma: 'es5',
    tabWidth: 2,
    semi: true,
    arrowParens: 'avoid',   // 화살표 함수의 괄호 스타일 ('avoid': 하나의 인자에는 괄호를 생략)
    printWidth: 80,         // 한 줄의 최대 길이
    bracketSpacing: true,   // 객체 리터럴에서 중괄호 사이의 공간 사용
};

Advantages

Description

  • Name
    Consistency Maintenance
    Type
    Advantage
    Description

    Prettier formats code into a consistent style, reducing conflicts in code styles among developers and maintaining overall project consistency.

  • Name
    Time Savings
    Type
    Advantage
    Description

    You can save time by avoiding manual adjustments of code styles. Reduced code writing time leads to increased productivity.

  • Name
    Enhanced Team Collaboration
    Type
    Advantage
    Description

    By using Prettier consistently within the team, you can shorten code review time among developers and facilitate smoother communication.

prettier Logo

Disadvantages

Description

  • Name
    Inability to Reflect Personal Preferences
    Type
    Disadvantage
    Description

    Prettier formats code with a fixed style, making it difficult to reflect styles according to individual preferences.

  • Name
    Difficulty in Code Change History Management
    Type
    Disadvantage
    Description

    Introducing Prettier can complicate commit history whenever code changes occur.

prettier Logo2

Reasons for Using Prettier and ESLint Together

Description

  • Name
    Respective Strengths and Objectives
    Type
    Description

    Prettier and ESLint each have their own strengths and objectives. Prettier excels in maintaining consistent code style while enhancing readability, while ESLint specializes in preventing bugs and issues through code quality checks and static analysis.

    Therefore, when using Prettier and ESLint together, you can format code with Prettier to ensure consistent style and utilize ESLint to check code quality, identify potential issues, and resolve them proactively.

prettier eslint