Local Development Experience

Local Development Experience

This guide covers optional tools and configurations to improve your local development workflow beyond the minimum requirements of Git and Docker.

---

Pre-commit Hooks

Pre-commit hooks are scripts that run automatically before you create a commit. They help ensure code quality and consistency by running checks like linters and formatters, preventing errors from being committed to the repository.

Our project's pre-commit configuration and setup instructions are currently documented in our Git Cheat Sheet.

➡️ See Running Pre-commit Locally for setup instructions.

Note: The section in the link above will be migrated here in the future. For now, please refer to it there.

---

Visual Studio Code (VS Code) Setup

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

Auto-formatting LESS/CSS with Prettier

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

Important: Currently, this project only uses Prettier for .less files. This configuration is scoped accordingly to prevent accidentally reformatting other files.

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

1. Open the Extensions view in VS Code (Ctrl+Shift+X or ⌘+Shift+X).
2. Search for Prettier.
3. 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.

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

4. Enable Format on Save for LESS Files

1. 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.

2. 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.

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

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