Prettier

https://gyazo.com/a73581ce97bc26be232655ae6f2cf40e

Prettier is an opinionated code formatter

そのため、わずかな設定オプションしか提供しない

デフォルト値が設定されているので、設定オプションを指定しなくても使える

ただし、Prettier を使っていることが分かるように空の設定ファイルを作成しておくのが良い

code:.prettierrc

{}

メリット

導入

インストール

code:sh

$ npm install --save-dev prettier

e.g.

code:.prettierrc

{

"singleQuote": true,

"trailingComma": "all",

"printWidth": 80,

"tabWidth": 2,

"semi": true

}

code:.prettierignore

dist

実行

code:sh

$ npx prettier index.js

code:sh

$ npx prettier --write index.js

code:package.json

{

"scripts": {

"test": "jest",

"lint": "eslint . && prettier --list-different .",

"format": "eslint --fix && prettier --loglevel warn --write ."

},

}

フォーマットの問題があるファイル名をリストアップする

Prettier に問題が発生した場合のみ出力を表示する

code:json

{

...

"editor.formatOnSave": true

}