Lex Template Language Server

VS Code extension cung cấp IntelliSense và language tooling đầy đủ cho file .lex — template engine của package wik/lex.

Tính năng

Tính năng	Mô tả
IntelliSense	Gợi ý component, directive, attribute theo ngữ cảnh
Hover	Xem thông tin component, props, slots khi hover
Go to Definition	Nhảy đến file định nghĩa component
Find References	Tìm tất cả nơi dùng một component
Rename	Đổi tên component đồng bộ toàn workspace
Formatting	Format file `.lex` với indent size tùy chỉnh
Diagnostics	Phát hiện lỗi cú pháp, component không tồn tại
Hot-reload config	Tự reload khi `lex.config.json` thay đổi

Yêu cầu

VS Code >= 1.85.0
Node.js >= 18
Package wik/lex trong project PHP của bạn

Cài đặt

Từ VSIX (khuyến nghị)

code --install-extension lex-language-client-0.1.0.vsix

Từ source

git clone <repo-url> lex-language-server
cd lex-language-server
npm install
npm run build

Sau đó mở thư mục trong VS Code và nhấn F5 để chạy Extension Development Host.

Cấu hình

`lex.config.json` (ưu tiên cao nhất)

Đặt file này ở root của project (cùng cấp composer.json):

{
  "viewPaths": ["views"],
  "componentPaths": ["views/components"],
  "cache": "cache/views",
  "formatterIndentSize": 4,
  "diagnostics": {
    "warnUnknownComponents": false
  }
}

Trường	Kiểu	Mặc định	Mô tả
`viewPaths`	`string[]`	`["views", "resources/views", "templates"]`	Thư mục chứa file `.lex`
`componentPaths`	`string[]`	`[]` (dùng viewPaths)	Thư mục ưu tiên khi tìm component
`cache`	`string`	`"storage/framework/views"`	Thư mục cache (chỉ mang tính thông tin)
`formatterIndentSize`	`number`	`4`	Số space khi format
`diagnostics.warnUnknownComponents`	`boolean`	`false`	Cảnh báo khi dùng component chưa được index

VS Code settings

// .vscode/settings.json
{
  "lexTemplate.viewPaths": ["views", "resources/views"],
  "lexTemplate.formatterIndentSize": 4,
  "lexTemplate.validateOnType": true,
  "lexTemplate.trace.server": "off"   // "messages" | "verbose" để debug LSP
}

lex.config.json luôn thắng VS Code settings khi cả hai cùng có.

Commands

Command	Mô tả
`Lex: Restart Language Server`	Khởi động lại server (dùng khi server bị treo)
`Lex: Re-index All Components`	Quét lại toàn bộ component trong workspace

Mở Command Palette (Ctrl+Shift+P) và gõ Lex để tìm các lệnh.

Cấu trúc project

lex-language-server/
├── client/                   # VS Code extension (client)
│   ├── src/extension.ts      # Entry point extension
│   ├── syntaxes/             # TextMate grammar (.tmLanguage.json)
│   ├── snippets/             # Code snippets
│   └── language-configuration.json
├── server/                   # Language Server Protocol server
│   └── src/
│       ├── server.ts         # Entry point LSP server
│       ├── config/           # ConfigLoader (lex.config.json)
│       ├── parser/           # Lexer, parser, AST
│       └── services/         # Completion, hover, diagnostics, …
├── shared/                   # Types dùng chung client/server
├── lex.config.example.json   # Template cấu hình
└── package.json              # npm workspaces root

Debug

Mở thư mục lex-language-server trong VS Code
Nhấn F5 → chọn Extension + Server
Mở một file .lex trong cửa sổ Extension Development Host
Xem log server: Output panel → chọn Lex Template Language Server
Để debug Node.js server: attach debugger trên port 6009

Bật trace LSP để xem toàn bộ request/response:

"lexTemplate.trace.server": "verbose"

Lex Template

Nguyễn Thành Nhân