3/22品質UPVSCode2024年3月22日コードを見やすくするために、インデントや改行、スペースなどを適切に使うことは非常に重要です。それらを一々手作業で行うのは非常に手間がかかります。Prettierを導入すれば、コードを見やすく自動的に整形してくれるため、作業者はコードの見やすさを気にすることなく、コーディング作業に集中することが出来ます。コードの書き方が統一されることで可読性が高まり、メンテナンス性や作業スピードの向上、チーム制作の効率化にも効果的です。Code)で使うための方法を解説します。目次Prettierの特徴Prettierは、ソースコードを自動的に見やすく整形してくれるコードフォーマッターです。対応する言語のファイルを保存した際に、コードのインデントや改行などを自動的に見やすく整えてくれます。こんなにぐちゃぐちゃになったコードでも・・・ファイルを保存するだけで一瞬でコードが整形され、見やすくなります。対応言語は以下の通りで、フロントエンドで使用される言語にはほとんど対応しています。formatter」Prettierを導入するための方法はいくつかあります。アプリケーション開発の現場や、チーム制作における規約を厳格に管理したい場合、npmやyarnのパッケージを使用するのが一般的ですが、導入手順や設定が複雑です。formatter」がおすすめです。Codeにインストールして簡単な設定を行うだけで、お手軽にPrettierを使用することが出来ます。formatter」の導入〜設定方法を解説します。Code左サイドメニューから、拡張機能のタブを開きます。formatterと入力し、プラグインを検索します。以下のプラグインが見つかったら、[インストール]をクリックしてください。インストール直後の状態では、Prettierは手動で指示しない限り実行されません。ファイル保存時に自動でPrettierを実行させるためには、次の章で解説する設定が必要です。Codeの設定を変更します。Code画面左下の歯車マークをクリックし、[設定]を選択してください。formatと入力します。その後、検索結果から以下の項目を探し、それぞれ設定を変更してください。以上で、ファイルの保存時に自動的にPrettierが実行され、コードを綺麗に整えてくれるようになります。場合によってフォーマット(コード整形)のルールをカスタマイズしたい時があると思います。その設定方法を、VSCode共通の設定方法プロジェクト毎の個別の設定方法の2パターン紹介します。VSCode共通の設定方法ご自身がVSCode上で編集するファイル全てに対して適用される、デフォルトの設定になります。プロジェクト毎に個別の設定を行わない場合は、ここでの設定内容が適用されます。3「拡張機能の設定」を選択します。設定画面に移動するので、画面上部のタブが「ユーザー」になっていることを確認します。(「ワークスペース」タブを選択すると、プロジェクト毎の個別の設定になります)Prettierのフォーマットルールのオプション設定が一覧表示されています。false全てのオプション設定についての詳細は公式ドキュメントをご覧ください。プロジェクト毎の個別の設定方法プロジェクト毎に個別に設定を変更することも可能です。プロジェクトのルート直下に.prettierrc.jsonという名前のファイルを新規作成します。(※ファイル名最初のドット.を忘れずに).prettierrc.jsonファイルに、このプロジェクトのみ適用させたい設定項目をJSON形式で記述します。false全てのオプション設定についての詳細は公式ドキュメントをご覧ください。この記事ではJSONファイルでの設定方法を解説しましたが、それ以外の形式で設定ファイルを作成することも可能です。1つのプロジェクトをチームで共同制作する場合、Prettierの設定が作業者ごとに異なっていると、コードのフォーマットがバラバラになってしまいます。.prettierrc.jsonなどの設定ファイルを共有することで、フォーマットのルールをチームで統一することが可能です。formatter」のインストール&設定方法について解説しました。コードの整形をツールで自動化することで、コーディング作業を効率化しましょう。VSCodeには他にもコーディング作業の効率を格段に高めてくれる拡張機能が豊富に公開されています。「Web制作コーダーに絶対使って欲しい拡張機能」を以下の記事で紹介しているので、是非ご覧ください。品質UPVSCode内容が良かったらSNSでシェアしていただけると嬉しいです!ダークモードいわっちWebエンジニア福岡在住のフリーランスWebエンジニア。東京都内の自社開発企業でフロントエンドエンジニアとして約3年間勤めた後、フリーランスとして独立。当ブログでは「高品質なWebサイト制作」をテーマにした技術情報をメインに発信しています。Web制作案件のご相談も承っておりますので、お気軽にご相談ください。