Document recommended setup and improve docs overall (#8510)

Co-authored-by: Jed Fox <git@twopointzero.us>
Co-authored-by: Georgii Dolzhykov <thorn.mailbox@gmail.com>

docs/precommit.md

@@ -3,7 +3,7 @@ id: precommit
 title: Pre-commit Hook
 ---
 
-You can use Prettier with a pre-commit tool. This can re-format your files that are marked as "staged" via `git add` before you commit.
+You can use Prettier with a pre-commit tool. This can re-format your files that are marked as “staged” via `git add` before you commit.
 
 ## Option 1. [lint-staged](https://github.com/okonet/lint-staged)
 
@@ -17,7 +17,7 @@ npx mrm lint-staged
 
 This will install [husky](https://github.com/typicode/husky) and [lint-staged](https://github.com/okonet/lint-staged), then add a configuration to the project’s `package.json` that will automatically format supported files in a pre-commit hook.
 
-See https://github.com/okonet/lint-staged#configuration for more details about how you can configure lint-staged.
+Read more at the [lint-staged](https://github.com/okonet/lint-staged#configuration) repo.
 
 ## Option 2. [pretty-quick](https://github.com/azz/pretty-quick)
 
@@ -25,11 +25,22 @@ See https://github.com/okonet/lint-staged#configuration for more details about h
 
 Install it along with [husky](https://github.com/typicode/husky):
 
+<!--DOCUSAURUS_CODE_TABS-->
+<!--npm-->
+
 ```bash
-yarn add pretty-quick husky --dev
+npm install --save-dev pretty-quick husky
 ```
 
-and add this config to your `package.json`:
+<!--yarn-->
+
+```bash
+yarn add --dev pretty-quick husky
+```
+
+<!--END_DOCUSAURUS_CODE_TABS-->
+
+Add this to your `package.json`:
 
 ```json
 {
@@ -41,7 +52,7 @@ and add this config to your `package.json`:
 }
 ```
 
-Find more info from [here](https://github.com/azz/pretty-quick).
+Read more at the [pretty-quick](https://github.com/azz/pretty-quick) repo.
 
 ## Option 3. [pre-commit](https://github.com/pre-commit/pre-commit)
 
@@ -56,7 +67,7 @@ Copy the following config into your `.pre-commit-config.yaml` file:
     - id: prettier
 ```
 
-Find more info from [here](https://pre-commit.com).
+Read more at the [pre-commit](https://pre-commit.com) website.
 
 ## Option 4. [precise-commits](https://github.com/JamesHenry/precise-commits)
 
@@ -64,10 +75,21 @@ Find more info from [here](https://pre-commit.com).
 
 Install it along with [husky](https://github.com/typicode/husky):
 
+<!--DOCUSAURUS_CODE_TABS-->
+<!--npm-->
+
 ```bash
-yarn add precise-commits husky --dev
+npm install --save-dev precise-commits husky
 ```
 
+<!--yarn-->
+
+```bash
+yarn add --dev precise-commits husky
+```
+
+<!--END_DOCUSAURUS_CODE_TABS-->
+
 and add this config to your `package.json`:
 
 ```json
@@ -80,9 +102,7 @@ and add this config to your `package.json`:
 }
 ```
 
-**Note:** This is currently the only tool that will format only staged lines rather than the entire file. See more information [here](https://github.com/JamesHenry/precise-commits#why-precise-commits)
-
-Read more about this tool [here](https://github.com/JamesHenry/precise-commits#2-precommit-hook).
+Read more at the [precise-commits](https://github.com/JamesHenry/precise-commits#2-precommit-hook) repo.
 
 ## Option 5. [git-format-staged](https://github.com/hallettj/git-format-staged)
 
@@ -92,22 +112,33 @@ Git-format-staged is used to run any formatter that can accept file content via
 
 1. Changes in commits are always formatted.
 2. Unstaged changes are never, under any circumstances staged during the formatting process.
-3. If there are conflicts between formatted, staged changes and unstaged changes then your working tree files are left untouched - your work won't be overwritten, and there are no stashes to clean up.
+3. If there are conflicts between formatted, staged changes and unstaged changes then your working tree files are left untouched - your work won’t be overwritten, and there are no stashes to clean up.
 4. Unstaged changes are not formatted.
 
 Git-format-staged requires Python v3 or v2.7. Python is usually pre-installed on Linux and macOS, but not on Windows. Use git-format-staged with [husky](https://github.com/typicode/husky):
 
+<!--DOCUSAURUS_CODE_TABS-->
+<!--npm-->
+
 ```bash
-yarn add --dev husky prettier git-format-staged
+npm install --save-dev git-format-staged husky
 ```
 
+<!--yarn-->
+
+```bash
+yarn add --dev git-format-staged husky
+```
+
+<!--END_DOCUSAURUS_CODE_TABS-->
+
 and add this config to your `package.json`:
 
 ```json
 {
   "husky": {
     "hooks": {
-      "pre-commit": "git-format-staged -f 'prettier --stdin --stdin-filepath \"{}\"' '*.js' '*.jsx' '*.ts' '*.tsx' '*.css' '*.json' '*.gql'"
+      "pre-commit": "git-format-staged -f 'prettier --stdin --stdin-filepath \"{}\"' ."
     }
   }
 }
@@ -117,13 +148,13 @@ Add or remove file extensions to suit your project. Note that regardless of whic
 
 To read about how git-format-staged works see [Automatic Code Formatting for Partially-Staged Files](https://www.olioapps.com/blog/automatic-code-formatting/).
 
-## Option 6. bash script
+## Option 6. Shell script
 
 Alternately you can save this script as `.git/hooks/pre-commit` and give it execute permission:
 
-```bash
+```sh
 #!/bin/sh
-FILES=$(git diff --cached --name-only --diff-filter=ACMR "*.js" "*.jsx" | sed 's| |\\ |g')
+FILES=$(git diff --cached --name-only --diff-filter=ACMR "*.js" "*.jsx" | sed ’s| |\\ |g')
 [ -z "$FILES" ] && exit 0
 
 # Prettify all selected files
@@ -135,11 +166,11 @@ echo "$FILES" | xargs git add
 exit 0
 ```
 
-If git is reporting that your prettified files are still modified after committing, you may need to add a post-commit script to update git's index as described in [this issue](https://github.com/prettier/prettier/issues/2978#issuecomment-334408427).
+If git is reporting that your prettified files are still modified after committing, you may need to add a [post-commit script to update git’s index](https://github.com/prettier/prettier/issues/2978#issuecomment-334408427).
 
 Add something like the following to `.git/hooks/post-commit`:
 
-```bash
+```sh
 #!/bin/sh
 git update-index -g
 ```