© 2020, Developed by Hieu Dev

Series tự tạo VS Code extension #2 - Tạo một số Command Palette tools cơ bản

Chào mừng bạn đến với phần thứ hai của series hướng dẫn tự tạo VS Code Extension! Trong bài viết này, chúng ta sẽ tập trung vào việc tạo ra một số công cụ sử dụng Command Palette - một phần quan trọng của trải nghiệm phát triển trong Visual Studio Code.

Series tự tạo VS Code extension #2 - Tạo một số Command Palette tools cơ bản

Command Palette là một công cụ mạnh mẽ trong VS Code cho phép bạn thực hiện nhanh chóng các hành động và lệnh mà không cần sử dụng chuột. Trong phần này, chúng ta sẽ xây dựng và tùy chỉnh một số lệnh sử dụng Command Palette để tăng cường năng suất phát triển của bạn.

Bắt đầu

Trong bài viết này, mình sẽ không quay lại các bước cài đặt và thiết lập môi trường, mà chúng ta sẽ đi vào ứng dụng để tạo ra tool nhanh chóng nhất. 

Để xem lại bài viết trước, hãy nhấn vào link dưới đây:

1. Tạo lệnh mới

Mở file src/extension.js và thêm một lệnh mới vào hàm activate:

	const vscode = require('vscode');

	let disposableRandomString = vscode.commands.registerCommand('hie-tools.generateRandomString', () => {
        const options = {
            prompt: 'Enter the length of the random string:',
            validateInput: (value) => {
                if (!value.match(/^\d+$/)) {
                    return 'Please enter a valid number.';
                }
                return null;
            }
        };

        vscode.window.showInputBox(options).then((value) => {
            if (value !== undefined) {
                const randomString = generateRandomString(parseInt(value, 10));
                const editor = vscode.window.activeTextEditor;

                if (editor) {
                    editor.edit((editBuilder) => {
                        editBuilder.insert(editor.selection.active, randomString);
                    });
                }
            }
        });
    });
    
    context.subscriptions.push(disposableRandomString);
    

Đây cũng là tool ví dụ đầu tiên mình giới thiệu đến với các bạn - công cụ tạo ra random string với độ dài tự chọn.

Cụ thể chi tiết đoạn code trên như sau:
  • vscode.commands.registerCommand: Đăng ký một lệnh mới trong extension của VS Code. Trong trường hợp này, lệnh có tên là 'hie-tools.generateRandomString'.
  • vscode.window.showInputBox: Mở một hộp thoại đầu vào cho người dùng nhập giá trị. Trong đoạn code này, hộp thoại này sẽ hiển thị để nhập chiều dài của chuỗi ngẫu nhiên.
  • validateInput: Một hàm xác nhận giá trị nhập từ người dùng. Trong trường hợp này, nó đảm bảo rằng giá trị nhập phải là một số nguyên dương.
  • Sau khi người dùng nhập giá trị, hàm callback được gọi với giá trị nhập. Nếu giá trị hợp lệ, một chuỗi ngẫu nhiên được tạo bằng hàm generateRandomString và chèn vào vị trí hiện tại của trình soạn thảo.
  • generateRandomString: Đây là hàm xử lý để trả về đoạn string thêm mong muốn của end user, mình sẽ giới thiệu ở phần thứ 2.
  • editor.edit: Sử dụng để chèn chuỗi ngẫu nhiên vào vị trí hiện tại của trình soạn thảo.

2. Import JS file 

Như trên code phân tích trên, function chính để tool xử lý để trả về cho người dùng nằm ở hàm generateRandomString. Hàm này mình sẽ import vào hoặc bạn có thể thêm luôn trên file extension.js. Như đây cũng là cách để mình giới thiệu các bạn cách để import.

Tạo file tools/randomString.js với code sau:

function generateRandomString(length) {
    const characters = 'ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz0123456789';
    let result = '';

    for (let i = 0; i < length; i++) {
        const randomIndex = Math.floor(Math.random() * characters.length);
        result += characters.charAt(randomIndex);
    }

    return result;
}

module.exports = generateRandomString;


Bước tiếp theo là import file js này vào file extension.js của chúng ta:

const generateRandomString = require('./tools/randomString');

3. Hiển Thị Lệnh Trong Command Palette:

Mở file package.json và thêm mô tả cho lệnh mới:

	"commands": [
      {
        "command": "hie-tools.generateRandomString",
        "title": "HieTools: Generate Random String"
      },
	]

4. Chạy Extension:

Sử dụng F5 hoặc lựa chọn "Run Extension" từ menu "Run" để chạy extension của bạn. Sau đó, mở Command Palette (Ctrl+Shift+P hoặc Cmd+Shift+P trên macOS) và nhập HieTools: Generate Random String để thấy lệnh mới của bạn.


Lời kết

Trong phần này, chúng ta đã tạo và tùy chỉnh một số công cụ sử dụng Command Palette trong VS Code Extension của mình. Bạn có thể tiếp tục mở rộng chức năng của extension bằng cách thêm các lệnh mới và tùy chỉnh chúng theo nhu cầu của dự án.

Trong phần tiếp theo, chúng ta sẽ khám phá cách tạo các tùy chọn cấu hình và tích hợp với các API của VS Code để tối ưu hóa trải nghiệm phát triển của bạn. Hãy tiếp tục theo dõi series để khám phá thêm nhiều điều thú vị khác!

Mong bài viết hữu ích, chúc các bạn thành công!
Hieu Ho.

1 Nhận xét

Mới hơn Cũ hơn

TOGETHER

WE GROW