記事・特集リスト
無料お役立ち資料
本サイトについて
お問い合わせ
閉じる

Prettier – Code formatter  【インストール・設定・使い方・機能しない時の対処方】

自動整形ツール「Prettier - Code formatter」の使い方を徹底解説。本記事で「インストール方法」・「設定」・「使い方」・「機能しない時の対処方」全て網羅しています。

カテゴリ: Visual Studio Code

自動整形ツール「Prettier – Code formatter」。
横文字も多く、難しく感じている人もいるのではないでしょうか?
実は、導入も使い方も簡単で、何よりプログラミングを効率的に行う事ができ、便利な機能です。
今回は「インストール方法」・「設定」・「使い方」・「機能しない時の対処方」を紹介します。

Prettier – Code formatterとは

Prettier – Code formatterとはソースコードを自動整形する拡張機能であり、ソースコードを保存すると、自動でタブのサイズ位置、改行の余白などを整えて整形してくれます。
主に使用できる言語は、HTML、CSS、Javascriptの言語です。
保存をすると下記のように、自動整形してくれます。

インストール方法

まずは「Prettier – Code formatter」をインストールします。

vscode拡張機能マークを押し→検索バーに「Prettier – Code formatter」を入力→インストールをクリック。これで「Prettier – Code formatter」のインストールが完了しました。

設定方法

設定画面を開きます。
「code」→「基本設定」→「設定」を押し設定画面を開きます。



設定画面検索バーに「 Format On Save」を入力し、Editor: Format On Saveにチェックマークを入れます。
これで設定は完了です。



これで使用できるようになります。 整形されていないコードを用意し、「windows:ctl+S」「mac:cmd+S」で保存し自動整形します。

これで自動整形する事ができます。

設定をカスタマイズ

Prettier – Code formatterはデフォルトでは下記のような設定になっています。

{
“printWidth”: 80,
“tabWidth”: 2,
“useTabs”: false,
“semi”: true,
“singleQuote”: false,
“quoteProps”: “as-needed”,
“jsxSingleQuote”: false,
“trailingComma”: “none”,
“bracketSpacing”: true,
“jsxBracketSameLine”: false,
“arrowParens”: “avoid”,
“rangeStart”: 0,
“rangeEnd”: Infinity,
“parser”: “none”,
“filepath”: “none”,
“requirePragma”: false,
“insertPragma”: false,
“proseWrap”: “preserve”,
“htmlWhitespaceSensitivity”: “css”,
“vueIndentScriptAndStyle”: false,
“endOfLine”: “auto”,
}

設定を変更するには、ファイルを作成し、デフォルトの記述を書き直すことで設定を変える事ができます。



プロジェクトファイル直下に「.prettierrc」ファイルを作成し



.prettierrcに記述を記載し、デフォルトの設定を変更します。



Prettier – Code formatterプロパティの説明

プロパティ 説明
printWidth 文字数制限の確認
tabWidth  インデントの幅
useTabs スペースをタブに置き換える
semi 行末にセミコロンを追加します。
singleQuote ダブルクォーテーション、シングルクォーテーションの選択
quoteProps オブジェクトのプロパティを引用符で囲む
jsxSingleQuote  jsxでシングルクォート、ダブルクォート選択
trailingComma 末尾のカンマ指定
bracketSpacing オブジェクトリテラルのスペースの有無
jsxBracketSameLine 複数行のJSX要素の「>」の位置指定
arrowParens アロー関数の()の有無
rangeStart
rangeEnd
ファイル一部のセグメントのみフォーマット
parser パーサーを指定
filepath 使用するパーサーを推測するためのファイル名を指定
requirePragma プラグマの有無
“insertPragma ファイルの先頭にプラグマ指定の有無
proseWrap markdownの折り返し設定
htmlWhitespaceSensitivity HTMLファイルの空白感度を指定
vueIndentScriptAndStyle Vueファイル内の<script>と<style>のインデント指定
endOfLine 改行の文字コード指定

Prettier – Code formatterが機能しない時の注意点

機能しない時は、2点を確認して下さい。
1.Editor:Format On SaveEditor:Format On Saveのチェックマーク
2.Editor:Default Formatterがnullになっていないか
一つ一つ見ていきます。

1.Editor:Format On Saveのチェックマークの確認
設定画面を開きます。
「code」→「基本設定」→「設定」を押し設定画面を開きます。



検索バーに「Editor:Format On Save」を入力。
Editor:Format On Saveにチェックマークが入っているかの確認。
チェックマークが入っていなければチェックマークを入れてください。



2.Editor:Default Formatterがnullになっていないか
設定検索バーに「Editor:Default Formatter」を入力
Editor:Default Formatterがnullになっていれば「Prettier – Code formatter」を選択。

以上の2点を確認して下さい。

まとめ

今回は自動整形ツールPrettier – Code formatterのインストール・設定・使い方・機能しない時の対処方について解説してきました。
本記事を参考に「Prettier – Code formatter」を使用し、開発効率の改善に繋げていただけたら幸いです。

最後までお読みいただきましてありがとうございます。ご意見・ご要望などございましたら、
以下のフォームよりお問い合わせを受けつけておりますので、よろしければご利用ください。

この記事がお役に立ちましたら、"いいね!"をお願いします
minwebの最新情報をお届けします

minweb編集部(株)セルリア

”共に考え、共に創るWebの成功戦略”というスローガンのもと、お客様と一からWeb戦略を考え、
企画し実装まで支援する伴走型Webコンサルティング会社です。

こちらの記事をお読みのかたにおすすめ!完全無料のダウンロード資料

Googleサーチコンソール使い倒し活用術  <AOHON>

ダウンロード資料画像

Googleの検索エンジンに関する情報を幅広く確認できるツール「Googleサーチコンソール」の活用方法をまとめました。新サーチコンソールの機能を網羅的に紹介するだけでなく、Webサイトを最適化できる実践的な方法までわかりやすく解説します。

サーチコンソール初心者の方が知りたい導入方法から、上級者向けのコンテンツ改善の方法まで、押さえておきたい要素を1つに集めた、SEOに力を入れたいすべてのWeb担当者におすすめの一冊です。