Sublime代码编辑器中配置微信小程序开发高亮及代码提示

夜丽小哥_3753

夜丽小哥_3753

2026-06-25

569人浏览

原创

sublime需手动绑定.wxml/.wxss语法并配置js custom注入小程序全局变量才能实现高亮与补全:装sublime-wxml插件后须右下角选wxml绑定,wxss复用css语法,js中需在js custom设置globals并添加// @ts-check注释激活page()等补全。

sublime代码编辑器中配置微信小程序开发高亮及代码提示

Sublime 本身不识别 .wxml.wxss,装完插件也不高亮,大概率是语法没绑定;Page() 报错、补全空白,不是插件没装,而是 JS 环境没注入小程序全局变量。

WXML 文件始终白底黑字?先装插件再手动绑定语法

Sublime 默认把 .wxml 当纯文本,装了 sublime-wxml(GitHub 仓库名必须含该字符串,作者 zjz777 或 hizzgdev)也无效——因为没触发语法识别。关键一步是绑定:

  • 打开任意 pages/index/index.wxml,右下角点击当前语法名(显示“Plain Text”或空)
  • Open all with current extension as… → WXML
  • 想永久生效:菜单 Preferences → Settings – Syntax Specific,右侧 JSON 加一行:{"extensions": ["wxml"]}

别用“Set as HTML”凑合——{{ }}<wxs></wxs> 标签不会高亮,且可能干扰 emmet 行为。

WXSS 高亮直接复用 CSS 语法,别找专用包

.wxss 是 CSS 超集,没有独立语法必要。所谓“WXSS Syntax”插件大多已失效或与原生 CSS 支持冲突。

  • 右键任一 index.wxssOpen all with current extension as… → CSS
  • 或进 Preferences → Settings – Syntax Specific,填:{"syntax":"Packages/CSS/CSS.sublime-syntax"}

这样能保留 color preview、括号匹配、属性提示;view::after 这类 WXSS 特有伪元素不报错但也不高亮,属正常——校验 rpx 或 lint 应交给微信开发者工具或 VSCode + minapp 插件。

微信公众号文章阅读器
微信公众号文章阅读器

读取并提取微信公众号文章标题、公众号名称及正文内容,支持移动端访问和自动重定向,适用于mp.weixin.qq.com链接。

下载

JS 里 Page() 报黄线、无补全?用 JS Custom 注入全局变量

Sublime 自带 JS 支持完全不认识 Page()Component()getApp(),这不是警告,是环境缺失。

  • JS Custom 插件(Package Control 搜即可)
  • 菜单 Preferences → Package Settings → JS Custom → Settings
  • 在用户设置里加:"scopes": {"source.js": {"globals": ["Page", "Component", "App", "getApp", "wx"]}}
  • 另存为 .js 文件后,顶部加注释 // @ts-check// @jsx React(任一即可)激活补全

不加注释,JS Custom 的全局变量声明不会生效;补全仍为空,不是插件问题,是没触发类型检查上下文。

自动补全靠 Sublime-wxap,别用老旧 snippet

2016 年的 Sublime-snippet 已停止维护,w 开头触发、无作用域控制,容易和 Emmet 或其他 snippet 冲突。

  • Sublime-wxap(Package Control 搜,认准 GitHub 仓库名含 Sublime-wxap
  • 安装后需额外配置补全触发字符:菜单 Preferences → Settings – User,加:"auto_complete_triggers": [{"characters": "
  • WXML 中输入 <vi> 就能补全 <code><view></view>,JS 中输入 Page 后按 Tab 可展开模板

补全功能依赖语法绑定和 JS Custom 全局变量双重就位;少一个环节,Page({}) 就只是个普通函数名,不会带参数提示。

最易被忽略的是:所有配置都依赖文件已保存且后缀正确——未保存的临时文件、重命名但未改后缀(如 index.html 改成 index.wxml 却没点“Save As”),Sublime 都不会应用 syntax specific 设置。

相关文章

微信app下载
微信app下载

微信是一款手机通信软件,支持通过手机网络发送语音短信、视频、图片和文字。微信可以单聊及群聊,还能根据地理位置找到附近的人,带给大家全新的移动沟通体验,有需要的小伙伴快来保存下载体验吧!

下载

本站声明:本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系admin@php.cn

相关专题

更多
微信是谁开发的
微信是谁开发的

微信是由张小龙所带领的腾讯广州研发中心产品团队打造开发的,并不是马化腾开发的,而腾讯公司总裁马化腾是在产品策划的邮件中确定这款产品的名称叫做“微信”的。想了解更多微信相关的内容,可阅读本专题下面的相关文章。

2024.11.05

5375

8

Vibeknow在线使用入口合集
Vibeknow在线使用入口合集

本专题汇总了Vibeknow在线创作视频的官方入口及网页版使用教程,涵盖PPT、PDF、Word等文档一键转讲解视频的核心操作,并整理了免费版水印规则与手机端浏览器访问指南,助你快速将知识内容视频化。

2026.09.21

0

20

NumPy随机数文件读写与dtype数据类型
NumPy随机数文件读写与dtype数据类型

本专题整理 NumPy 随机数、文件读写与 dtype 数据类型相关教程,覆盖 Generator/random、随机数种子、正态分布采样、npy/npz/CSV/TXT 保存读取、loadtxt/savetxt、memmap、大文件处理、astype 类型转换、结构化 dtype、整数溢出和精度丢失等场景。

2026.09.21

0

24

NumPy矩阵运算与线性代数计算
NumPy矩阵运算与线性代数计算

本专题整理 NumPy 矩阵运算与线性代数计算相关教程,覆盖矩阵乘法、dot 与 @ 运算符、逆矩阵、行列式、特征值与特征向量、SVD、线性方程组、欧氏距离、矩阵分解和大规模矩阵性能优化等内容,帮助读者掌握 np.linalg 与矩阵计算实战。

2026.09.21

0

20

NumPy广播机制数学运算与统计分析
NumPy广播机制数学运算与统计分析

本专题整理 NumPy 广播机制、数组数学运算与统计分析相关教程,覆盖广播规则、维度对齐、矩阵与数组加减除法、向量化计算、均值方差、分位数、中位数、直方图和 unique 频次统计等场景,帮助读者掌握 ndarray 高效计算与统计处理方法。

2026.09.21

0

17

NumPy数组创建索引切片与数据选择
NumPy数组创建索引切片与数据选择

本专题整理 NumPy 数组创建、索引、切片与数据选择相关教程,覆盖 np.array、zeros/ones、多维数组形状、基础切片、花式索引、布尔索引、条件筛选、视图与副本等常用场景,帮助读者系统掌握 ndarray 数据构造与高效提取方法。

2026.09.21

0

12

Aionclaw智能助手介绍
Aionclaw智能助手介绍

本专题汇总了AionClaw(AI龙虾助手)的功能介绍与在线使用入口。AionClaw是杭州趣猿人工智能有限公司推出的桌面级AI智能体,能直接在电脑上读写文件、运行脚本、操作浏览器,自动交付Word、PPT、Excel等成品。

2026.09.20

20

13

AionClaw AI智能体与电脑自动化任务执行功能使用教程
AionClaw AI智能体与电脑自动化任务执行功能使用教程

AionClaw专题整理AI智能体与电脑自动化相关功能使用教程,涵盖安装部署、AI任务执行、Skills技能、文件处理、浏览器控制、电脑操作、持久记忆、聊天工具连接以及办公、编程和内容创作等功能,帮助用户快速掌握AionClaw的实际使用方法。

2026.09.20

0

15

AI视频生成软件推荐
AI视频生成软件推荐

本专题汇总了当前主流的AI视频生成软件推荐与排行榜单,涵盖seko、AniShort、剧云、Lovart、LiblibAI及立刻mv等热门工具。同时整理了各软件在文生视频、图生视频、时长限制、画质表现及免费额度等方面的差异对比,助您快速选对适合创作需求的AI视频生成工具。

2026.09.16

200

9

热门下载

更多
网站特效
/
网站源码
/
网站素材
/
前端模板

精品课程

更多
相关推荐
/
热门推荐
/
最新课程