Local Development Experience

Local Development Experience

The goal of this document is to provide information about how to improve your local development experience beyond the minimum requirements of docker and git.

Pre-commit Hooks

See https://docs.openlibrary.org/2_Developers/Git-Cheat-Sheet.html#running-pre-commit-locally-recommended for more information.

TODO: Move this from the Git Cheat Sheet to here.

VS Code (Visual Studio Code)

Format on Save with Prettier

1. Install Prettier. Run npm i --no-audit.
2. Install the Prettier extension. In VS Code, go to the extensions panel (ctrl-shift-e, cmd-shift-e for macs), search for "prettier" and install the first choice (the one with 58 mil installs).
3. Disable Prettier by default. It's easy to end up with things being formatted accidentally for other projects, resulting in messy PRs and frustration! We recommend to disable it by default and only enable it on a per-project basis. After it installs, in the extensions panel, click the Settings cog on the Prettier extension and choose "Disable".
4. Enable prettier for openlibrary. With openlibrary open in VS Code, go to the extensions panel, click the settings cog on the Prettier extension, and choose "Enable (workspace)"
5. Enable format on save for CSS. Open your workspace settings (in your VS Code terminal, type code .vscode/settings.json), and add the following section to the root object:

    "[less]": {
        "editor.formatOnSave": true,
        "editor.defaultFormatter": "esbenp.prettier-vscode"
    }

And there you have it! Whenever you edit a .less file in the open library repo, it'll automatically get formatted with prettier when you hit save!

Note: We don't use prettier for files other than .less right now.