编辑器 on Liangweidong's blog

VSCode HTML 开发速查与 Deno 入门

Tue, 15 May 2018 00:00:00 +0800

为什么写这篇：2018 年 VSCode 已经超越 Sublime 成为前端编辑器霸主，Emmet 缩写让写 HTML 像写"补全指令"一样快。同年 Node.js 作者 Ryan Dahl 公开了 Deno——“一种更安全、更现代的 JS/TS 运行时”。本文是这两件事的速查手册。

适用读者：刚开始用 VSCode 写 HTML 的同学；对 Deno 好奇但没动手的 Node 开发者。

前置知识：会装 VSCode 扩展；知道 Node.js 是什么。

1. VSCode 写 HTML 的 5 个高效快捷键

VSCode 内置 Emmet——Tab 键触发缩写 → 展开为代码片段。

快捷输入	展开为	用途
`!` + `Tab`	HTML5 完整骨架	新建 HTML 文件第一行
`html:5` + `Tab`	同上	等价于 `!`
`div*5` + `Tab`	5 个 div	批量创建同元素
`ul>li*3` + `Tab`	ul 包 3 个 li	嵌套批量
`div.classname` + `Tab`	`<div class="classname"></div>`	带 class 的元素

Why ! 工作：VSCode 把 ! 映射到 html5.json 这个 Emmet snippet 文件——触发后插入 DOCTYPE、html、head、body 全部标签。

 1
 2
 3
 4
 5
 6
 7
 8
 9
10


<!DOCTYPE html>
<html lang="en">
<head>
 <meta charset="UTF-8">
 <meta name="viewport" content="width=device-width, initial-scale=1.0">
 <title>Document</title>
</head>
<body>
</body>
</html>

1.1 常用 Emmet 缩写速记

1
2
3
4
5
6
7
8
9


元素名 → <元素名></元素名>
元素#id → <元素 id="id"></元素>
元素.class → <元素 class="class"></元素>
元素[attr=val] → <元素 attr="val"></元素>
元素{文字} → <元素>文字</元素>
元素*数量 → 重复 N 次
父>子 → 嵌套
兄+弟 → 平级
()(群组) → 分组

实际案例：

1

.container>ul.list>li.item*5>a[href="#"]{链接$}

展开：

1
2
3
4
5
6
7
8
9


<div class="container">
 <ul class="list">
 <li class="item"><a href="#">链接1</a></li>
 <li class="item"><a href="#">链接2</a></li>
 <li class="item"><a href="#">链接3</a></li>
 <li class="item"><a href="#">链接4</a></li>
 <li class="item"><a href="#">链接5</a></li>
 </ul>
</div>

2. HTML5 骨架补全原理

! 触发的是 VSCode 内置的 HTML language server + Emmet engine：

输入 !
编辑器提示候选
按 Tab 接受
Emmet 把 ! 解析为 HTML5 模板，插入到光标位置

小贴士：可以在 文件 → 首选项 → 用户代码片段 → html.json 自定义模板，比如默认加 <meta name="author">、改 lang=“zh-CN” 等。

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18


{
 "html:zh": {
 "prefix": "!zh",
 "body": [
 "<!DOCTYPE html>",
 "<html lang=\"zh-CN\">",
 "<head>",
 " <meta charset=\"UTF-8\">",
 " <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\">",
 " <title>${1:文档标题}</title>",
 "</head>",
 "<body>",
 " $0",
 "</body>",
 "</html>"
 ]
 }
}

3. VSCode 必装前端扩展

类别	扩展	用途
核心	ESLint	代码检查（与项目内 `.eslintrc` 联动）
	Prettier	自动格式化
	EditorConfig for VS Code	跨编辑器代码风格（缩进/EOL）
HTML/CSS	Live Server	一键起本地 HTTP 服务器，文件改动自动刷新
	Auto Rename Tag	改开始标签自动改结束标签
	CSS Peek	从 HTML 跳到 CSS 定义
JS/TS	JavaScript (ES6) code snippets	ES6 代码片段
	TypeScript Vue Plugin (Volar)	Vue 3 + TS 类型提示
框架	Volar（Vue） / ES7+ React/Redux/React-Native snippets	框架支持
Git	GitLens	行内 blame、commit 历史
工具	Path Intellisense	路径自动补全
	TODO Highlight	高亮 TODO / FIXME
	REST Client	像 Postman 一样在 VSCode 里发 HTTP
	vscode-icons	文件夹/文件图标美化

轻量原则：扩展装得越多，VSCode 启动越慢。禁用不需要的——右键扩展 → “Disable (Workspace)” 或 “Disable Globally”。

4. Deno 是什么

Deno = “Destroy Node”——Node.js 作者 Ryan Dahl 在 2018 JSConf EU 演讲中亲口承认 Node.js 的设计缺陷（安全性、模块系统、构建工具链），宣布要"从头再来"，于是有了 Deno。

Deno 是一个安全的 JavaScript / TypeScript 运行时，基于 V8 引擎 + Rust + Tokio 异步运行时。

1
2


Node.js = V8 + libuv + C++ (2009)
Deno = V8 + Rust + Tokio (2018, 1.0 是 2020-05)

核心目标：

默认安全：沙箱、权限系统，没有 --allow-net 就不准联网
TypeScript 原生：不用配 tsconfig，不用装 ts-node，直接 deno run app.ts
标准模块走 URL：import { serve } from "https://deno.land/std/http/server.ts"
内置工具：deno fmt 格式化、deno lint 检查、deno test 测试、deno bundle 打包
单可执行文件：能编译成单一 binary 部署

5. Deno 安装与 REPL

5.1 安装

1
2
3
4
5


# Windows PowerShell
iwr https://deno.land/x/install/install.ps1 -useb | iex

# macOS / Linux
curl -fsSL https://deno.land/x/install/install.sh | sh

输出：

1
2


Deno was installed successfully to C:\Users\<user>\.deno\bin\deno.exe
Run 'deno --help' to get started

5.2 升级

1
2


deno upgrade
deno upgrade --version 1.45.0 # 指定版本

5.3 REPL 与执行

1
2
3
4
5
6
7


$ deno
# 进入交互式 REPL（类似 node）
> console.log(30933 + 404)
31337
> const name = 'Deno'
> `Hello, ${name}!` // 模板字符串支持
'Hello, Deno!'

5.4 执行脚本

1
2


// helloworld.ts
console.log('Hello, Deno!')

1
2
3


$ deno run helloworld.ts
Compile file:///D:/workspace/project/frontend/deno/helloworld.ts
Hello, Deno!

注意：第一次跑会"Compile"——Deno 把 TS 编译成 JS 缓存到 ~/.cache/deno/。第二次直接跑，无延迟。

5.5 一行执行远程脚本

1

deno run https://deno.land/std/examples/welcome.ts

6. Deno 的 TypeScript 原生支持

1
2
3
4
5
6
7
8


// app.ts
interface User {
 name: string
 age: number
}

const u: User = { name: '张三', age: 20 }
console.log(`Hello, ${u.name}!`)

1
2


$ deno run app.ts
Hello, 张三!

Why TS 一行就跑：Deno 内部用 swc 编译器把 TS 转成 JS，再喂给 V8 引擎。整个过程用户无感知——不用 tsc 编译、也不用 ts-node。

6.1 tsconfig 不必写

Deno 内置一套默认 TS 配置。如果要改：

1
2
3
4
5
6


{
 "compilerOptions": {
 "lib": ["deno.window"],
 "strict": true
 }
}

或在 deno.json：

1
2
3
4
5
6


{
 "compilerOptions": {
 "jsx": "react-jsx",
 "jsxImportSource": "preact"
 }
}

7. Deno vs Node：6 大差异

维度	Node.js	Deno
包管理	npm / yarn / pnpm + node_modules	无（直接 `import url`）
TS 支持	需要 ts-node / tsx / esbuild	原生
安全	默认有全部权限	默认零权限，按需 `--allow-*`
模块系统	CommonJS / ESM 双轨混乱	纯 ESM
标准库	没有官方 std（只有第三方）	`deno.land/std` 官方维护
工具链	各种 npm 包	内置（fmt / lint / test / bundle / doc / info）
部署	node + npm install + PM2	`deno compile` 单文件可执行

Why Deno 适合"快速脚本 + 安全执行"：在 CI 中跑第三方代码（如用户提交的函数计算）时，Deno 的沙箱比 Node + vm2 安全得多。

8. Deno 的安全沙箱

1
2
3
4
5
6
7
8
9


# 默认拒绝所有 I/O
deno run app.ts
# error: Uncaught PermissionDenied: read access to "./data.json"

# 显式授权
deno run --allow-read=./data.json app.ts

# 细粒度授权
deno run --allow-net=api.example.com --allow-read=/tmp --allow-env=API_KEY app.ts

权限 flag	作用
`--allow-read=[path]`	读文件
`--allow-write=[path]`	写文件
`--allow-net=[host]`	网络访问
`--allow-env=[var]`	读环境变量
`--allow-run=[cmd]`	执行子进程
`--allow-all`（`-A`）	全部权限（慎用）

设计哲学：Node 的 fs.readFile() 默认就能读任何文件——一旦代码被注入就完了。Deno 默认"什么都干不了"，按需授权——最小权限原则。

9. 示例：写一个 Deno HTTP Server

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18


// server.ts
import { serve } from "https://deno.land/std@0.224.0/http/server.ts"

const handler = (req: Request): Response => {
 const url = new URL(req.url)
 if (url.pathname === "/") {
 return new Response("Hello, Deno!", {
 headers: { "content-type": "text/plain; charset=utf-8" }
 })
 }
 if (url.pathname === "/json") {
 return Response.json({ name: "Deno", version: Deno.version })
 }
 return new Response("Not Found", { status: 404 })
}

console.log("Listening on http://localhost:8000")
await serve(handler, { port: 8000 })

1
2


$ deno run --allow-net server.ts
Listening on http://localhost:8000

测试：

1
2
3
4
5


$ curl http://localhost:8000/
Hello, Deno!

$ curl http://localhost:8000/json
{"name":"Deno","version":{"deno":"1.45.0","v8":"...","typescript":"5.5.0"}}

关键点：

import 直接走 URL（https://deno.land/std/...）——没有 npm install

Deno.version 内置变量

用 Response.json() 返回 JSON

必须 --allow-net，否则起不来

9.5 Deno 编译为单文件可执行

1
2


deno compile --allow-net server.ts
# → server.exe (Windows) / server (Linux/Mac)

部署到生产环境时，直接拷这一个 binary 就行——不用装 Node、npm、Deno runtime。

小结

VSCode + Emmet：写 HTML 不超过 5 个键，效率比手敲高 10 倍
VSCode 扩展：选"必要 + 强相关"，别装几百个扩展拖慢启动
Deno：安全 + TS 原生 + 无 node_modules 的现代运行时
Deno 适用场景：CLI 工具、Serverless 函数、Edge Runtime、用户脚本执行
Deno 不适合：需要大量 npm 包的传统后端（生态仍小）

参考资料

文本编辑器与绘图工具：Vim / gVim / Emacs / draw.io 绿色版实战手册

Fri, 15 Mar 2013 00:00:00 +0800

一、为什么在 Windows 上还要"折腾"这些老古董编辑器

IDE 是现代开发的主战场，但每天还是会遇到这些场景：

在客户服务器上改个 nginx.conf、改个 hosts、临时调个 docker-compose.yml，没有 IDE；
在没有图形界面的 Server Core 上远程编辑，鼠标不可用；
写文档、画流程图、画架构图，临时需要一个不依赖云、不上传数据的工具；
调试嵌入式设备、串口工具里 vi 比 notepad 强十倍。

Vim、Emacs、gVim、draw.io 这四件套是 Windows 程序员工具箱的"压箱底"。本文把它们压缩成一份绿色版（portable）实战手册：怎么下载、怎么解压、怎么配置、怎么和系统集成。

二、Vim 与 gVim：极简而强大

2.1 下载与安装

官方仓库 vim/vim-win32-installer 提供绿色版 zip：

1
2
3
4
5


# 8.2 经典版本
gvim_8.2.4950_x64.zip

# 9.0 最新版本
gvim_9.0.0042_x64.zip

解压到任意目录，比如 D:\portable\vim90，把 bin 目录加入 PATH：

1

PATH=D:\portable\vim90

Win+R 输入 vim 即可启动，验证版本：

1

:version

2.2 gVim 鼠标右键集成（Windows 资源管理器）

把"用 gVim 打开"加到文件右键菜单：

1
2
3
4
5
6
7
8


1. 开始 → 运行 → regedit
2. 计算机\HKEY_CLASSES_ROOT\*\shell，右击 → 新建 → 项，命名：Open With gVim
3. 在 Open With gVim 右键 → 新建 → 字符串值
 数值名称：Icon
 数值数据：D:\portable\vim\vim90\gvim.exe,0
4. 在 Open With gVim 下新建项：Command
 修改默认数值数据为：
 D:\portable\vim\vim90\gvim.exe -p --remote-tab-silent "%1"

-p 表示打开多标签页
--remote-tab-silent 复用现有 gVim 实例的标签页

2.3 .vimrc 基础配置

C:\Users\<USER>\.vimrc（注意：Windows 下 vim 8/9 优先读 _vimrc 兼容 Windows 习惯）：

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15


" 字体与界面
set guifont=DejaVu\ Sans\ Mono:h18:cANSI:qDRAFT
set nu " 显示行号
set relativenumber " 相对行号
set cursorline " 高亮当前行
set wrap " 自动折行
set showmatch " 高亮匹配括号
set ignorecase " 搜索忽略大小写
set smartcase " 大写敏感时区分大小写
set hlsearch " 高亮搜索
set incsearch " 增量搜索
set tabstop=4 " Tab 宽度
set shiftwidth=4
set expandtab " Tab 转空格
set encoding=utf-8

注：<USER> 替换为你的 Windows 用户名。

2.4 必装插件管理器 vim-plug

1
2


下载 plug.vim 放到：
C:\Users\<USER>\vimfiles\autoload\plug.vim

.vimrc 加：

1
2
3
4
5
6
7


call plug#begin('~/.vim/plugged')
 Plug 'preservim/nerdtree' " 文件树
 Plug 'tpope/vim-fugitive' " Git 集成
 Plug 'yggdroot/leaderf' " 模糊搜索
 Plug 'jiangmiao/auto-pairs' " 自动括号
 Plug 'vim-airline/vim-airline' " 状态栏
call plug#end()

启动 gVim 后 :PlugInstall 安装所有插件。

2.5 必背快捷键速查

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55


# 移动光标
h j k l 左/下/上/右
0 / $ 行首/行尾
gg / G 文件首/文件尾
H M L 屏首/屏中/屏尾
w b e 按单词前进/后退/到词尾
Ctrl+f / Ctrl+b 下/上翻页
Ctrl+d / Ctrl+u 下/上翻半页
Ctrl+e / Ctrl+y 下/上滚一行
zz / zt / zb 当前行移到屏中/顶/底
% 跳到匹配括号

# 模式切换
i a o 光标前/后/下行进入插入
I A O 行首/行尾/上行进入插入
ESC 退回正常模式
v V Ctrl+v 字符/行/块可视模式

# 编辑
x / X 删当前字符/前一字符
dw / de 删一个单词
dd 删整行
d$ 删到行尾
yy 复制整行
p / P 粘到下/上行
u / Ctrl+r 撤销/重做
r 替换单字符
R 进入替换模式
cw / ce 改写单词

# 搜索
/ ? 向下/向上搜
n / N 下一个/上一个匹配
* 搜索当前单词
:%s/old/new/g 全局替换
:%s/old/new/gc 全局替换并确认

# 标签与分屏
:vs xxx 垂直分屏
:sp xxx 水平分屏
Ctrl+w w 切换窗口
gt / gT 下一个/上一个标签
:tabnew xxx 新建标签
:q / :q! 退出/强制退出
:wa 全部保存

# 外部命令
:!chdir 执行 shell
:r !dir 把命令输出读到当前文件
:w test 另存为

# 全选/全删/全复
ggvG / ggVG 全选（字符/行）
ggyG 全部复制
ggdG 全部删除

冷技巧：在两个相邻的标点（(、[、{）之间需要插入文本时，按 ESC + i 然后输入内容，Vim 临时进入 insert 模式会自动加配对符。

三、Emacs：神一样的存在

3.1 下载

GNU 官方 https://www.gnu.org/software/emacs/，下载 Windows 版的 emacs-28.x 压缩包。解压到 D:\portable\ide\emacs-28.1。

3.2 安装（注册到 Windows 资源管理器）

1
2


cd D:\portable\ide\emacs-28.1\bin
双击 addpm.exe

这一步会在注册表里写入 .txt、.emacs 关联，但对 .md / .conf / .yml 等文本文件没有影响，想关联更多扩展名得手动加。

3.3 启动

1

runemacs.exe # 推荐，单独的 GUI 进程不挂命令行

避坑：用 emacs.exe 启动会同时弹一个 cmd 窗口，关闭 cmd 时 Emacs 也跟着退。永远用 runemacs.exe。

3.4 配置文件 `.emacs`

C:\Users\<USER>\.emacs：

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24


;; 禁用启动画面
(setq inhibit-startup-screen t)

;; 显示行号
(global-linum-mode t)

;; 自动加载文件变更
(global-auto-revert-mode t)

;; y/n 代替 yes/no
(fset 'yes-or-no-p 'y-or-n-p)

;; 备份文件放临时目录
(setq backup-directory-alist
 `((".*" . ,temporary-file-directory)))
(setq auto-save-file-name-transforms
 `((".*" ,temporary-file-directory t)))

;; 配对
(electric-pair-mode 1)

;; 中文编码
(set-language-environment 'utf-8)
(setq default-buffer-file-coding-system 'utf-8-unix)

3.5 内置教程

Emacs 自带完整交互式教程：

1

C-h t # 启动 tutorial

老实说，能完整跑完 C-h t 的人后来都成了大神。

四、draw.io：离线流程图工具

4.1 简介

draw.io（jgraph/drawio-desktop）是 JGraph 团队出品的开源绘图工具，支持：

流程图、UML、ER、网络拓扑、BPMN、架构图；
离线桌面版，不强制上传到云；
导出 PNG、SVG、PDF、VSDX；
集成 Confluence、Jira、Notion、Google Drive（云端版）。

4.2 Windows 绿色版

下载 draw.io desktop 的 .exe 安装包（Windows 也有免安装版但要找较老版本）。安装到 D:\portable\ide\draw.io\。

4.3 离线模式（重要）

第一次启动时不要登录任何云账号，直接关闭登录提示：

1

File → New → Device (Default)

这样所有文件都存本地（.drawio 后缀实际是 XML），不会上传。

4.4 高频快捷键

 1
 2
 3
 4
 5
 6
 7
 8
 9
10


Ctrl + D 复制选中形状
Ctrl + Shift + D 在画布中央新建
Ctrl + G 编组
Ctrl + Shift + U 解组
Ctrl + Shift + L 切换图层
Ctrl + M 编辑样式
Ctrl + K 连接线
F2 重命名
Alt + 拖动 微调位置
滚轮 缩放

4.5 实战：用 draw.io 画 K8s 部署架构

1
2
3
4


1. 左侧形状库 → 搜索 "kubernetes" → 拖入 Pod/Service/Deployment
2. 用箭头连接 Pod 与 Service
3. 选中所有 → Format → Arrange → Vertical Stack / Horizontal Flow
4. File → Export as → PNG（@2x 给 PPT 用）

draw.io 的形状库是声明式 XML，可以自定义：在 Edit → Configure Shapes 里粘贴 GitHub 上 drawio/drawio-github 仓库里的 shape XML。

五、把这四件套放进"开机包"

5.1 目录约定

1
2
3
4
5
6
7


D:\portable\
├── ide\
│ ├── vim90\ # Vim/gVim 9.0
│ ├── emacs-28.1\ # Emacs 28
│ └── draw.io\ # 离线版
├── path\
│ └── bin\ # 软链接 / 启动脚本

5.2 软链接到 PATH

把 gVim、Emacs、draw.io 的可执行文件软链到 D:\portable\path\bin\：

1
2
3
4


# PowerShell 7+
New-Item -ItemType SymbolicLink -Path "D:\portable\path\bin\gvim.exe" -Target "D:\portable\ide\vim90\gvim.exe"
New-Item -ItemType SymbolicLink -Path "D:\portable\path\bin\runemacs.exe" -Target "D:\portable\ide\emacs-28.1\bin\runemacs.exe"
New-Item -ItemType SymbolicLink -Path "D:\portable\path\bin\drawio.exe" -Target "D:\portable\ide\draw.io\draw.io.exe"

把 D:\portable\path\bin 加入系统 PATH，一次配置全公司通用（新机器拷过去即用）。

5.3 跨机器同步

把 D:\portable\ 整个目录放进 OneDrive / 坚果云 / Git LFS，配置和插件一起同步：

1
2
3


.gitattributes
*.ttf filter=lfs diff=lfs merge=lfs -text
*.vimrc text eol=lf

.vimrc 和 .emacs 提交到 dotfiles 仓库更靠谱，软链 + 同步是 Windows 生态下最优雅的方案。

六、常见坑与对策

现象	原因	对策
gVim 中文乱码	字体不支持	装 `Source Code Pro` 或 `Sarasa Mono SC`
Vim 复制到系统剪贴板失败	未启用 `clipboard` 特性	装 `win32-clipboard` 或用 `*yy / "+p`
Emacs 中文乱码	编码设置	在 `.emacs` 加 `(set-language-environment 'utf-8)`
draw.io 启动后强制登录	云端模式	跳过登录，文件存本地
Vim `:PlugInstall` 卡死	网络不通	配 `git config --global http.proxy`

七、下一步

进阶 Vim：<leader>f 模糊找文件、<leader>gg 用 :GBrowse 跳转 GitHub；
进阶 Emacs：装 use-package、Magit、lsp-mode 把它当 IDE 用；
进阶 draw.io：在 Confluence 内嵌、导出为 Mermaid 反向编译回文本。