Add code formatter capabilities

[jorgemoralespou]

Code Formatting Guide

This project uses Prettier and EditorConfig to maintain consistent code formatting across all contributors and prevent unwanted reformatting.

Why Formatting Matters

Without a standardized formatter:

• Different editors apply different formatting rules
• Auto-format on save can cause unexpected changes
• PRs can contain formatting-only changes that obscure actual code changes
• Code reviews become harder when formatting changes are mixed with logic changes

Configuration Files

.prettierrc.json

Defines the formatting rules for Prettier. The current configuration matches the existing codebase style:

• 4 spaces indentation
• Semicolons required
• Double quotes for strings
• 120 character line width
• No trailing commas

.editorconfig

Provides editor-agnostic formatting settings that work across different IDEs and editors.

.prettierignore

Specifies files and directories that should not be formatted by Prettier (e.g., node_modules, build outputs, Go files, Python files).

Setup

Install Dependencies

npm install

This installs Prettier as a dev dependency.

Editor Configuration

VS Code

The project includes .vscode/settings.json which configures VS Code to:

• Format on save
• Use Prettier as the default formatter
• Respect EditorConfig settings

If you're using VS Code, these settings will be automatically applied.

Other Editors

1. Install the Prettier extension/plugin for your editor
2. Install the EditorConfig extension/plugin for your editor
3. Configure your editor to format on save (optional but recommended)

Usage

Format All Files

npm run format

This formats all TypeScript, JavaScript, JSON, and Markdown files in the project.

Check Formatting (without modifying files)

npm run format:check

This is useful for CI/CD to verify that files are properly formatted.

Format Specific Directories

# Format gateway code
npm run format:gateway

# Format renderer code
npm run format:renderer

# Format helper code
npm run format:helper

# Format docker-extension code
npm run format:docker-extension

Pre-commit Hooks (Optional)

To automatically format files before committing, you can set up a pre-commit hook:

# Install husky (if not already installed)
npm install --save-dev husky

# Create pre-commit hook
npx husky init
npx husky add .husky/pre-commit "npm run format"

Alternatively, you can use Git hooks directly:

# Create .git/hooks/pre-commit
cat > .git/hooks/pre-commit << 'EOF'
#!/bin/sh
npm run format
git add -u
EOF
chmod +x .git/hooks/pre-commit

CI/CD Integration

The project includes a GitHub Actions workflow (.github/workflows/check-code-formatting.yml) that:

• Runs on every pull request
• Checks if code is properly formatted
• Fails the check if formatting is incorrect
• Comments on the PR with instructions to fix formatting

Troubleshooting

My editor is reformatting code differently

1. Make sure you have the Prettier extension installed
2. Check that your editor is using the project's .prettierrc.json file
3. Verify that prettier.requireConfig is set to true in your editor settings
4. Restart your editor to ensure settings are loaded

Formatting conflicts in PRs

If you see formatting-only changes in a PR:

1. The PR author should run npm run format before submitting
2. You can format the branch yourself: git checkout <branch> && npm run format && git commit -am "Format code"

Prettier is formatting files I don't want formatted

Add the file patterns to .prettierignore. Common exclusions:

• Generated files
• Vendor files
• Build outputs
• Lock files

Current Formatting Style

Based on the existing codebase, the project uses:

• Indentation: 4 spaces
• Quotes: Double quotes
• Semicolons: Required
• Line width: 120 characters
• Trailing commas: None
• Arrow parens: Always include parentheses

These settings are defined in .prettierrc.json and should not be changed without team consensus.

Things to be done

Current formatting style would reformat documentation (in markdown) as well as typescript and json files as the rules are not 100% compatible. Let's discuss which formatting style we want to enforce, and update the rules accordingly, and then reformat the code with the plugin, all at once, before merging this PR. We would need to rebase on develop before to accommodate all the changes that happen between now and then.
@GrahamDumpleton

[GrahamDumpleton]

Not sure I like this. Personally I rely on specific VS Code settings to ensure code is automatically formatted on save in consistent style using VS Code native support, or well known language specific formatters (eg., black for Python). I expect that this prettier tool is going to fight with my editor settings meaning anything committed and pushed will fail validation checks.

Can we instead first look at just having VS Code settings for the project which we all use?

[jorgemoralespou]

I was working on the code-formatting with Claude, and he told me to better use Ruff than Black, etc... which you commented on. I just wanted to raise your attention here to it.
I have used this in the PR and updated the PR with formatting and formatting-check for Python, golang as well as configeditor and prettier and configured to maintain most of the current styles we use, which means that if were to apply formatting, there would not be too much edits. In golang is mostly the order of imports.
Anyways, the PR is there, and there's commands in makefile to format as well as check formatting. There's a GH Action that would check only code in PR.

Since the .vscode folder is in .gitignore, we can not enforce vscode settings for users.

My .vscode/extensions.json looks like this:

{
  "recommendations": [
    "esbenp.prettier-vscode",
    "charliermarsh.ruff",
    "golang.go",
    "redhat.vscode-yaml",
    "editorconfig.editorconfig"
  ],
  "unwantedRecommendations": [
    "prettier.prettier-vscode"
  ]
}

And my .vscode/settings.json like this:

{
  // Editor settings
  "editor.formatOnSave": true,
  "editor.defaultFormatter": "esbenp.prettier-vscode",
  "editor.codeActionsOnSave": {
    "source.fixAll": "explicit"
  },
  "editor.tabSize": 4,
  "editor.insertSpaces": true,
  "editor.trimAutoWhitespace": true,
  "files.insertFinalNewline": true,
  "files.trimTrailingWhitespace": true,
  "files.eol": "\n",

  // File associations
  "[typescript]": {
    "editor.defaultFormatter": "esbenp.prettier-vscode",
    "editor.formatOnSave": true
  },
  "[javascript]": {
    "editor.defaultFormatter": "esbenp.prettier-vscode",
    "editor.formatOnSave": true
  },
  "[json]": {
    "editor.defaultFormatter": "esbenp.prettier-vscode",
    "editor.formatOnSave": true
  },
  "[jsonc]": {
    "editor.defaultFormatter": "esbenp.prettier-vscode",
    "editor.formatOnSave": true
  },
  "[markdown]": {
    "editor.defaultFormatter": "esbenp.prettier-vscode",
    "editor.formatOnSave": true
  },
  "[python]": {
    "editor.defaultFormatter": "charliermarsh.ruff",
    "editor.formatOnSave": true,
    "editor.codeActionsOnSave": {
      "source.organizeImports.ruff": "explicit"
    }
  },
  "[go]": {
    "editor.defaultFormatter": "golang.go",
    "editor.formatOnSave": true
  },
  "[yaml]": {
    "editor.formatOnSave": false
  },
  "[restructuredtext]": {
    "editor.formatOnSave": false
  },

  // Prettier settings
  "prettier.requireConfig": true,
  "prettier.useEditorConfig": false,

  // Disable other Markdown formatters that might conflict
  "markdown.format.enabled": false,

  // TypeScript settings
  "typescript.preferences.quoteStyle": "double",
  "typescript.format.semicolons": "insert",
  "typescript.format.insertSpaceAfterCommaDelimiter": true,
  "typescript.format.insertSpaceAfterSemicolonInForStatements": true,

  // Ruff settings
  "ruff.lineLength": 120,

  // Go settings
  "go.formatTool": "gofmt",

  // Exclude patterns
  "files.exclude": {
    "**/.git": true,
    "**/.DS_Store": true
  }
}

Maybe, we should enable having these files in the repository.