Install & Configure Prettier

[Bianca-Morris]

Changelog:

• Install prettier, prettier-eslint-cli, eslint-plugin-prettier and eslint-config-prettier as dev dependencies
• Add .prettierrc.json and .prettierignore files
• Adjust contents of .eslintrc.json to force compatibility with prettier
• Add script for formatting JSX and JS files to package.json repo-wide (with exceptions as specified in .prettierignore)
• Run the formatting script on the entire repo; generate new files (might revert this so it's easier to merge without messing up history - see merge notes at bottom)

Related Trello Ticket:
https://trello.com/c/c9hxum2W/749-add-prettier-to-cgap-and-do-bulk-re-format-of-js-jsx-code

Deployment Notes:
This package addition mostly impacts the developer experience, so I'm not deploying anywhere. I ask that reviewers test the branch locally according to the notes below, and leave comments if they run into issues.

Testing Notes:
You MUST do npm install for this to work.

It's possible that the eslint server in vscode won't update the rules in .prettierrc.json after pulling this code (leading to a bunch of red squiggilies across files). If you restart vscode, it'll restart the server and the new rules will be applied. Alternatively, you can run eslint through the terminal to see that the new rules are applied.

In order to get full use of Prettier's auto-formatting capabilities, you'll need to install and enable the Prettier extension in your IDE of choice. For VSCode, it'll end up looking something like this:

1. Install Prettier extension
   
2. Create a .vscode/settings.json file at the root of the cgap-portal repo and add this to it:

{
    "[javascript]": {
        "editor.formatOnSave": false
    },
    "editor.codeActionsOnSave": {
        "source.fixAll": true
    },
    "editor.defaultFormatter": "esbenp.prettier-vscode"
}

3. Edit a file's formatting (try changing indentation) and prettier should re-organize it on save.

Note: you can also make these changes globally by editing settings via the vscode GUI.

If you use a different IDE/code editor, let me know and I can see about testing with that editor, too.

Merging notes:
Currently looking into a bunch of different ways to merge this without destroying our git history:

• https://medium.com/millennial-falcon-technology/reformatting-your-code-base-using-prettier-or-eslint-without-destroying-git-history-35052f3d853e
• https://flexport.engineering/upgrading-prettier-on-a-large-codebase-28d56c4de49e

If you have opinions on methods for doing this, or other thoughts, let me know.