emmet按tab不生效需检查文件语法是否为html/css，vue中块需安装vue syntax highlight插件；autoprefixer仅在保存或手动触发时运行，不监听键盘输入；多光标编辑和json布局预设可提升效率。
Emmet输入后按Tab不生效？检查语法和触发方式
Emmet在Sublime里不是“自动补全”，而是基于当前文件语法的缩写展开。如果输入div.container后按Tab没反应，大概率是文件未被识别为HTML/CSS——右下角显示Plain Text或JavaScript时，Emmet直接跳过。
- 手动设置语法：按
Ctrl+Shift+P→ 输入Set Syntax: HTML（或CSS），回车确认 -
!+Tab生成HTML5骨架，但部分系统需用Ctrl+E替代Tab（macOS常见） - Vue单文件组件中
<style></style>块默认不触发Emmet，需安装Vue Syntax Highlight插件并确保作用域正确
写CSS时想快速加前缀？别等“自动补全”，改用保存触发
Autoprefixer插件不监听键盘输入，所谓“输入flex自动补全成-webkit-flex”根本不存在。它只在你显式操作或保存时处理已有规则。
- 确认
node_path已正确配置：打开Preferences → Package Settings → Autoprefixer → Settings，填入node可执行路径（如"node_path": "/usr/local/bin/node"） - 启用保存即处理：
"auto_prefix_on_save": true仅对.css、.scss独立文件有效；.vue内样式需另配构建系统 - 手动触发快捷键：
Ctrl+Shift+P→Autoprefixer: Run，比等“自动”更可靠
多行同时编辑布局代码？光标定位比想象中更灵活
前端写布局常要批量改class名、调整padding值或同步修改多个元素的display属性。这时候靠鼠标点选效率极低，得用多光标组合技。
PigX UI 前端开发
下载
PigX UI Pro 前端开发指南 - Vue 3 + TypeScript + Element Plus。当用户提到 PigX UI、PigX 前端、lgb-mgui 项目、Vue 3 企业级后台开发、Element Plus 后台开发时使用此技能。
-
Ctrl+D逐次选中相同词（比如连续按三次选中三个col-6），再输入新值即可批量替换 -
Ctrl+Shift+L：先选中多行文本（如几行margin: 0;），再按此键，光标会落在每行末尾，适合统一加单位或分号 - 竖向选择（列模式）：按住
Shift+鼠标右键拖动，或Alt+鼠标左键（Windows），直接拉出矩形选区改内边距数值
调整窗口布局频繁切换？用JSON预设代替手动拖拽
写响应式布局时经常要在“单栏写HTML”、“左右分屏看效果”、“三栏对照CSS/JS/Preview”间切换。每次手动拖拽分组太慢，且容易错位。
- 设置好理想布局后，按
Ctrl+Shift+P→View In Groups: Set Layout，选3 Columns之类标准模板 - 非标准布局（如1行2列+底部终端）需手动记JSON：打开
Preferences → Settings - More → Layout → Edit Layout，复制当前结构到用户键绑定中 - 绑定快捷键：在
Key Bindings里加一条{"keys": ["ctrl+alt+3"], "command": "set_layout", "args": {"cols": [0.0, 0.33, 0.66, 1.0], "rows": [0.0, 0.8, 1.0], "cells": [[0, 0, 1, 1], [1, 0, 2, 1], [0, 1, 3, 2]]}}
真正卡住效率的往往不是功能缺失，而是误判了工具能力边界——比如期待Emmet实时补全CSS属性，或以为Autoprefixer能监听键盘。看清每个快捷键/插件的实际触发条件，比背一百个快捷键更管用。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
