How to cook VSCode extension

June 17, 2024

Creating My First VS Code Extension: Quick Commit

As a developer, I often found myself wanting to quickly commit changes to a file without the hassle of multiple steps. So, I decided to create my first VS Code extension, Quick Commit. This extension simplifies the process of committing changes by allowing you to commit an entire file with just a few clicks. Here's a quick rundown of my journey in building this extension.

Getting Started

The first step was to follow the official guide on creating a VS Code extension, which you can find here. This guide was incredibly helpful in setting up the basic structure of the extension.

Features of Quick Commit

- Quick Commit comes with several handy features:

- Commit the entire file with a single command: No need to stage files manually.

- Commit Message Prompt: Prompts you to enter a commit message with a predefined prefix.

- Custom Commit Prefixes: Choose from common prefixes like `fix`, `feat`, or enter a custom one.

- Git Integration: Ensures your project is a Git repository before committing.

Installation

Installing Quick Commit is straightforward:

1. Open the Extensions view by clicking on the Extensions icon in the Activity Bar or pressing Ctrl+Shift+X.

2. Search for "Quick Commit" and click Install.

3. Reload VS Code to activate the extension.

Usage

Using Quick Commit is just as simple:

1. Open a file in a Git repository.

2. Open the command palette (Ctrl+Shift+P) and type `Quick Commit: Commit File`.

3. Follow the prompts to enter a commit message prefix and the commit message.

4. The extension will add and commit the current file.

Requirements

To use Quick Commit, you need:

- Visual Studio Code

- Git installed and available in your system PATH

Code Snippets

Here's a peek at some of the key parts of the extension's code:

Activating the Extension

import * as vscode from "vscode";
import { promptCommitMessage } from "./utils/prompt";
import { getValidatedEnvironment } from "./utils/validate";
import { gitAddFile, gitCommit } from "./utils/git";

export function activate(context: vscode.ExtensionContext) {
  const commitFile = vscode.commands.registerCommand("quick-commit.commitFile", async () => {
    const validatedEnv = await getValidatedEnvironment();

    if (!validatedEnv) {
        return;
    }

    const commitMessage = await promptCommitMessage(validatedEnv.document);

    if (!commitMessage) {
        return;
    }

   await gitAddFile(validatedEnv.currentPathFolder, validatedEnv.document.uri.fsPath)
      .then((folderPath) => gitCommit(folderPath, commitMessage))
      .then((commitMessage) => vscode.window.showInformationMessage("Commited: " + commitMessage))
      .catch((error) => {
        vscode.window.showErrorMessage("An error occurred: " + error.message);
      });
  });

  context.subscriptions.push(commitFile);
}

export function deactivate() {}

Prompting for a Commit Message

import * as vscode from "vscode";
import * as path from "path";

const CUSTOM_COMMIT_MESSAGE_PREFIX = "custom...";
const commitMessagePrefixOptions = ["fix", "feat", "chore", "docs", "style", "refactor", "test", CUSTOM_COMMIT_MESSAGE_PREFIX];

export async function promptCommitMessage(document: vscode.TextDocument): Promise<string | undefined> {
  const commitMessagePrefix = await getCommitMessagePrefix();

  const commitMessage = await vscode.window.showInputBox({
    placeHolder: `adjust ${path.basename(document.uri.fsPath)}`,
    prompt: "Enter the commit message for this file.",
  });
  if (!commitMessage) {
    vscode.window.showInformationMessage("No commit message entered.");
    return;
  }

  return `${commitMessagePrefix}: ${commitMessage}`;
}

async function getCommitMessagePrefix(): Promise<string | undefined> {
  const commitMessagePrefix = await vscode.window.showQuickPick(commitMessagePrefixOptions);


  if (commitMessagePrefix === CUSTOM_COMMIT_MESSAGE_PREFIX) {
    const customCommitMessagePrefix = await vscode.window.showInputBox({
      placeHolder: "Enter custom commit message prefix",
      prompt: "Enter the custom commit message prefix.",
    });

    if (!customCommitMessagePrefix) {
      vscode.window.showInformationMessage("No custom commit message prefix entered.");
      return;
    } else {
      commitMessagePrefixOptions.unshift(customCommitMessagePrefix);
    }
    return customCommitMessagePrefix;
  }

  if (!commitMessagePrefix) {
    vscode.window.showInformationMessage("No commit message prefix selected.");
    return;
  }

  return commitMessagePrefix;
}

Known Limitations

While Quick Commit is quite handy, it does have some limitations:

- Only supports Git: The extension only works with Git repositories.

- Commits the whole file: Currently, it only supports committing entire files, not partial changes.

Meta Information

- Publisher: Pulko

- Source Code Repository: github.com/Pulko/quick-commit

Creating Quick Commit was a fantastic learning experience. If you have any feedback or ideas for improvements, feel free to reach out on GitHub or LinkedIn. Happy coding!