Prettier

Prettier
概要:Prettierは構成可能なコード美化(フォーマット)ツールであり、プロジェクト内のコードスタイルを統一するために使用されることが多い.
インストール
yarn add --dev prettier
使用
新規プロファイル
プロジェクトルートディレクトリの下に.prettierrcファイルを作成します.このファイルはPrettierのプロファイルです.このプロファイルには、Prettierのデフォルトの構成を上書きするための構成を書くことができます.
例:

{
    //   tab   4   
    "tabWidth": 4,
    //         
    "semi": true,
    //      
    "singleQuote": true
}

コマンドラインオートフォーマットコード
スクリプトを構成してsrcのすべてのファイルをprettierフォーマットできます.
次のように構成されています.

{
    "scripts": {
        "start": "react-scripts start",
        "build": "react-scripts build",
        "test": "react-scripts test",
        "eject": "react-scripts eject",
        "format": "prettier --write src/"
    }
}

その後、yarn formatを実行するだけで、srcディレクトリの下のすべてのファイルをフォーマットできます.
commit時に変更したファイルをフォーマットする
多くの場合、私たちが関心を持っているのはコードをどのように書くかだけで、コードのフォーマットは私たちのcommitの時に自動的に行えばいいです.
Gitと統合する以上、まず現在のプロジェクトがGitを使用していることを確認します.
Gitと統合するには、4つの方法があります.
lint-staged,pretty-quick pre-commit precise-commitsのうちpre-commits以外はnpmのmoduleで、先にnpm install....lint-stagedの使い方だけを紹介します.Prettierが他のLintersと一緒に使う必要がある場合はlint-stagedも使います.
まずnpm installにしましょう.

//        ，          
npm install husky
npm install lint-staged

実際には、より簡単な操作は、次の行を実行することです.

//         husky lint-stage，     husky。
npx mrm lint-staged

husky(ハスキー)はここでGitのhooksを噛んで放さない役割を果たしています.ここではpre-commitというhookだけに関心を持っています.
mrmの後、あなたのpackage.jsonはこれらの内容を多くしました.

"devDependencies": {
    "husky": "^3.0.5",
    "lint-staged": "^9.2.5"
},
"husky": {
    "hooks": {
        "pre-commit": "lint-staged"
    }
},
"lint-staged": {
    "*.{js,css,json,md}": [
        "prettier --write",
        "git add"
    ]
}

以降、commitを行うたびにprettierは自動的にcommitを必要とするファイルをフォーマットします.