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派です。宜しくおねがいします。