Prettierの導入

Pretterとは

PretterはJS, JSXからTSなど様々な言語をサーポートしているコードフォーマッターです。

Pretterを使うことで自動でコード整形され、きれいなコード、統一された記法のコードを書くことができます。

導入方法

yarn add pretter

設定

.pretterrcファイルを作成します。

{
	"singleQuote": true,
	"trailingComma": "none",
	"tabWidth": 4,
	"useTabs": true,
	"semi": false,
	"jsxSingleQuote": true,
	"arrowParens": "avoid",
	"bracketSpacing": true,
	"jsxBracketSameLine": false
}

- singleQuote: " " → ' '
- trailingComma: 文末のコンマ ,
- tabWidth: タブサイズ
- useTabs: インデントにタブを使用
- Semi: セミコロンの有無
- jsxSingleQuote: jsxにおける " " → ' '
- arrowParens: allow関数での ( ) の有無
- bracketSpacing: {module} → { module }
- jsxBracketSameLine: jsxを複数行に分けるか

フォーマットする

package.jsonにformatコマンドを追加します。

{
    "scripts": {
        "format": "prettier --write 'src/**/*.ts'"
    }
}

実行

yarn run format

上記のコマンドでsrc下のファイルが設定した内容にフォーマットされます。

おわりに

git commit直前に自動でフォーマットするように設定するといいかも。

singleQuote派、noneSemi派、tab4派です。宜しくおねがいします。

その他の記事

公開日 2020/09/27

Thanks you for reading.