Hướng dẫn tự tạo extension Visual Studio Code của riêng bạn

Visual Studio Code là một code editor từ Microsoft có sẵn trên Windows, Linux và macOS. Nó cung cấp các tiện ích mà bạn có thể cài đặt thông qua Marketplace của Visual Studio Code để có thêm tính năng trong code editor của bạn. Khi bạn không thể tìm thấy một extension đáp ứng đúng nhu cầu của bạn, bạn có thể tự tạo một tiện ích của riêng mình.

Hướng dẫn tự tạo extension Visual Studio Code của riêng bạn
Hướng dẫn tự tạo extension Visual Studio Code của riêng bạn

Trước khi bắt đầu, bạn cần:

  • Download và cài đặt Visual Studio Code.
  • Cài đặt Node.js trên máy bạn.
Bây giờ chúng ta bắt đầu tự tay tạo một extension Visual Studio Code với những bước cụ thể sau:

1. Cài đặt tools và môi trường

Để bắt đầu develop một extension, trước tiên bạn cần cài đặt hai npm package dưới đây:
  • yo – là command line của Yeoman.
  • generator-code – là Yeoman generator để viết code Visual Studio Code extensions.
Bạn có thể sử dụng Terminal tích hợp trong Visual Studio Code để sử dụng npx để chạy các command của yo và generator-code, sau đó chạy lệnh yo code để khởi tạo dự án mới của bạn.
Chúng ta cần cài đặt một dự án, các bạn gõ 2 lệnh bên dưới:
npm install -g yo generator-code
yo code
Khi đó chúng ta phải nhập các lựa chọn để tạo ra dự án:
What type of extension do you want to create? New Extension (JavaScript)
(Bạn muốn loại tiện ích mở rộng nào?) Ở đây chúng ta có thể chọn New Extension.
What’s the name of your extension? extension-name
(Tên của extension?)
 
What’s the identifier of your extension? extension-name
(Định danh của extension?)
 
What’s the description of your extension? this is a test extension

(Mô tả về extension?)

Enable JavaScript type checking in ‘jsconfig.json’? Yes

(Bật tính năng kiểm tra loại Javascript trong jsconfig.json?)
 
Initialize a git repository? Yes
(Khởi tạo git repository?)
 
Which package manager to use? npm
(Sử dụng loại package manager nào?)
Sau khi quá trình này hoàn tất, bạn sẽ có tất cả các tệp tin cần thiết để bắt đầu. Hai tệp tin quan trọng nhất của bạn là:
  • package.json
  • extension.js

Mở file package.json lên, bạn sẽ thấy tên, mô tả,… Có hai phần nữa rất quan trọng.

  • activationEvents: Đây là list các sự kiện sẽ kích hoạt extension của bạn. Extension được load theo lazy-loaded nên chúng không được kích hoạt cho đến khi xảy ra một trong những sự kiện kích hoạt này.
  • commands: Danh sách các lệnh mà bạn cung cấp cho người dùng chạy thông qua extension của bạn.
///
  "activationEvents": [],
  "main": "./extension.js",
  "contributes": {
    "commands": [{
      "command": "helloworld.helloWorld",
      "title": "Hello World"
    }]
  },
///

2. Cấu trúc dự án

Trước khi vào code, chúng ta cần tìm hiểu qua về cấu trúc project bao gồm những gì trước.
Hướng dẫn tự tạo extension Visual Studio Code của riêng bạn

 

  • .vscode/: Thư mục này chứa các cài đặt và cấu hình cho Visual Studio Code, bao gồm cả tệp launch.json để cấu hình thông số khởi chạy khi bạn muốn kiểm tra extension của mình.
  • test/: Chứa các tệp liên quan đến kiểm thử.
  • .eslintrc.json là một tệp cấu hình cho ESLint, một công cụ kiểm tra mã nguồn JavaScript và TypeScript để phát hiện và sửa các vấn đề về chất lượng mã, tuân thủ quy tắc lập trình, và các vấn đề khác liên quan đến quy ước cú pháp.
  • .gitignore: Tệp này liệt kê các thư mục và tệp bạn muốn Git bỏ qua khi theo dõi thay đổi. Điều này thường bao gồm các thư mục node_modules, out, và một số tệp cấu hình.
  • extension.ts (hoặc extension.js): Tệp chứa mã nguồn chính của extension.
  • package.json: Định nghĩa các dependency, cài đặt, và lệnh liên quan đến quản lý dự án.
  • vsc-extension-quickstart.md hoặc README.md thường là một tệp mô tả cho dự án của bạn. Nó có thể cung cấp hướng dẫn sử dụng, thông tin về extension, và các hướng dẫn khác.
  • CHANGELOG.md: Nếu bạn đang phát triển extension mở rộng và muốn theo dõi các thay đổi trong phiên bản, bạn có thể có một tệp changelog.

3. Khởi đầu với VS Code extensions của bạn

Như structure của project mà mình đã giới thiệu ở trên, thì bây giờ chúng ta sẽ code trên file extension.js, tệp chứa source code chính của chúng ta.
Khi các bạn mở file này lên sẽ thấy ngay một function được setup sẵn, gồm với các line comment trong code để giới thiệu qua cách để một function hoạt động trên file này, cũng như cách để bạn tạo một extension Hello World đầu tay:
/**
 * @param {vscode.ExtensionContext} context
 */
function activate(context) {
	console.log('Congratulations, your extension "helloworld" is now active!');

	let disposable = vscode.commands.registerCommand('helloworld.helloWorld', function () {

		vscode.window.showInformationMessage('Hello World from helloworld!');
	});

	context.subscriptions.push(disposable);
}

Như code trên, bạn có thể thấy được hàm activate, đây là điểm khởi đầu cho extension của bạn. Nó được gọi lần đầu tiên khi extension của bạn được kích hoạt trong Visual Studio Code.

Ngoài ra, ta thấy vscode.commands.registerCommand được sử dụng để đăng ký một lệnh mới. Trong trường hợp này, lệnh có id là helloworld.helloWorld. Khi lệnh này được gọi, đoạn code trong hàm callback sẽ được thực thi.

 

Trong hàm callback của lệnh, vscode.window.showInformationMessage sẽ hiển thị một hộp thoại thông báo với nội dung là Hello World from helloworld!.
Đối tượng disposable(khi một extension được vô hiệu hóa) được thêm vào danh sách context.subscriptions. Điều này giúp quản lý tài nguyên và đảm bảo rằng chúng sẽ được giải phóng khi extension không còn hoạt động.

4. Run và debug

Bây giờ, khi tất cả các tệp cần thiết đã được cài đặt, chúng ta có thể chạy extension của mình.
Thư mục .vscode là nơi mà VS Code lưu trữ các tệp cấu hình liên quan đến dự án của bạn. Trong trường hợp này, nó bao gồm một tệp launch.json chứa các cấu hình debug.
Từ đây, chúng ta có thể thực hiện debug. Mở tab debug ở bên trái của màn hình, sau đó nhấp vào biểu tượng “play”. Ngay sau đó, VS Code sẽ mở popup màn hình mới. Và popup này tương đương với việc bạn đã cài đặt VS Code extension trên marketplace, nên có thể sử dụng trực tiếp.
Hướng dẫn tự tạo extension Visual Studio Code của riêng bạn

 

Bây giờ, ở trên màn hình mới này, bạn cần thực hiện command palette là COMMAND+SHIFT+P với Mac hoặc CTRL+SHIFT+P với Windows và type Hello World để run.
Bạn sẽ thấy một thông báo “Hello World” xuất hiện ở góc dưới bên phải.

Lời kết

Như vậy, bài viết trên đã giúp bạn làm quen với việc tạo VS Code extension đầu tay của riêng bạn. Vì series bài viết này rất nhiều nội dung nên mình sẽ chia ra thành nhiều phần, giúp các bạn khám phá được nhiều tính năng, config, publish,… extension trong những bài viết tới.
Mong bài viết hữu ích, chúc các bạn thành công!
Hieu Ho.

Trả lời

Email của bạn sẽ không được hiển thị công khai. Các trường bắt buộc được đánh dấu *