Hướng dẫn Tối ưu hóa Quy trình Code Review trên VSCodium bằng các Tiện ích Mở rộng

Cấu hình kho tiện ích mở rộng (Marketplace)

VSCodium sử dụng Open VSX Registry làm kho lưu trữ mặc định cho các tiện ích mở rộng thay vì Microsoft Marketplace. Để đảm bảo tính ổn định và truy cập được đầy đủ các công cụ cần thiết, việc cấu hình đúng địa chỉ registry là bước đầu tiên quan trọng.

Để thay đổi nguồn hoặc cấu hình registry thủ công, bạn có thể chỉnh sửa trực tiếp file cấu hình product.json nằm trong thư mục cài đặt của ứng dụng.

Vị trí file cấu hình trên các hệ điều hành:

  • Linux: ~/.config/VSCodium/product.json
  • Windows: %APPDATA%\VSCodium\product.json
  • macOS: ~/Library/Application Support/VSCodium/product.json

Nội dung cấu hình mẫu để kết nối với Open VSX:

{
  "extensionsGallery": {
    "serviceUrl": "https://open-vsx.org/vscode/gallery",
    "itemUrl": "https://open-vsx.org/vscode/item",
    "downloadUrl": "https://open-vsx.org/vscode/extension/{publisher}/{name}/vspackage"
  }
}

Đối với các môi trường mạng nội bộ hoặc ngoại tuyến, quản trị viên có thể sử dụng tính năng cài đặt thủ công từ file .vsix thông qua dòng lệnh code --install-extension hoặc cài đặt thông qua giao diện của VSCodium.

Các tiện ích hỗ trợ kiểm tra mã nguồn (Linting & Review)

1. Code Spell Checker

Việc đặt tên biến và viết chú thích sai chính tả có thể gây nhầm lẫn cho đội ngũ phát triển. Code Spell Checker giúp phát hiện lỗi chính tả trong thời gian thực.

Sau khi cài đặt gói streetsidesoftware.code-spell-checker, bạn nên tinh chỉnh file settings.json để loại bỏ các từ khóa chuyên ngành không có trong từ điển mặc định:

{
  "cSpell.enabled": true,
  "cSpell.language": "en,vi",
  "cSpell.words": [
    "VSCodium",
    "refactor",
    "middleware"
  ]
}

2. ESLint

Đối với các dự án JavaScript hoặc TypeScript, ESLint là công cụ tiêu chuẩn để đảm bảo tuân thủ các quy tắc viết mã (coding standards). Kết hợp với plugin dbaeumer.vscode-eslint, editor có thể hiển thị cảnh báo ngay tại dòng code bị lỗi.

Để tích hợp sâu hơn, hãy tạo file cấu hình .eslintrc.js tại thư mục gốc dự án:

module.exports = {
  env: {
    browser: true,
    es2021: true,
    node: true
  },
  extends: 'eslint:recommended',
  parserOptions: {
    ecmaVersion: 'latest',
    sourceType: 'module'
  },
  rules: {
    'indent': ['error', 4],
    'linebreak-style': ['error', 'unix'],
    'quotes': ['error', 'single'],
    'no-unused-vars': 'warn'
  }
};

Kích hoạt tính năng tự động sửa lỗi khi lưu file trong VSCodium:

{
  "editor.formatOnSave": true,
  "editor.codeActionsOnSave": {
    "source.fixAll.eslint": true
  }
}

3. GitLens

GitLens cung cấp siêu dữ liệu Git trực tiếp trong editor, giúp người xem dễ dàng nhận biết ai là người viết dòng code đó và commit nào đã thực hiện thay đổi. Plugin eamodio.gitlens đặc biệt hữu dụng khi追查 (trace) lỗi hoặc đánh giá logic thay đổi.

Bạn có thể tùy chỉnh giao diện để giảm tải thông tin hiển thị:

{
  "gitLens.enabled": true,
  "gitLens.currentLine.enabled": false,
  "gitLens.hovers.currentLine.enabled": true
}

Tự động hóa quy trình Review với Git Hooks

Để giảm thiểu lượng mã có lỗi được đẩy lên repository (push), việc tích hợp kiểm tra tự động trước khi commit (pre-commit) là rất cần thiết. Dưới đây là ví dụ về script hook sử dụng Bash.

Tạo file .git/hooks/pre-commit với nội dung sau:

#!/bin/bash

echo "Đang chạy kiểm tra tự động (Pre-commit)..."

# Chạy ESLint và chỉ kiểm tra các file đã staged
FILES=$(git diff --cached --name-only --diff-filter=ACM | grep -E '\.(js|ts)$')
if [ -n "$FILES" ]; then
    npx eslint $FILES
    if [ $? -ne 0 ]; then
        echo "❌ ESLint phát hiện lỗi. Vui lòng sửa trước khi commit."
        exit 1
    fi
fi

# Kiểm tra chính tả
npx cspell "**/*.{js,ts,json}"
if [ $? -ne 0 ]; then
    echo "⚠️ Cảnh báo: Phát hiện lỗi chính tả trong mã nguồn."
fi

exit 0

Sau đó, cấp quyền thực thi cho script:

chmod +x .git/hooks/pre-commit

Xử lý vấn đề tương thích và triển khai nội bộ

Kích hoạt Proposed API

Một số tiện ích mở rộng tiên tiến yêu cầu tính năng proposedApi của VS Code vốn bị vô hiệu hóa mặc định trong VSCodium vì lý do bảo mật. Để sử dụng các tính năng này, bạn cần thêm ID của tiện ích vào danh sách cho phép trong file product.json:

{
  "extensionAllowedProposedApi": [
    "eamodio.gitlens"
  ]
}

Triển khai máy chủ Open VSX riêng

Đối với các doanh nghiệp lớn, việc sử dụng kho tiện ích mở rộng riêng tư giúp kiểm soát chặt chẽ phiên bản các plugin mà đội ngũ sử dụng. Open VSX Registry có thể được triển khai nhanh chóng bằng Docker:

docker run -d \
  -p 8080:8080 \
  -e SERVER_URL=http://localhost:8080 \
  -e PUBLIC_URL=http://localhost:8080 \
  openvsx/server:latest

Sau khi dịch vụ chạy, bạn cập nhật cấu hình product.json trên tất cả máy trạm để trỏ về địa chỉ server nội bộ này thay vì open-vsx.org.

Thẻ: VSCodium OpenVSX ESLint GitLens DevOps

Đăng vào ngày 18 tháng 6 lúc 21:21