Prettier(日本語)

開発者はコードを記述する際に、可読性を向上させ、一貫性を保つことが重要です。このため、コードスタイルを一定に保つことは、清潔で効果的なコード記述を促進し、協力作業を容易にするのに役立ちます。ただし、コードスタイルは主観的であり、共同作業時に衝突を引き起こす可能性があります。この問題を解決するために、Prettier というツールがあります。


インストール(Prettier コマンドラインツール)

このコマンドは、プロジェクトの開発依存関係として Prettier をインストールします。開発依存関係としてインストールすると、プロジェクト内で Prettier を使用することができます。このようにインストールした Prettier を使用するには、ターミナルでコマンドを実行してファイルを自動的にフォーマットするか、プロジェクトのビルドスクリプトに統合してファイルをフォーマットすることができます。

Installation

npm install prettier --save-dev

インストール(VSCode 拡張機能)

この拡張機能は、Visual Studio Code で動作するように設計された Prettier と連携します。この拡張機能をインストールすると、コードエディタで Prettier を使用してファイルを自動的にフォーマットできます。コードを記述する際に、この拡張機能はサポートされているファイルタイプに対して自動的にフォーマット機能を提供します。ユーザーが保存するたびにコードを自動的に整理することもできます。

この拡張機能をインストールするには、VSCode の拡張機能タブで「Prettier - Code formatter」と検索してインストールしてください。

Prettier VSCode

使用方法

不統一で読みづらいコードを、Prettier を使用してより一貫性のある形式に変換できます。

  • Name
    singleQuote: true
    Type
    使用法
    Description

    このオプションは、コード内の文字列をシングルクォーテーション(')で囲むように設定します。この例では、trueに設定されているため、すべての文字列はシングルクォーテーションで囲まれます。

  • Name
    tabWidth: 2
    Type
    使用法
    Description

    このオプションは、インデントに使用されるスペースの数を示します。2に設定されているため、1つのインデントには2つのスペースが適用されます。

  • Name
    semi: true
    Type
    使用法
    Description

    このオプションは、文の末尾にセミコロン(;)を使用するように設定します。trueに設定されているため、文の末尾にセミコロンが付加されます。

  • Name
    arrowParens: 'avoid'
    Type
    使用法
    Description

    このオプションは、アロー関数の引数が1つの場合、括弧を省略するかどうかを設定します。'avoid'に設定されているため、1つの引数があるアロー関数では括弧が省略されます。

  • Name
    printWidth: 80
    Type
    使用法
    Description

    このオプションは、1行の最大幅を設定します。この例では、80に設定されているため、1行が80文字を超えると改行されます。

  • Name
    bracketSpacing: true
    Type
    使用法
    Description

    このオプションは、オブジェクトリテラル内の中括弧( )間のスペースの使用有無を設定します。trueに設定されているため、オブジェクトリテラルの中括弧間にスペースが使用されます。

チームプロジェクトではもちろん、チームの Prettier に従うべきです。個人プロジェクトを進める場合、設定を行ってからコードを記述すれば、読みやすいコードを記述できます。

prettier.config.js

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

利点

説明

  • Name
    一貫性の維持
    Type
    利点
    Description

    Prettierはコードを一貫した形式にフォーマットするため、開発者間のコードスタイルの衝突を減少させ、プロジェクト全体の一貫性を保つことができます。

  • Name
    時間の節約
    Type
    利点
    Description

    コードスタイルを手動で一つ一つ合わせる時間を節約できます。コードの記述時間が短縮され、生産性が向上します。

  • Name
    チーム協力の強化
    Type
    利点
    Description

    チーム内でPrettierを統一して使用することで、開発者間のコードレビュー時間を短縮し、コミュニケーションを円滑に行うことができます。

prettier Logo

欠点

説明

  • Name
    個別設定名
    Type
    欠点
    Description

    Prettierはコードを固定されたスタイルでフォーマットするため、個人の好みに合わせたスタイルを反映させることが難しいです。

  • Name
    コード変更履歴の管理の難しさ
    Type
    欠点
    Description

    Prettierを導入すると、コードの変更があるたびにコミット履歴が複雑になる可能性があります。

prettier Logo2

Prettier と ESLint の同時使用の理由

説明

  • Name
    それぞれの強みと目的
    Type
    Description

    PrettierとESLintはそれぞれの強みと目的があります。Prettierはコードの一貫したスタイルを保ちながら可読性を向上させるのに優れていますが、ESLintはコードの品質検査と静的解析を通じてバグや問題を事前に防止するのに特化しています。

    そのため、PrettierとESLintを同時に使用する場合、Prettierでコードスタイルを整え、ESLintでコード品質をチェックして潜在的な問題を発見し、解決することができます。

prettier eslint