M

MLOG

Tiếng Việt

Khai phá sức mạnh của VS Code bằng cách học xây dựng extension tùy chỉnh. Hướng dẫn toàn diện từ thiết lập đến xuất bản, giúp bạn nâng cao môi trường lập trình và chia sẻ sáng tạo.

Làm chủ Phát triển Extension cho VS Code: Hướng dẫn Toàn diện cho Lập trình viên Toàn cầu

Visual Studio Code (VS Code) đã trở thành trình soạn thảo mã nguồn được hàng triệu lập trình viên trên toàn thế giới lựa chọn. Sự phổ biến của nó đến từ bản chất nhẹ, các tính năng mạnh mẽ, và quan trọng nhất là khả năng mở rộng. Khả năng tạo các extension tùy chỉnh cho phép lập trình viên điều chỉnh trình soạn thảo theo nhu cầu cụ thể của họ, giúp tăng năng suất và hợp lý hóa quy trình làm việc. Hướng dẫn toàn diện này sẽ chỉ cho bạn từng bước trong quá trình tạo extension VS Code của riêng mình, từ thiết lập ban đầu đến việc xuất bản sản phẩm của bạn cho cả thế giới sử dụng.

Tại sao nên Phát triển Extension cho VS Code?

Phát triển extension cho VS Code mang lại nhiều lợi ích, cho cả lập trình viên cá nhân và các tổ chức:

Điều kiện tiên quyết

Trước khi bắt đầu phát triển extension, hãy đảm bảo bạn đã cài đặt những thứ sau:

Thiết lập Môi trường Phát triển của bạn

Khi đã có đủ các điều kiện tiên quyết, bạn đã sẵn sàng để thiết lập môi trường phát triển của mình:

  1. Tạo một Dự án Extension Mới: Mở terminal của bạn và chạy lệnh sau để khởi động trình tạo extension:
    2. yo code
  2. Trả lời các câu hỏi: Trình tạo sẽ hỏi một loạt câu hỏi về extension của bạn. Dưới đây là phân tích các câu hỏi phổ biến và câu trả lời được đề xuất:
    • Bạn muốn tạo loại extension nào? Chọn "New Extension (TypeScript)" cho một extension dựa trên TypeScript, đây là phương pháp được khuyến nghị.
    • Tên extension của bạn là gì? Chọn một tên mô tả và duy nhất cho extension của bạn. Ví dụ: "Code Spell Checker," "JavaScript Snippets," "Python Autocomplete."
    • Định danh extension của bạn là gì? Đây là một định danh duy nhất cho extension của bạn, thường có định dạng `publisher.extension-name`. Chọn một tên nhà xuất bản (ví dụ: tên người dùng GitHub hoặc tên công ty của bạn).
    • Mô tả extension của bạn là gì? Cung cấp một mô tả ngắn gọn và đầy đủ thông tin về chức năng của extension.
    • Khởi tạo một kho chứa git? Chọn "Yes" để khởi tạo một kho chứa Git cho việc kiểm soát phiên bản.
    • Bạn có muốn sử dụng eslint để kiểm tra mã nguồn không? Chọn "Yes" để thực thi sự nhất quán về phong cách mã nguồn.
  3. Mở Dự án trong VS Code: Sau khi trình tạo hoàn tất, hãy mở thư mục dự án vừa được tạo trong VS Code.

Hiểu về Cấu trúc Dự án

Trình tạo extension tạo ra một cấu trúc dự án cơ bản với các tệp chính sau:

Viết Extension Đầu tiên của bạn

Hãy bắt đầu bằng cách tạo một extension đơn giản hiển thị thông báo "Hello World" khi một lệnh được thực thi:

  1. Mở `src/extension.ts`: Tệp này chứa hàm `activate`, được gọi khi extension của bạn được kích hoạt.
  2. Sửa đổi hàm `activate`: Thay thế mã hiện có bằng đoạn mã sau:
    3. import * as vscode from 'vscode';

export function activate(context: vscode.ExtensionContext) {
	console.log('Congratulations, your extension \"my-extension\" is now active!');

	let disposable = vscode.commands.registerCommand('my-extension.helloWorld', () => {
		vscode.window.showInformationMessage('Hello World from My Extension!');
	});

	context.subscriptions.push(disposable);
}

export function deactivate() {}
  3. Giải thích:
    • `vscode.commands.registerCommand('my-extension.helloWorld', ...)`: Đăng ký một lệnh với ID `my-extension.helloWorld`. Lệnh này sẽ có sẵn trong bảng lệnh của VS Code.
    • `vscode.window.showInformationMessage('Hello World from My Extension!')`: Hiển thị một thông báo thông tin trong cửa sổ VS Code.
    • `context.subscriptions.push(disposable)`: Thêm lệnh vào danh sách đăng ký của extension, đảm bảo nó được giải phóng đúng cách khi extension bị vô hiệu hóa.
  4. Sửa đổi `package.json`: Thêm đoạn mã sau vào mục `contributes` để định nghĩa lệnh:
    5. "contributes": {
		"commands": [{
			"command": "my-extension.helloWorld",
			"title": "Hello World"
		}]
	}
  5. Giải thích:
    • `"commands"`: Định nghĩa các lệnh mà extension của bạn đóng góp.
    • `"command": "my-extension.helloWorld"`: Chỉ định ID lệnh khớp với ID được sử dụng trong `extension.ts`.
    • `"title": "Hello World"`: Đặt tên hiển thị cho lệnh trong bảng lệnh.

Kiểm tra Extension của bạn

Bây giờ là lúc để kiểm tra extension của bạn:

  1. Nhấn F5: Thao tác này sẽ khởi chạy một cửa sổ VS Code mới với extension của bạn đã được cài đặt. Đây là "Extension Development Host".
  2. Mở Bảng lệnh (Command Palette): Nhấn `Ctrl+Shift+P` (hoặc `Cmd+Shift+P` trên macOS) để mở bảng lệnh.
  3. Gõ "Hello World": Bạn sẽ thấy lệnh của mình được liệt kê trong bảng lệnh.
  4. Chọn "Hello World": Nhấp vào lệnh sẽ thực thi nó và hiển thị thông báo "Hello World" trong cửa sổ VS Code.

Gỡ lỗi Extension của bạn

Gỡ lỗi là rất quan trọng để xác định và khắc phục các sự cố trong extension của bạn. VS Code cung cấp hỗ trợ gỡ lỗi tuyệt vời:

  1. Đặt Điểm ngắt (Breakpoints): Nhấp vào lề của trình soạn thảo bên cạnh số dòng để đặt điểm ngắt trong mã của bạn.
  2. Nhấn F5: Thao tác này sẽ khởi chạy Extension Development Host ở chế độ gỡ lỗi.
  3. Kích hoạt Extension của bạn: Thực thi lệnh hoặc hành động kích hoạt đoạn mã bạn muốn gỡ lỗi.
  4. Kiểm tra Biến và Ngăn xếp Lệnh gọi (Call Stack): Trình gỡ lỗi của VS Code sẽ tạm dừng thực thi tại các điểm ngắt của bạn, cho phép bạn kiểm tra các biến, đi qua từng bước mã và xem xét ngăn xếp lệnh gọi.

Làm việc với API của VS Code

API của VS Code cung cấp một bộ giao diện và hàm phong phú để tương tác với trình soạn thảo. Dưới đây là một số lĩnh vực chính của API:

Ví dụ: Tạo một Extension Code Snippet

Hãy tạo một extension thêm một đoạn mã (snippet) để tạo một thành phần React cơ bản:

  1. Tạo thư mục `snippets`: Tạo một thư mục mới có tên `snippets` trong thư mục gốc của dự án.
  2. Tạo tệp Snippet: Tạo một tệp có tên `react.json` bên trong thư mục `snippets`.
  3. Thêm định nghĩa Snippet: Thêm đoạn JSON sau vào `react.json`:
    4. {
	"React Component": {
		"prefix": "reactcomp",
		"body": [
			"import React from 'react';",
			"",
			"interface Props {\n\t[key: string]: any;\n}",
			"",
			"const ${1:ComponentName}: React.FC = (props: Props) => {\n\treturn (\n\t\t
    \n\t\t\t${2:Content}\n\t\t
    \n\t);\n};",
			"",
			"export default ${1:ComponentName};"
		],
		"description": "Creates a basic React component"
	}
}
  4. Giải thích:
    • `"React Component"`: Tên của snippet.
    • `"prefix": "reactcomp"`: Tiền tố kích hoạt snippet. Gõ `reactcomp` và nhấn `Tab` sẽ chèn snippet.
    • `"body"`: Một mảng các chuỗi đại diện cho các dòng mã trong snippet.
    • `${1:ComponentName}`: Một điểm dừng tab cho phép bạn nhanh chóng thay đổi tên thành phần.
    • `"description"`: Mô tả về snippet.
  5. Sửa đổi `package.json`: Thêm đoạn mã sau vào mục `contributes`:
    6. "contributes": {
		"snippets": [{
			"language": "javascriptreact",
			"path": "./snippets/react.json"
		}]
	}
  6. Giải thích:
    • `"snippets"`: Định nghĩa các snippet mà extension của bạn đóng góp.
    • `"language": "javascriptreact"`: Chỉ định ngôn ngữ mà snippet có thể áp dụng.
    • `"path": "./snippets/react.json"`: Chỉ định đường dẫn đến tệp snippet.
  7. Kiểm tra Snippet của bạn: Mở một tệp `.jsx` hoặc `.tsx` và gõ `reactcomp`. Nhấn `Tab` để chèn snippet.

Các Kỹ thuật Phát triển Extension Nâng cao

Khi bạn đã nắm vững những điều cơ bản, bạn có thể khám phá các kỹ thuật phát triển extension nâng cao hơn:

Quốc tế hóa và Bản địa hóa (i18n và L10n)

Để tiếp cận đối tượng người dùng toàn cầu, hãy xem xét việc quốc tế hóa và bản địa hóa extension của bạn. Điều này bao gồm việc điều chỉnh extension để hỗ trợ các ngôn ngữ và khu vực khác nhau.

Xuất bản Extension của bạn

Khi extension của bạn đã sẵn sàng, bạn có thể xuất bản nó lên VS Code Marketplace để người khác sử dụng:

  1. Tạo một tổ chức Azure DevOps: Bạn sẽ cần một tổ chức Azure DevOps để xuất bản extension của mình. Nếu bạn chưa có, hãy tạo một tài khoản miễn phí trên trang web Azure DevOps.
  2. Cài đặt công cụ `vsce`: VS Code Extension Manager (`vsce`) là một công cụ dòng lệnh để đóng gói và xuất bản các extension. Cài đặt nó toàn cục bằng npm:
    3. npm install -g vsce
  3. Tạo một Nhà xuất bản (Publisher): Nhà xuất bản là một danh tính sở hữu các extension của bạn trên Marketplace. Tạo một nhà xuất bản bằng lệnh `vsce create-publisher`. Bạn sẽ cần cung cấp tên nhà xuất bản và một mã truy cập cá nhân (PAT) từ Azure DevOps.
  4. Tạo Mã truy cập cá nhân (PAT): Trong Azure DevOps, đi tới "User Settings" -> "Personal Access Tokens" và tạo một PAT mới với phạm vi "Marketplace (Publish)".
  5. Đóng gói Extension của bạn: Sử dụng lệnh `vsce package` để đóng gói extension của bạn thành một tệp `.vsix`.
  6. Xuất bản Extension của bạn: Sử dụng lệnh `vsce publish` để xuất bản extension của bạn lên Marketplace. Bạn sẽ cần cung cấp tên nhà xuất bản và PAT của mình.

Các Thực tiễn Tốt nhất cho Phát triển Extension

Hãy làm theo các thực tiễn tốt nhất này để tạo ra các extension VS Code chất lượng cao và dễ bảo trì:

Tài nguyên Cộng đồng

Dưới đây là một số tài nguyên quý giá để tìm hiểu thêm về phát triển extension cho VS Code:

Kết luận

Phát triển extension cho VS Code là một cách mạnh mẽ để tùy chỉnh môi trường lập trình của bạn, tăng năng suất và chia sẻ các giải pháp của bạn với cộng đồng lập trình viên toàn cầu. Bằng cách làm theo hướng dẫn toàn diện này, bạn có thể làm chủ nghệ thuật phát triển extension và tạo ra các công cụ sáng tạo giúp nâng cao trải nghiệm VS Code cho chính bạn và những người khác. Hãy nhớ đón nhận cộng đồng, đóng góp vào các dự án mã nguồn mở, và liên tục học hỏi và khám phá thế giới phát triển extension VS Code không ngừng phát triển. Chúc may mắn và lập trình vui vẻ!