VSCode中，有许多与HTML相关的插件可以大大提高开发效率和便利性。以下是一些值得推荐的插件，它们各自具有独特的功能和优点，可以帮助您更好地编写、调试和预览HTML代码。

1. HTML Snippets: 这个插件提供了许多HTML代码片段，可以帮助您快速编写常见的HTML结构和元素。只需输入简短的缩写，即可自动生成相应的HTML代码，大大提高了编写速度。

2. Emmet: Emmet是一个强大的代码生成器，支持多种编程语言，包括HTML。通过简单的缩写和语法，您可以快速生成复杂的HTML结构和嵌套元素。Emmet还提供了许多自定义选项，可以根据您的需求进行灵活配置。

3. HTML Boilerplate: 这个插件提供了一个HTML模板，包含了常见的HTML结构和元素，如文档类型声明、字符编码、头部信息等。使用这个插件，您可以快速创建一个基本的HTML框架，然后在此基础上进行进一步的开发。

4. HTML Preview: HTML Preview插件可以在VSCode中实时预览HTML代码的效果。您只需在编辑器中打开HTML文件，然后点击预览按钮，即可在侧边栏中查看HTML页面的渲染效果。这对于调试和预览HTML代码非常方便。

5. Color Highlight: Color Highlight插件可以自动识别HTML代码中的颜色值，并在编辑器中高亮显示。这使得您更容易发现和修改颜色值，提高了代码的可读性和可维护性。

6. HTML Boilerplate Generator: 这个插件可以帮助您快速生成HTML5的Boilerplate代码，包括常用的meta标签、字符编码、视口设置等。它还提供了一些自定义选项，可以根据您的需求生成符合规范的HTML代码。

7. HTML CSS Support: 这个插件提供了对HTML和CSS的完整支持，包括语法高亮、代码片段、代码折叠等功能。它还支持自动完成和错误检查，可以帮助您更高效地编写HTML和CSS代码。

8. HTML/CSS/JS Prettify: 这个插件可以对HTML、CSS和JavaScript代码进行格式化，使其更加整洁和易读。您可以自定义格式化规则，也可以使用默认的规则进行快速格式化。这对于保持代码风格一致和提高代码可读性非常有帮助。

9. HTML Validator: HTML Validator插件可以对HTML代码进行验证，检查其是否符合W3C规范。它可以检测出潜在的错误和不符合规范的地方，并给出相应的提示和建议。这对于编写符合标准的HTML代码非常有帮助。

10. Live Server: Live Server插件可以在本地启动一个实时服务器，让您在浏览器中实时预览HTML、CSS和JavaScript代码的效果。它支持自动刷新和热更新，可以实时反映代码的变化。这对于前端开发和调试非常方便。

以上是一些值得推荐的VSCode中与HTML相关的插件。它们各自具有独特的功能和优点，可以帮助您提高开发效率和便利性。当然，具体选择哪些插件还需要根据您的实际需求和喜好来决定。希望这些推荐能对您有所帮助！

?

/小钳

本文涉及到的应用（无利益相关）

1. 简悦 :: 一个有着无限可能的chrome辅助阅读插件，然而它的功能早就远远超出了传统意义上的阅读模式
2. Obsidian :: 最好用的笔记app（我要我觉得），基于本地markdown，治好了我多年的印象笔记还能苟强迫症，我不仅拿它写专栏文章，同时正在用它写大小论文
3. Syncthing :: 开源多端同步工具，我不仅用它来在PC和移动设备之间同步文章，代码，还用来在不同工作站之间同步计算过程文件，局域网同步性能堪称逆天
4. Cryptomator :: 开源加密工具，极速解密&如同windows原生文件操作的丝滑体验
5. Logseq :: 以大纲笔记为特点的笔记app，基于本地markdown功能强大且处于积极开发中，对大纲笔记爱好者来说，简直比Obsidian还出色
6. AnyTXT :: 可以用来搜索整个硬盘上所有的包含有文字的文档，偶尔搜一下，可能会发现一些你未曾想到过的文档之间的关联

众所周知，这是一个信息泛滥以至于过剩的时代。每天在被铺天盖地的信息洪流淹没的时候，相信诸位都会对自己并不那么可靠的大脑感到或多或少有些不满[1]。我们需要做的不是锻炼自己的大脑肌肉来使得自己的大脑更强韧，我们更需要的是一套可靠的外部工作流，来分担我们大脑的工作，从而使自己的大脑能够聚焦到思考人生这件重要的事情上来处理那些真正需要发挥创造性思维的事项上去。

所以，如果你也对互联网信息资料有收集/加工处理和输出有需求的话，那么本文所介绍的工作流或许对你会有所帮助。

▲ 基于Logseq 的大纲笔记是整理思路的最佳选择

1st - 前处理 >> 简悦

我以前一直都在用印象笔记剪藏网页，这也是我一直认为自己无法放弃印象笔记的唯一原因，直到简悦优雅的导出功能出现在我眼前... ....

Chrome 浏览器本身无疑是非常出色的一款浏览器, 但是其的阅读体验却一直都很糟糕, 虽然阅读模式 并不能说是浏览器的必备功能, 但是如果你体验过Safari 或者Firefox 的阅读模式之后, 再回头来在Chrome 上阅读信息, 应该会有那么一点糟心的感觉.

当然, 如果你用过基于Chromium 内核的Edge 浏览器的阅读模式的话, 想必你一定会对原生Chrome 的阅读模式感到痛苦的, 毕竟Edge 的阅读模式实在是太出色了(可惜功能完全没法和简悦比)... ...

无论如何, 我就这么踏上了寻找一种好用的阅读模式的插件之旅, 期间接触过很多阅读模式的方法, 零零散散的插件也用过很多, 抱歉的是对于那些插件我现在几乎都记不得名字了, 也许他们也有其特点, 但是对我而言, 还不够好用!

有相当长一段时间, 我甚至与依赖印象笔记 的剪藏插件附带的功能来进行部分网页的阅读, 虽然那个排版的美感让人难以恭维, 但是好歹在页面清爽度和可读性上达到了及格效果, 网站适配度也还可以, 阅读完了, 如果觉得有用(大概就是可以在此基础上进行信息的萃取和二次创作这样子), 那么顺手还可以剪藏到印象笔记中, 作为当时的过渡方案, 总的来说, 对于提高我当时的工作效率和生产力还是有所裨益的.

后来, 简悦 悄悄出现了.

第一次用简悦的时候, 我就被他整洁的排版, 精心打磨的深色模式和绝大部分网站的完美适配所吸引, 所以即便是在它的后台有这一大堆看着就让人胸闷心慌眼花缭乱的设置选项, 我还是毫不犹豫地奔向了这个插件的怀抱, 到后来简约升级2.0 付费版, 我也是毫不犹豫付了钱(当然价格真的是低到我都不敢相信—而且还是满断制, 在各种性价比不符的订阅制应用中真的是一股清流—应该是立刻购买的重要原因吧).

▲ 在简悦阅读模式下阅读我的专栏文章

简悦到底好在哪里?

• 极其全面的网站适配, 可以说, 只要一个网页看起来像是值得阅读的, 那么简悦都是适配的, 退一万步说, 即便网页源真的没有适配, 开发者也给出了手动适配的保姆级教学

• 精心打磨且高度可定制的阅读模式界面, 无论是字距/行距/版面宽度, 还是浅色/深色 都是可以定制的, 如果你懂css, 我觉得可定制度应该可以更大(虽然我不懂), 不过, 在作者提供的详细教学引导下, 我还是通过开放的google fonts 给我的阅读模式设置了专属字体.

• 野心勃勃的插件系统给简悦提供了无数可能, 让其完全超越阅读模式而成为了一种真正的知识管理工具, 下面我要讲的基于简悦的网络信息资料搜集就有赖于这个插件系统

网络上有大量的信息资源, 其中不乏学术资料, 我下面的例子就是关于学术资料搜集的.

首先当然是泛读 , 当我对某一个主题感兴趣的时候, 我会到互联网上进行大量的检索, 其结果会包括各种各样的链接: 博客文章/新闻资讯/学术论文(html版)等等, 在泛读这一步, 简悦完美做好了自己的本职工作 -> 清爽的阅读模式给我带来的良好阅读体验, 无论是从心理层面还是实际操作层面, 都提升了我的阅读效率.

▲ 原网页(左)/简悦处理之后(右)

对于基础的网页阅读, 简悦的插件系统提供了字数统计 / 英文辅助阅读增强 / 代码段增强 / 划词翻译 等出色的功能, 一切都与简悦的阅读模式原生结合, 有着丝滑的体验, 对于泛读而言, 这些功能已经足够了.

到了精读的层次, 简悦的Live Editor 插件就要派上用场了, 顾名思义, 该插件能够在简悦阅读模式下的网页上直接进行编辑, 所见即所得. 用Live Editor , 你可以对页面任何的文本内容进行修改, 就好像在文字处理工具中改文章一样方便

▲ 用Live Editor 处理前后对比

我始终觉得, 对于一篇需要精读的文章, 圈圈改改是很有价值的, 这也就是我推崇Live Editor 的原因---不需要离开浏览器就可以实现直接圈圈改改, 非常适合信息获取的初级阶段. 最重要的是, 所有的圈圈改改, 都可以方便地通过简悦强大的导出功能, 以丰富的格式导出到本地, 以后进一步的进行信息整理/萃取和再利用.

对于我而言, 这一步是导出为Markdown , 在这之后, 重量级笔记应用Obsidian 将闪亮登场.

※ 除了Live Editor 之后, 简悦有着更为强大的标注系统和与之深度集成的稍后读 系统, 该系统配合本地版本的简悦同步助手(Win+Mac), 可以实现很多自动化的信息获取和管理功能, 在简悦的GitHub主页上, 开发者提供了相当详细且完善的教学. 不过如果你和我一样主力机器是Linux 那就别折腾这些啦, 老老实实用Live Editor 吧.

※ 除了导出Markdown 之外, 简悦还能导出各种各样的格式, 除了导出到本地, 还能导出到各种各样的云文档云服务, 具体你可以去选项页瞅瞅, 我用不到就不多说了.

2nd - 求解器 >> Obsidian

如果你品尝过印象笔记编辑的卡顿，Word的臃肿或者代码的繁琐，又不想自己的数据完全被基于云端的Notion、语雀或者飞书文档之类所“挟持”，那么基于本地markdown的Obsidian应该是你的白月光... ...

虽然我很想用更大的篇幅来吹一波Obsidian , 但是很抱歉, 这篇文章是吹简悦的, 所以从现在开始我要长话短说了!

虽然通过简悦同步助手和稍后读, 简悦可以和Obsidian有着更为紧密且丝滑的集成(包括自动化的双链等, 具体参见简悦Github主页的教程), 但我目前还不需要那些我用不到的功能, 就不多说了. 我的这套工作流, 逻辑很简单很清晰, 按照以下步骤走:

7. 建立一个本地的Inbox文件夹;
8. Chrome设置自动保存文件, 默认保存位置就是Inbox;
9. 认为需要通过简悦精读的文章, 就会用Live Editor 圈圈改改并打上标签, 随后点击简悦的导出 -> Markdown, 于是一篇完整的markdown资料就进入到了我的Inbox库中;
10. 在完成初步的信息搜集之后(查完了一圈信息, 泛读了不少文章, 精读导出了一些到Inbox中), 回到Obsidian, 通过标签查找等手段来查阅那些需要精读的文章, 对其进行进一步加工处理;
11. (有必要的话) 通过Obsidian出色的导出功能, 导出为排版精美的PDF文件以便进行分享;
12. 通过Syncthing 这个开源同步神器, 实现多端之间的高效同步, 而Obsidian在移动端和PC端几乎毫无差别的笔记编辑体验确保了多端同步之后的工作效率;
13. (有必要的话) 通过Cryptomator 这个开源文件加密应用, 进一步保护你的笔记安全.

▲ 这是通过Live Editor 圈圈改改编辑过的页面

▲ 简单三步走, 将一篇需要精读的资料导入到了Obsidan的库中

▲通过简悦导出到Obsidian库中的markdown文件，可通过Obsidian内置导出模块生成优雅的pdf文件

3rd - 后处理 >> AnyTXT

好吧，我承认这个所谓的后处理这一章节是我硬凑出来的，毕竟前处理和求解器都有了，虽然大部分后处理工作实际上仍然应该是Obsidian的活儿，但是AnyTXT仍然有其妙处... ...

AnyTXT 几乎能够所检索你硬盘内存储的所有文本类内容, 使用的学习成本为0, 所以操作方面就不多说了. 值得一提的是, 当你的本地笔记积累到一定数量的时候, 你用AnyTXT进行本地关键词检索之时, 时不时还会发现知识点之间的奇妙联系, 比如说对于我来说, 我在检索vortex methods的时候, 就发现了一段以前为飞机涡格法编写的代码(早已被大脑遗忘), 尽管此次我搜索涡方法目的是为了编写直升机涡尾迹流场计算代码, 但是那一段飞机涡格代码却给我带来了不少的参考和灵感, 这大概也算是某种小惊喜了吧.

1. 我用过十几种笔记App，最后只推荐这个新来的：flomo/浮墨笔记食用点评

者：lzg9527

转发链接：https://segmentfault.com/a/1190000022956602