Development Tools

This section covers the tools we use to build and develop Open Library. Unlike the Developers Handbook, which explains how the application works, these guides focus on the tools, workflows, and configurations that help you write, test, and contribute code.

Available Tools

Docker - Containerized development environment setup
Git Workflow - Version control, branching, and pull request process
Pre-Commit - Local linting and code quality hooks
Testing - Running and writing tests

Local Development Setup

Visual Studio Code (VS Code) Setup

The following instructions help you configure VS Code for an optimal experience with this project.

Auto-formatting CSS with Prettier

This setup configures VS Code to automatically format CSS files on save, ensuring consistent styling across the project.

1. Install Project Dependencies

If you haven't already, install the necessary npm packages, including Prettier:

npm install --no-audit

2. Install the Prettier Extension

Open the Extensions view in VS Code (Ctrl+Shift+X or ⌘+Shift+X).
Search for Prettier.
Install the official extension with 58 million installs.

3. Configure the Extension for This Workspace

We recommend disabling the extension globally and enabling it only for this workspace. This prevents it from reformatting code in other projects that may not use Prettier.

In the Extensions view, find the Prettier extension and click the gear icon ⚙️.
Select Disable to turn it off globally.
Select Enable (Workspace) to activate it only for this project.

4. Enable Format on Save for CSS Files

Open the workspace settings file. The easiest way is to open the VS Code command palette (Ctrl+Shift+P or ⌘+Shift+P), type Open Workspace Settings (JSON), and press Enter.
Add the following JSON object to your .vscode/settings.json file. If the file already has content, add this as a new top-level key.
json
```
"[css]": {
  "editor.defaultFormatter": "esbenp.prettier-vscode",
  "editor.formatOnSave": true
}
```

Now, whenever you save a CSS file in this project, VS Code will automatically format it using Prettier.

Frontend

Backend