コードフォーマットツールのPrettierの使い方をメモ。
設定方法
ターミナルでプロジェクトディレクトリに移動して、package.jsonがない場合は以下コマンドで生成します。
npm init
Prettierのパッケージをインストールします。
npm install prettier --save-dev
package.jsonのscriptsにformatを追加します。
{
～ 略 ～
"scripts": {
"format": "prettier --write src/"
},
～ 略 ～
}
今回は例としてsrcディレクトリ配下のファイルをフォーマットの対象としました。
フォーマットの動作確認用にファイルを追加します。
まずはsrc/js/内にscript.jsを作成して、下記内容にします。
foo(reallyLongArg(), omgSoManyParameters(), IShouldRefactorThis(), isThereSeriouslyAnotherOne());
次にsrc/html/内にindex.htmlを作成して、下記内容にします。
<!DOCTYPE html> <html lang="ja"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>テスト</title> </head> <body> <p>テキスト</p> </body> </html>
最後にsrc/css/ 内にstyle.scssを作成して、内容を下記にします。
p{
color:white;
background-color:black;
}
これで準備ができたので、下記コマンドでフォーマットを実行してみます。
npm run format
src/js/script.jsは下記のように、関数の引数間で改行が追加されました。
foo( reallyLongArg(), omgSoManyParameters(), IShouldRefactorThis(), isThereSeriouslyAnotherOne(), );
src/html/index.htmlではインデントが追加され、空要素の末尾にスラッシュが追加されました。
<!doctype html>
<html lang="ja">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>テスト</title>
</head>
<body>
<p>テキスト</p>
</body>
</html>
src/css/style.scssの場合、プロパティやセレクタと値の間に半角スペースが追加されました。
p {
color: white;
background-color: black;
}
特定のファイルやフォルダをフォーマットの対象外としたい場合、.prettierignoreを使います。
プロジェクトディレクトリのルートに.prettierignoreを作成して、以下の内容にしてみます。
src/css/
この設定の場合、フォーマット実行時にsrc/css/内のファイルは対象外になります。
特定のファイルを対象外としたい場合は以下のようにします。
**/*.scss
これでscssファイルはフォーマットの対象外になりました。
コメントが承認されるまで時間がかかります。