Prettierの設定

Node.js上で動作するコードフォーマッター「Prettier」の設定方法を記録しておく。

Prettierのインストール

VSCodeの拡張機能から「Prettier」をインストール。詳しい方法は下記リンク先を参照。
https://ma-vericks.com/vscode-prettier/

Prettierの設定

プロジェクト直下に「.prettierrc」というファイルを作成し、そこにJSON形式で設定を追加。

私のプロジェクトで利用する共通設定はとりあえず下記の通り。

1
2
3
4
{
"semi": false,
"singleQuote": true,
}

“semi”:ステートメントの最後にセミコロンを付与(falseで付与しない)
“singleQuote”:二重引用符の代わりに単一引用符を使用(true)

デフォルトの設定

「.prettierrc」ファイルを作成していない場合は、下記の設定が適用される。

詳しくはPrettier公式サイトを参照。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
{
"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",
}