引言：为什么选择 Sublime Text？
在 VS Code 大行其道的今天，Sublime Text 依然拥有一批忠实的用户。它启动速度通常在 1 秒以内，即使打开包含数千文件的大型项目也能保持流畅操作。对于需要频繁切换文件、快速编辑代码的开发者来说，Sublime 的轻量化和响应速度是它最大的卖点。
本文面向新手，覆盖HTML、CSS、JavaScript、TypeScript、Vue、Markdown六种常用语言，帮助你从“能用”进阶到“好用”。
一、安装与初识
1.1 必装插件管理器：Package Control
Sublime 的插件生态完全依赖Package Control来管理。按Ctrl+`（macOS 为Cmd+`）打开控制台，粘贴官方安装代码并回车。安装完成后，按Ctrl+Shift+P（macOS 为Cmd+Shift+P）打开命令面板，输入 “Install Package”，如果能看到 “Package Control: Install Package” 选项，说明安装成功。
1.2 界面关键信息：右下角语法标识
状态栏右下角有一个关键信息：当前文件的语法类型。打开test.py会显示 “Python”，打开Main.java会显示 “Java”。这个语法标识直接影响构建系统和 LSP 是否生效，后面会反复用到。如果语法标识不对，右键点击它可以手动切换，或用Ctrl+Shift+P输入sshtml、sscss、ssjs快速切换。
二、基础快捷键：让手不离键盘
2.1 文件与导航
| 操作 | Windows/Linux | macOS |
|---|---|---|
| 打开文件 | Ctrl+O | Cmd+O |
| 快速搜索项目文件 | Ctrl+P | Cmd+P |
| 跳转到指定行 | Ctrl+G | Cmd+G |
| 命令面板 | Ctrl+Shift+P | Cmd+Shift+P |
| 关闭当前文件 | Ctrl+W | Cmd+W |
| 开关侧边栏 | Ctrl+K, Ctrl+B | Cmd+K, Cmd+B |
Ctrl+P是使用频率最高的快捷键之一。输入文件名的一部分就能快速定位文件；输入@可以搜索文件内的函数或方法，输入:可以跳转到指定行号。
2.2 多光标编辑：Sublime 的杀手锏
Ctrl+D选择相同单词：选中一个单词后反复按Ctrl+D，会依次选中下一个相同的单词，适合批量修改变量名。想跳过某个匹配项时，按Ctrl+K, Ctrl+D跳过当前项。
Ctrl+Shift+L将选中行拆分为多光标：先选中多行，按Ctrl+Shift+L，每行末尾会出现一个光标，可以同时编辑多行。前端处理 JSON、HTML 属性列表、CSS 声明块时特别实用。
Alt+F3全选匹配项：选中一个单词后按Alt+F3，当前文件中所有相同的单词都会被选中。注意它不区分上下文，会连同注释里的同名字符串一起选中。
鼠标配合：按住Ctrl（macOS 为Cmd）依次点击不同位置，可以手动添加多个光标。
2.3 代码编辑
| 操作 | 快捷键 |
|---|---|
| 删除当前行 | Ctrl+X（不选中时） |
| 复制当前行 | Ctrl+Shift+D |
| 上移/下移当前行 | Ctrl+Shift+↑/↓ |
| 注释/取消注释 | Ctrl+/ |
| 块注释 | Ctrl+Shift+/ |
| 选中当前括号内容 | Ctrl+Shift+M |
| 跳转到匹配括号 | Ctrl+M |
| 合并行 | Ctrl+J |
| 全屏 | F11 |
| 免打扰模式 | Shift+F11 |
Ctrl+/的注释行为完全由语法高亮决定。JS 文件里加//，HTML 里加<!-- -->，CSS 里加/* */。如果按了没反应或者插出错误的注释符号，大概率是语法识别错了，先检查右下角的语法标识。
三、HTML & CSS：用 Emmet 把效率翻倍
3.1 安装 Emmet
在 Package Control 中搜索 “Emmet” 并安装。Emmet 是 Web 开发者的核心工具包，它允许你输入类似 CSS 选择器的缩写，按一个键就展开成完整的 HTML/CSS 代码。
3.2 快速生成 HTML 骨架
在空白页输入!然后按Tab键，就能自动生成完整的 HTML5 结构：
<!DOCTYPEhtml><htmllang="en"><head><metacharset="UTF-8"><title>Document</title></head><body></body></html>3.3 Emmet 缩写语法速查
| 缩写 | 展开结果 | 说明 |
|---|---|---|
ul>li*3 | 包含 3 个 li 的 ul | 嵌套 + 重复 |
div.container>p#intro | 带 class 和 id 的结构 | class/id 语法 |
a[href="#"]{点击} | 带属性和文本的链接 | 属性 + 文本 |
bd1-s#f.5 | border: 1px solid rgba(255,255,255,0.5) | CSS 属性简写 |
! | 完整 HTML5 骨架 | 快速建页 |
Emmet 也支持在 Markdown 文件中使用，比如输入ul>li*3后按Tab就能自动生成一个三个项目的无序列表。
3.4 Vue/JSX 中的 Emmet 配置
在 Vue 单文件组件或 JSX 文件中，Emmet 默认可能不生效。需要在 Emmet 设置中配置syntax_scopes和emmet_include_languages映射，让 Emmet 识别vue和jsx语法范围。
四、JavaScript & TypeScript：用 LSP 获得 IDE 级体验
4.1 安装 LSP 插件
在 Package Control 中搜索并安装LSP插件（作者为 sublimelsp）。LSP 是编辑器与语言服务器之间的通信协议，Sublime 的 LSP 插件作为客户端，连接各种语言服务器，提供自动补全、跳转定义、悬停文档等功能。
4.2 JavaScript 的 LSP 配置
安装 LSP 后，再安装LSP-typescript（同时支持 JS 和 TS）。安装方式：命令面板输入LSP: Enable Language Server Globally，选择typescript-language-server即可。
4.3 TypeScript 的构建系统
Sublime 本身不调用tsc，LSP 仅提供语法诊断与跳转，编译需要单独配置构建系统。创建一个新的 Build System（Tools → Build System → New Build System），粘贴以下配置：
{"cmd":["npx","tsc","$file"],"working_dir":"${project_path:${folder}}","selector":"source.ts","shell":true}三个要点：推荐用npx tsc而非裸tsc，避免全局版本和项目依赖冲突；working_dir必须设为项目根目录，否则 tsc 找不到tsconfig.json；selector必须严格为source.ts，打开.ts文件后右下角应显示 “TypeScript”。
4.4 编译报错的常见排查
如果编译报错 “Cannot find module ‘xxx’” 但代码在终端能跑，通常是 tsc 构建系统没读到baseUrl或paths配置。可以在构建系统的args中加["--project", "."]强制从当前目录找配置。
五、Vue：三段式高亮与 LSP 智能提示
5.1 安装 Vue 语法高亮
Vue 单文件组件包含<template>、<script>、<style>三段，需要专门的语法包才能正确高亮。在 Package Control 中搜索Vue（注意是Vue，不是Vue Syntax Highlight或其他变体）并安装。
安装后，打开.vue文件，右下角点击语法名，选择 “Open all with current extension as… → Vue Component”，这样所有.vue文件都会自动使用 Vue 语法。
Vue 语法包本身只负责高亮切分，<script>区域的 TypeScript 高亮依赖于 Sublime 内置的 TypeScript 语法引擎，<style>区域的 Sass/Less 高亮则需要额外安装对应的语法包。
5.2 安装 Vue 的 LSP
Vue 的智能提示需要LSP-vue插件。安装顺序很重要：
- 先安装LSP（sublimelsp 版本）
- 再安装Vue Syntax Highlight（提供
.vue文件的三段式高亮） - 再安装LSP-vue（自动安装并更新 Vue Language Server）
- 最后安装LSP-typescript（LSP-vue 的必需依赖，不装会导致 LSP-vue 静默失败）
安装完成后重启 Sublime。打开.vue文件，LSP 控制台（Ctrl+Shift+P → LSP: Toggle Log Panel）应显示 volar 启动成功。
5.3 Vue 3 的配置要点
在Preferences → Package Settings → LSP-vue → Settings中确认：
{"settings":{"vue_version":"3","enable_ts_in_script":true,"enable_vue_blocks":true}}vue_version: "3"确保<script setup lang="ts">和defineProps<{...}>()等 Vue 3 语法能被正确解析。如果.vue文件中的<script>区域仍然灰色或没有补全，说明 TypeScript 子语言没有正确嵌入。可以先打开一个.ts文件，确认右下角显示 “TypeScript” 而非 “JavaScript”，然后检查enable_ts_in_script是否设为true。
5.4 Vue LSP 失效的常见原因
Volar 的类型服务实际运行在 Node.js 进程中。如果 Sublime 启动时无法找到node，LSP 会静默失败，控制台也不报错。尤其 macOS M1/M2 用户，需要在 LSP 设置中指定 node 的绝对路径。
另一个常见原因是项目根目录缺少tsconfig.json，或者tsconfig.json中没有配置"types": ["vue"]。Volar 依赖这些配置来解析 Vue 的类型系统。
六、Markdown：从写作到预览
6.1 安装 Markdown 插件
在 Package Control 中搜索并安装两个插件：Markdown Editing（增强编辑体验）和Markdown Preview（实现预览功能）。安装后语法高亮会更清晰，标题、列表、加粗等结构更容易区分。
6.2 配置浏览器预览
Markdown Preview 装好后，可以通过Ctrl+Shift+P输入Markdown Preview: Preview in Browser在浏览器中预览渲染效果。
如果希望用更高效的快捷键，可以自定义绑定。打开Preferences → Package Settings → Markdown Editing → Key Bindings，添加：
{"keys":["ctrl+alt+m"],"command":"markdown_preview","args":{"target":"browser","parser":"markdown"}}保存后，打开任意.md文件，按Ctrl+Alt+M就能在浏览器中打开预览页。
6.3 快捷键写作
| 操作 | 快捷键 |
|---|---|
| 加粗 | Ctrl+B |
| 斜体 | Ctrl+I |
| 插入链接 | Ctrl+L |
| 浏览器预览 | Ctrl+Shift+M或自定义快捷键 |
这些快捷键可以让你在写作时手不离键盘，快速完成格式化操作。
6.4 导出 HTML / PDF
Markdown Preview 不仅能预览，还可以通过命令面板选择 “Export to HTML” 或 “Export to PDF” 直接导出。如果 PDF 效果不理想，可以先导出 HTML，再用浏览器打印功能保存为 PDF。
七、进阶技巧
7.1 宏录制
Sublime 的宏可以录制键盘操作序列，适合重复性的格式化或重构任务。按Ctrl+Q（macOS 为Cmd+Q）开始录制，执行操作后再按一次停止，然后通过Tools → Save Macro保存为.sublime-macro文件。
7.2 项目管理
通过Project → Save Project As保存.sublime-project文件，可以在其中配置每个项目的独立 Build System、LSP 设置和文件排除规则。在项目设置中配置"ignore_vcs_packages": true来忽略版本控制目录，加速大项目的文件索引。
7.3 实用插件推荐
Formatter：支持 HTML、CSS、JS、TS、Vue、Markdown 等数十种语言的代码格式化。
GitGutter：在行号旁显示修改状态，方便追踪代码变更。
SideBarEnhancements：增强侧边栏功能，支持右键新建文件、复制路径、在终端中打开。
ColorPicker：点击颜色值直接调出色板选择器，改 CSS 颜色不用头疼。
7.4 分屏与多窗口
Cmd+Option+2（macOS）或Alt+Shift+2可以创建左右两栏布局。对照编辑 HTML 和 CSS、Vue 模板和逻辑时特别实用。分栏之间用Ctrl+数字快速切换焦点。
八、常见问题速查
Q：Emmet 按 Tab 没反应？
A：确认右下角语法是 HTML 或 CSS，且 Emmet 设置中expand_abbreviation_by_tab为true。Vue 文件中需要在 Emmet 设置里配置syntax_scopes映射。
Q：LSP 服务器启动失败？
A：打开LSP: Troubleshoot Server查看日志。最常见的原因是 Node 路径不对或语言服务器未正确安装。macOS 用户尤其需要在 LSP 设置中指定 node 绝对路径。
Q：Vue 文件中 TS 提示不工作？
A：按顺序检查：LSP-typescript 是否已安装（LSP-vue 的必需依赖）；vue_version是否设为"3"；项目根目录是否有tsconfig.json；LSP 控制台中 volar 是否启动成功。
Q：Markdown 预览快捷键冲突？
A：Markdown Preview 默认不绑定快捷键，需要手动配置。如果Ctrl+Alt+M被其他插件占用，可以换成其他组合键。
Q：.vue文件打开后全是白色文本？
A：语法没绑定到 Vue。右键 → Set Syntax → Vue Component，或者通过Open all with current extension as…一次性绑定所有.vue文件。
总结
Sublime Text 的学习曲线其实很平缓。掌握多光标编辑和快捷键，就能覆盖 80% 的日常编辑场景；装上 Emmet，HTML/CSS 的编写速度直接翻倍；配好 LSP，JS/TS/Vue 的补全和跳转体验就接近 IDE 了；再加上 Markdown 插件，写作和文档输出也不在话下。
它的定位不是替代 IDE，而是一个极速的编辑伴侣——写脚本、改配置、快速查看代码时，Sublime 的启动速度和响应能力几乎没有对手。
如果你也在用 Sublime Text 开发前端项目或写 Markdown，欢迎在评论区分享你的配置方案和踩坑经历。
📅 2026-10-06 | 作者：技术路上的探索者
