目次
拡張機能「Prettier - Code formatter」導入と使い方
今回は，テキストエディタでコードのインデントを自動で整えてくれる拡張機能「Prettier - Code formatter」を紹介します。
「Prettier - Code formatter」とは
「Prettier - Code formatter」は、コーディングしたHTMLやCSSやJavaScriptなどのソースファイルをルールに沿った形に整えてくれるツールです。
Prettier - Code formatter公式ページ
「Prettier - Code formatter」を導入するメリット
- インデントのズレを無くせる
- コードが見やすくなる
- 共同開発の場合にルールを統一できる
などがあげられます。
VS Codeでの「Prettier - Code formatter」導入手順
今回は，「Prettier - Code formatter」をテキストエディタ「VS Code」で導入する手順を解説します。
「VS Code」ページで「管理」→「拡張機能」とクリック
または
ショートカットキー⇧+⌘+xと入力して
「Prettier」などと検索すると，「Prettier - Code formatter」が出てきますので「インストール」をクリックします。
「Prettier - Code formatter」の設定
「Prettier - Code formatter」を有効にするために，自動フォーマットをONにします。
①(管理)→②(設定)をクリック
(save）などと検索し，(Editor: Format On Save)のチェックボックスにチェックを入れる。
「Prettier - Code formatter」を使ってみた
「VS Code」で適当なファイルを開いてやってみました。
保存すると，
全体がきれいにまとまりました。
まとめ
今回紹介した拡張機能「Prettier - Code formatter」を導入することによって，格段に作業環境が良くなります。
非常に便利な機能ですのでおすすめです。
今回は以上になります。
それではまた！
