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

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

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

自動整形ツール「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	改行の文字コード指定