Ngừng chấp nhận sự bất tiện: Xây dựng và xuất bản VS Code Extension đầu tiên của bạn

Từ người dùng trở thành người sáng tạo

Hầu hết các lập trình viên dành hơn 40 giờ mỗi tuần làm việc trên VS Code. Nó không chỉ là một trình soạn thảo; nó là giao diện chính cho các sản phẩm sáng tạo của chúng ta. Tuy nhiên, dù có hơn 50.000 plugin sẵn có, cuối cùng bạn vẫn sẽ gặp phải một khoảng trống trong quy trình làm việc khiến bạn tốn 15 phút thao tác thủ công mỗi ngày. Đây chính là lúc bạn nên xây dựng công cụ của riêng mình.

Việc tạo ra một extension giúp bạn chuyển từ một người tiêu dùng thụ động sang một kiến trúc sư chủ động cho môi trường làm việc của mình. Bạn có thể cần một trình quản lý snippet tùy chỉnh cho một internal framework đặc thù hoặc một linter chuyên dụng cho các file log dài 2.000 dòng. Vì VS Code chạy trên Electron và TypeScript, các nhà phát triển web đã có sẵn những kỹ năng cần thiết để bắt đầu thực hiện ngay lập tức.

Bắt đầu mà không gặp khó khăn

Thiết lập không yêu cầu bạn phải tạo thư mục thủ công. Microsoft duy trì một Yeoman generator giúp xử lý các công việc nặng nhọc, đảm bảo dự án của bạn tuân thủ các best practice hiện tại. Hãy đảm bảo bạn đã cài đặt Node.js và Git trước khi tiếp tục.

Cài đặt các công cụ scaffolding cần thiết bằng cách chạy lệnh sau trong terminal:

npm install -g yo generator-code

Di chuyển đến workspace của bạn và khởi chạy generator bằng lệnh yo code. Tôi khuyên bạn nên chọn New Extension (TypeScript) để tận dụng lợi ích của IntelliSense và kiểm tra lỗi trong quá trình biên dịch. Khi được hỏi, hãy khởi tạo một Git repository ngay lập tức. Điều này cho phép bạn hoàn tác các thay đổi nếu logic thử nghiệm đầu tiên của bạn làm hỏng bản build.

Các thành phần cốt lõi: Manifest và Logic

Mọi dự án đều xoay quanh hai tệp: package.json và src/extension.ts. Những người mới bắt đầu thường gặp khó khăn ở đây, nhưng mối quan hệ giữa chúng rất đơn giản. Hãy coi tệp JSON là bàn đăng ký và tệp TypeScript là văn phòng thực sự nơi công việc diễn ra.

Manifest: package.json

Tệp này vượt xa các metadata npm tiêu chuẩn bằng cách bao gồm trường contributes. Đây là nơi bạn cho trình soạn thảo biết chính xác những gì bạn đang thêm vào. Đó có thể là một nút mới trong thanh sidebar, một mục trong menu chuột phải hoặc một phím tắt.

"contributes": {
  "commands": [
    {
      "command": "my-tool.helloWorld",
      "title": "Công cụ Hello World"
    }
  ]
}

Để giữ cho mức sử dụng bộ nhớ của trình soạn thảo ở mức thấp, hãy sử dụng activationEvents. Điều này đảm bảo extension của bạn chỉ tải khi cần thiết. Ví dụ, onLanguage:python đảm bảo công cụ của bạn ở trạng thái chờ cho đến khi người dùng mở một tệp Python, giúp tiết kiệm tài nguyên hệ thống cho người dùng.

Logic: src/extension.ts

Logic của bạn nằm bên trong các hàm activate và deactivate. Hàm activate sẽ kích hoạt ngay khi sự kiện bạn đã định nghĩa xảy ra. Dưới đây là cách bạn đăng ký một lệnh để hiển thị một thông báo đơn giản:

import * as vscode from 'vscode';

export function activate(context: vscode.ExtensionContext) {
    // Đăng ký lệnh 'my-tool.helloWorld'
    let disposable = vscode.commands.registerCommand('my-tool.helloWorld', () => {
        // Hiển thị thông báo cho người dùng
        vscode.window.showInformationMessage('Công cụ tùy chỉnh của bạn hiện đã hoạt động!');
    });

    context.subscriptions.push(disposable);
}

Mẹo nhỏ: luôn sử dụng context.subscriptions.push. Điều này đảm bảo rằng khi người dùng tắt extension của bạn, VS Code sẽ giải phóng bộ nhớ và các event listener. Điều này giúp trình soạn thảo không bị chậm theo thời gian.

Chạy và gỡ lỗi công cụ của bạn

Việc kiểm thử một extension yêu cầu một instance “Host”. Nhấn F5 để khởi chạy một cửa sổ VS Code phụ với code mới của bạn đã được kích hoạt. Sau đó, bạn có thể sử dụng Command Palette (Cmd/Ctrl+Shift+P) để chạy lệnh tùy chỉnh và xem kết quả ngay lập tức.

Việc gỡ lỗi (debugging) sẽ mang lại cảm giác quen thuộc nếu bạn đã từng phát triển web. Sử dụng console.log() để xuất dữ liệu ra “Debug Console” trong cửa sổ chính. Nếu bạn thực hiện thay đổi, hãy nhấp vào biểu tượng restart màu xanh lá cây trên thanh công cụ nổi để làm mới cửa sổ Host trong vòng chưa đầy hai giây.

Chia sẻ công cụ của bạn với thế giới

Sẵn sàng chia sẻ? Bạn sẽ cần một Personal Access Token (PAT) từ Azure DevOps. Khi tạo token, hãy đặt phạm vi (scope) thành “All accessible organizations” và “Marketplace (Manage)” để tránh lỗi xác thực trong quá trình tải lên.

Đầu tiên, hãy cài đặt CLI vsce (Visual Studio Code Extensions):

npm install -g @vscode/vsce

Tiếp theo, đăng nhập và đẩy mã của bạn lên Marketplace:

vsce login your-publisher-name
vsce publish

Sau khi extension của bạn hoạt động, bảng điều khiển Marketplace sẽ cung cấp các chỉ số tải xuống và phản hồi từ người dùng. Hãy chú ý kỹ đến tab “Issues” trên repository của bạn. Những người dùng đầu tiên thường phát hiện ra các trường hợp biên (edge cases), chẳng hạn như cách công cụ của bạn hoạt động trên Windows so với Linux, điều này giúp bạn xây dựng phiên bản 2.0 mạnh mẽ hơn.

Xây dựng extension là một quá trình lặp lại. Khi quy trình làm việc của bạn thay đổi, các công cụ của bạn cũng nên thay đổi theo. Bằng cách làm chủ chu kỳ này, bạn ngừng làm việc cho trình soạn thảo và khiến trình soạn thảo phục vụ cho mình.