Lua Server Pages (lua-resty-template) for VS Code
VS Code extension providing full Syntax Highlighting and Code Beautifier / Formatter for bungle/lua-resty-template templates (.lsp files) in OpenResty and Lua.
针对 OpenResty / Lua 的 bungle/lua-resty-template 模板引擎（以 .lsp 后缀识别）的 VS Code 语法高亮与代码格式化美化扩展。
✨ Features / 特性
🎨 Full Syntax Highlighting (语法高亮)
{{ expression }}: HTML-escaped Lua expression output{* expression *}: Raw unescaped Lua expression output{% lua code %}: Embedded Lua code statements and control blocks (if, for, while, repeat, function, end){( template [, context] )}: Include template file (with optional context table){[ expression [, context] ]}: Include template by dynamic Lua expression{-block-} ... {-block-}: Named block capture for layout inheritance{-verbatim-} ... {-verbatim-} & {-raw-} ... {-raw-}: Unparsed raw content blocks{# comment #}: Template comments- Escaped tag syntax:
\{{, \\{{, \{%, etc.
- OpenResty global APIs (
ngx.var, ngx.say, ngx.header, etc.) and template helpers (context, template, include, echo, layout, blocks)
- Full HTML, CSS (
<style>), and JavaScript (<script>) support with embedded template expressions inside attributes and tags
🧹 Intelligent Code Beautifier / Formatter (智能格式化美化)
- Seamlessly handles both HTML nesting (
<div> ... </div>) and Lua control blocks ({% if ... %}, {% for ... %}, {% else %}, {% end %})
- Auto-indents multiline Lua code blocks (
{% ... %})
- Cleans up and standardizes whitespace inside template tags (
{{ expr }}, {* expr *})
- Preserves
{-verbatim-} and {-raw-} blocks untouched
- Void element recognition (
<img>, <input>, <br>, <hr>, <meta>, etc.)
- Formats on save or via
Shift + Alt + F / Ctrl + Shift + I
⚡ Snippets (代码片段补全)
if, ifelse, ifelseif, for, fori, while, repeatecho ({{ ... }}), raw-echo ({* ... *}), code ({% ... %})include, include-context, include-exprblock, raw, verbatim, comment, layoutlsp-page: Full boilerplate for Lua Server Pages
💡 Hover Documentation (悬停文档提示)
- Hover over template tags or built-in variables (
context, template, include, echo, layout, blocks) to see syntax descriptions and code examples.
📖 Syntax Quick Reference / 语法速查
| Tag 语法 |
Description 描述 |
{{ expr }} |
输出经过 HTML 转义的 Lua 表达式计算结果 |
{* expr *} |
输出原始（未经转义）的 Lua 表达式计算结果 |
{% code %} |
执行 Lua 代码（控制结构、变量定义、函数调用等） |
{( file.lsp )} |
引入子模板文件 |
{( file.lsp, { ctx } )} |
引入子模板并传递 context 参数表 |
{[ expr ]} |
引入动态计算表达式结果的子模板 |
{-name-}...{-name-} |
定义命名块，存入 blocks["name"] 用于布局继承 |
{-raw-}...{-raw-} |
原样输出，内容不被模板引擎解析 |
{-verbatim-}...{-verbatim-} |
原样输出（等同于 raw） |
{# comment #} |
模板注释（不输出、不执行） |
\{{, \\{{ |
标签转义语法 |
⚙️ Configuration / 配置项
You can customize the formatter in your VS Code settings.json:
{
// 启用/禁用 .lsp 文件的格式化
"lsp.format.enable": true,
// 缩进空格数（0 表示遵循编辑器 tabSize 设置）
"lsp.format.indentSize": 2,
// 是否使用 Tab 缩进（false 表示空格缩进）
"lsp.format.indentWithTabs": false,
// 是否保留空行
"lsp.format.preserveNewlines": true,
// 最多连续保留的空行数
"lsp.format.maxPreserveNewlines": 2,
// 是否美化模板标签内的空格和多行 Lua 代码
"lsp.format.formatLuaInsideTags": true,
// 文件末尾确保以换行符结尾
"lsp.format.endWithNewline": true
}
🚀 Example / 示例
{%
layout = "layouts/default.lsp"
local title = "Lua Server Pages"
local users = { { id = 1, name = "Alice", active = true }, { id = 2, name = "Bob", active = false } }
%}
<div class="container">
<h1>{{ title }}</h1>
{( include/header.lsp )}
<table class="table">
<thead>
<tr><th>ID</th><th>Name</th><th>Status</th></tr>
</thead>
<tbody>
{% for _, user in ipairs(users) do %}
<tr>
<td>{{ user.id }}</td>
<td>{{ user.name }}</td>
<td>
{% if user.active then %}
<span class="badge active">Active</span>
{% else %}
<span class="badge inactive">Inactive</span>
{% end %}
</td>
</tr>
{% end %}
</tbody>
</table>
</div>
{%
layout = "layouts/default.lsp"
local title = "Lua Server Pages"
local users = { { id = 1, name = "Alice", active = true }, { id = 2, name = "Bob", active = false } }
%}
<div class="container">
<h1>{{ title }}</h1>
{( include/header.lsp )}
<table class="table">
<thead>
<tr><th>ID</th><th>Name</th><th>Status</th></tr>
</thead>
<tbody>
{% for _, user in ipairs(users) do %}
<tr>
<td>{{ user.id }}</td>
<td>{{ user.name }}</td>
<td>
{% if user.active then %}
<span class="badge active">Active</span>
{% else %}
<span class="badge inactive">Inactive</span>
{% end %}
</td>
</tr>
{% end %}
</tbody>
</table>
</div>
📦 Publishing to VS Code Marketplace / 提交到扩展市场
准备工作 (Prerequisites)
- 访问 Azure DevOps 创建 Personal Access Token (PAT)：
- Organization:
All accessible organizations
- Scopes: 选择
Marketplace -> Manage
- 访问 VS Code Marketplace Management 创建你的 Publisher ID。
- 将
package.json 中的 "publisher" 修改为你的 VS Code Publisher ID。
一键打包 (Build & Package VSIX)
npm run build
npx @vscode/vsce package
执行后会在根目录下生成 lua-resty-template-lsp-1.0.0.vsix 文件。你可以直接在管理后台网页端点击 Upload extension 手动上传，也可以使用 CLI 发布。
命令行发布 (Publish via CLI)
npx @vscode/vsce publish -p <YOUR_PERSONAL_ACCESS_TOKEN>
📄 License
MIT License © 2026 xnscu
| |
