Prettier - izudon/izudon.github.io GitHub Wiki
- See also ESLint
10.2 節に詳しい。
インストール
$ npm install --save-dev prettier
$ yarn add --dev prettier
設定
.prettierrc
{
"semi": true,
"trailingComma": "es5",
"singleQuote": false,
"printWidth": 80
}
semi
: 行末(文の終わり)にセミコロンをつけるか。trailingComma
: 配列等の最終要素の末にコンマを付けるか。singleQuote
: 引用符を'
にするか(false
にすると"
になる)。printWidth
: 1行の文字数。
利用
- チェックのみ
$ npx prettier --check 〈ファイルまたはフォルダ〉
$ yarn run -s prettier --check 〈ファイルまたはフォルダ〉
- 書き換える
$ npx prettier --write 〈ファイルまたはフォルダ〉
$ yarn run -s prettier --write 〈ファイルまたはフォルダ〉
スクリプトに登録
package.json
"scripts": { "eslint": "prettier --write 'src/**/*.js'" },
$ npm run prettier
$ yarn run prettier
資料
2022.10.12
ESLint、Prettierによりソースコードを自動整形してみた2022.09.08
Prettierの導入方法 - フロントエンド開発で必須のコード整形ツール - ICS MEDIA2022.05.31
ESLint・Prettierを併用してコードスタイルのチェックはPrettierにまかせてみた|SHIFT2019.12.07
ESLint / Prettier について学んだことまとめ - Qiita2018.02.22
Prettier 入門 ~ESLintとの違いを理解して併用する~ - Qiita- npmとyarnのコマンド早見表 - Qiita