VSCode中，有許多與HTML相關(guān)的插件可以大大提高開發(fā)效率和便利性。以下是一些值得推薦的插件，它們各自具有獨(dú)特的功能和優(yōu)點(diǎn)，可以幫助您更好地編寫、調(diào)試和預(yù)覽HTML代碼。

1. HTML Snippets: 這個(gè)插件提供了許多HTML代碼片段，可以幫助您快速編寫常見的HTML結(jié)構(gòu)和元素。只需輸入簡短的縮寫，即可自動(dòng)生成相應(yīng)的HTML代碼，大大提高了編寫速度。

2. Emmet: Emmet是一個(gè)強(qiáng)大的代碼生成器，支持多種編程語言，包括HTML。通過簡單的縮寫和語法，您可以快速生成復(fù)雜的HTML結(jié)構(gòu)和嵌套元素。Emmet還提供了許多自定義選項(xiàng)，可以根據(jù)您的需求進(jìn)行靈活配置。

3. HTML Boilerplate: 這個(gè)插件提供了一個(gè)HTML模板，包含了常見的HTML結(jié)構(gòu)和元素，如文檔類型聲明、字符編碼、頭部信息等。使用這個(gè)插件，您可以快速創(chuàng)建一個(gè)基本的HTML框架，然后在此基礎(chǔ)上進(jìn)行進(jìn)一步的開發(fā)。

4. HTML Preview: HTML Preview插件可以在VSCode中實(shí)時(shí)預(yù)覽HTML代碼的效果。您只需在編輯器中打開HTML文件，然后點(diǎn)擊預(yù)覽按鈕，即可在側(cè)邊欄中查看HTML頁面的渲染效果。這對于調(diào)試和預(yù)覽HTML代碼非常方便。

5. Color Highlight: Color Highlight插件可以自動(dòng)識(shí)別HTML代碼中的顏色值，并在編輯器中高亮顯示。這使得您更容易發(fā)現(xiàn)和修改顏色值，提高了代碼的可讀性和可維護(hù)性。

6. HTML Boilerplate Generator: 這個(gè)插件可以幫助您快速生成HTML5的Boilerplate代碼，包括常用的meta標(biāo)簽、字符編碼、視口設(shè)置等。它還提供了一些自定義選項(xiàng)，可以根據(jù)您的需求生成符合規(guī)范的HTML代碼。

7. HTML CSS Support: 這個(gè)插件提供了對HTML和CSS的完整支持，包括語法高亮、代碼片段、代碼折疊等功能。它還支持自動(dòng)完成和錯(cuò)誤檢查，可以幫助您更高效地編寫HTML和CSS代碼。

8. HTML/CSS/JS Prettify: 這個(gè)插件可以對HTML、CSS和JavaScript代碼進(jìn)行格式化，使其更加整潔和易讀。您可以自定義格式化規(guī)則，也可以使用默認(rèn)的規(guī)則進(jìn)行快速格式化。這對于保持代碼風(fēng)格一致和提高代碼可讀性非常有幫助。

9. HTML Validator: HTML Validator插件可以對HTML代碼進(jìn)行驗(yàn)證，檢查其是否符合W3C規(guī)范。它可以檢測出潛在的錯(cuò)誤和不符合規(guī)范的地方，并給出相應(yīng)的提示和建議。這對于編寫符合標(biāo)準(zhǔn)的HTML代碼非常有幫助。

10. Live Server: Live Server插件可以在本地啟動(dòng)一個(gè)實(shí)時(shí)服務(wù)器，讓您在瀏覽器中實(shí)時(shí)預(yù)覽HTML、CSS和JavaScript代碼的效果。它支持自動(dòng)刷新和熱更新，可以實(shí)時(shí)反映代碼的變化。這對于前端開發(fā)和調(diào)試非常方便。

以上是一些值得推薦的VSCode中與HTML相關(guān)的插件。它們各自具有獨(dú)特的功能和優(yōu)點(diǎn)，可以幫助您提高開發(fā)效率和便利性。當(dāng)然，具體選擇哪些插件還需要根據(jù)您的實(shí)際需求和喜好來決定。希望這些推薦能對您有所幫助！

?

/小鉗

本文涉及到的應(yīng)用（無利益相關(guān)）

1. 簡悅 :: 一個(gè)有著無限可能的chrome輔助閱讀插件，然而它的功能早就遠(yuǎn)遠(yuǎn)超出了傳統(tǒng)意義上的閱讀模式
2. Obsidian :: 最好用的筆記app（我要我覺得），基于本地markdown，治好了我多年的印象筆記還能茍強(qiáng)迫癥，我不僅拿它寫專欄文章，同時(shí)正在用它寫大小論文
3. Syncthing :: 開源多端同步工具，我不僅用它來在PC和移動(dòng)設(shè)備之間同步文章，代碼，還用來在不同工作站之間同步計(jì)算過程文件，局域網(wǎng)同步性能堪稱逆天
4. Cryptomator :: 開源加密工具，極速解密&如同windows原生文件操作的絲滑體驗(yàn)
5. Logseq :: 以大綱筆記為特點(diǎn)的筆記app，基于本地markdown功能強(qiáng)大且處于積極開發(fā)中，對大綱筆記愛好者來說，簡直比Obsidian還出色
6. AnyTXT :: 可以用來搜索整個(gè)硬盤上所有的包含有文字的文檔，偶爾搜一下，可能會(huì)發(fā)現(xiàn)一些你未曾想到過的文檔之間的關(guān)聯(lián)

眾所周知，這是一個(gè)信息泛濫以至于過剩的時(shí)代。每天在被鋪天蓋地的信息洪流淹沒的時(shí)候，相信諸位都會(huì)對自己并不那么可靠的大腦感到或多或少有些不滿[1]。我們需要做的不是鍛煉自己的大腦肌肉來使得自己的大腦更強(qiáng)韌，我們更需要的是一套可靠的外部工作流，來分擔(dān)我們大腦的工作，從而使自己的大腦能夠聚焦到思考人生這件重要的事情上來處理那些真正需要發(fā)揮創(chuàng)造性思維的事項(xiàng)上去。

所以，如果你也對互聯(lián)網(wǎng)信息資料有收集/加工處理和輸出有需求的話，那么本文所介紹的工作流或許對你會(huì)有所幫助。

▲ 基于Logseq 的大綱筆記是整理思路的最佳選擇

1st - 前處理 >> 簡悅

我以前一直都在用印象筆記剪藏網(wǎng)頁，這也是我一直認(rèn)為自己無法放棄印象筆記的唯一原因，直到簡悅優(yōu)雅的導(dǎo)出功能出現(xiàn)在我眼前... ....

Chrome 瀏覽器本身無疑是非常出色的一款瀏覽器, 但是其的閱讀體驗(yàn)卻一直都很糟糕, 雖然閱讀模式 并不能說是瀏覽器的必備功能, 但是如果你體驗(yàn)過Safari 或者Firefox 的閱讀模式之后, 再回頭來在Chrome 上閱讀信息, 應(yīng)該會(huì)有那么一點(diǎn)糟心的感覺.

當(dāng)然, 如果你用過基于Chromium 內(nèi)核的Edge 瀏覽器的閱讀模式的話, 想必你一定會(huì)對原生Chrome 的閱讀模式感到痛苦的, 畢竟Edge 的閱讀模式實(shí)在是太出色了(可惜功能完全沒法和簡悅比)... ...

無論如何, 我就這么踏上了尋找一種好用的閱讀模式的插件之旅, 期間接觸過很多閱讀模式的方法, 零零散散的插件也用過很多, 抱歉的是對于那些插件我現(xiàn)在幾乎都記不得名字了, 也許他們也有其特點(diǎn), 但是對我而言, 還不夠好用!

有相當(dāng)長一段時(shí)間, 我甚至與依賴印象筆記 的剪藏插件附帶的功能來進(jìn)行部分網(wǎng)頁的閱讀, 雖然那個(gè)排版的美感讓人難以恭維, 但是好歹在頁面清爽度和可讀性上達(dá)到了及格效果, 網(wǎng)站適配度也還可以, 閱讀完了, 如果覺得有用(大概就是可以在此基礎(chǔ)上進(jìn)行信息的萃取和二次創(chuàng)作這樣子), 那么順手還可以剪藏到印象筆記中, 作為當(dāng)時(shí)的過渡方案, 總的來說, 對于提高我當(dāng)時(shí)的工作效率和生產(chǎn)力還是有所裨益的.

后來, 簡悅 悄悄出現(xiàn)了.

第一次用簡悅的時(shí)候, 我就被他整潔的排版, 精心打磨的深色模式和絕大部分網(wǎng)站的完美適配所吸引, 所以即便是在它的后臺(tái)有這一大堆看著就讓人胸悶心慌眼花繚亂的設(shè)置選項(xiàng), 我還是毫不猶豫地奔向了這個(gè)插件的懷抱, 到后來簡約升級(jí)2.0 付費(fèi)版, 我也是毫不猶豫付了錢(當(dāng)然價(jià)格真的是低到我都不敢相信—而且還是滿斷制, 在各種性價(jià)比不符的訂閱制應(yīng)用中真的是一股清流—應(yīng)該是立刻購買的重要原因吧).

▲ 在簡悅閱讀模式下閱讀我的專欄文章

簡悅到底好在哪里?

• 極其全面的網(wǎng)站適配, 可以說, 只要一個(gè)網(wǎng)頁看起來像是值得閱讀的, 那么簡悅都是適配的, 退一萬步說, 即便網(wǎng)頁源真的沒有適配, 開發(fā)者也給出了手動(dòng)適配的保姆級(jí)教學(xué)

• 精心打磨且高度可定制的閱讀模式界面, 無論是字距/行距/版面寬度, 還是淺色/深色 都是可以定制的, 如果你懂css, 我覺得可定制度應(yīng)該可以更大(雖然我不懂), 不過, 在作者提供的詳細(xì)教學(xué)引導(dǎo)下, 我還是通過開放的google fonts 給我的閱讀模式設(shè)置了專屬字體.

• 野心勃勃的插件系統(tǒng)給簡悅提供了無數(shù)可能, 讓其完全超越閱讀模式而成為了一種真正的知識(shí)管理工具, 下面我要講的基于簡悅的網(wǎng)絡(luò)信息資料搜集就有賴于這個(gè)插件系統(tǒng)

網(wǎng)絡(luò)上有大量的信息資源, 其中不乏學(xué)術(shù)資料, 我下面的例子就是關(guān)于學(xué)術(shù)資料搜集的.

首先當(dāng)然是泛讀 , 當(dāng)我對某一個(gè)主題感興趣的時(shí)候, 我會(huì)到互聯(lián)網(wǎng)上進(jìn)行大量的檢索, 其結(jié)果會(huì)包括各種各樣的鏈接: 博客文章/新聞資訊/學(xué)術(shù)論文(html版)等等, 在泛讀這一步, 簡悅完美做好了自己的本職工作 -> 清爽的閱讀模式給我?guī)淼牧己瞄喿x體驗(yàn), 無論是從心理層面還是實(shí)際操作層面, 都提升了我的閱讀效率.

▲ 原網(wǎng)頁(左)/簡悅處理之后(右)

對于基礎(chǔ)的網(wǎng)頁閱讀, 簡悅的插件系統(tǒng)提供了字?jǐn)?shù)統(tǒng)計(jì) / 英文輔助閱讀增強(qiáng) / 代碼段增強(qiáng) / 劃詞翻譯 等出色的功能, 一切都與簡悅的閱讀模式原生結(jié)合, 有著絲滑的體驗(yàn), 對于泛讀而言, 這些功能已經(jīng)足夠了.

到了精讀的層次, 簡悅的Live Editor 插件就要派上用場了, 顧名思義, 該插件能夠在簡悅閱讀模式下的網(wǎng)頁上直接進(jìn)行編輯, 所見即所得. 用Live Editor , 你可以對頁面任何的文本內(nèi)容進(jìn)行修改, 就好像在文字處理工具中改文章一樣方便

▲ 用Live Editor 處理前后對比

我始終覺得, 對于一篇需要精讀的文章, 圈圈改改是很有價(jià)值的, 這也就是我推崇Live Editor 的原因---不需要離開瀏覽器就可以實(shí)現(xiàn)直接圈圈改改, 非常適合信息獲取的初級(jí)階段. 最重要的是, 所有的圈圈改改, 都可以方便地通過簡悅強(qiáng)大的導(dǎo)出功能, 以豐富的格式導(dǎo)出到本地, 以后進(jìn)一步的進(jìn)行信息整理/萃取和再利用.

對于我而言, 這一步是導(dǎo)出為Markdown , 在這之后, 重量級(jí)筆記應(yīng)用Obsidian 將閃亮登場.

※ 除了Live Editor 之后, 簡悅有著更為強(qiáng)大的標(biāo)注系統(tǒng)和與之深度集成的稍后讀 系統(tǒng), 該系統(tǒng)配合本地版本的簡悅同步助手(Win+Mac), 可以實(shí)現(xiàn)很多自動(dòng)化的信息獲取和管理功能, 在簡悅的GitHub主頁上, 開發(fā)者提供了相當(dāng)詳細(xì)且完善的教學(xué). 不過如果你和我一樣主力機(jī)器是Linux 那就別折騰這些啦, 老老實(shí)實(shí)用Live Editor 吧.

※ 除了導(dǎo)出Markdown 之外, 簡悅還能導(dǎo)出各種各樣的格式, 除了導(dǎo)出到本地, 還能導(dǎo)出到各種各樣的云文檔云服務(wù), 具體你可以去選項(xiàng)頁瞅瞅, 我用不到就不多說了.

2nd - 求解器 >> Obsidian

如果你品嘗過印象筆記編輯的卡頓，Word的臃腫或者代碼的繁瑣，又不想自己的數(shù)據(jù)完全被基于云端的Notion、語雀或者飛書文檔之類所“挾持”，那么基于本地markdown的Obsidian應(yīng)該是你的白月光... ...

雖然我很想用更大的篇幅來吹一波Obsidian , 但是很抱歉, 這篇文章是吹簡悅的, 所以從現(xiàn)在開始我要長話短說了!

雖然通過簡悅同步助手和稍后讀, 簡悅可以和Obsidian有著更為緊密且絲滑的集成(包括自動(dòng)化的雙鏈等, 具體參見簡悅Github主頁的教程), 但我目前還不需要那些我用不到的功能, 就不多說了. 我的這套工作流, 邏輯很簡單很清晰, 按照以下步驟走:

7. 建立一個(gè)本地的Inbox文件夾;
8. Chrome設(shè)置自動(dòng)保存文件, 默認(rèn)保存位置就是Inbox;
9. 認(rèn)為需要通過簡悅精讀的文章, 就會(huì)用Live Editor 圈圈改改并打上標(biāo)簽, 隨后點(diǎn)擊簡悅的導(dǎo)出 -> Markdown, 于是一篇完整的markdown資料就進(jìn)入到了我的Inbox庫中;
10. 在完成初步的信息搜集之后(查完了一圈信息, 泛讀了不少文章, 精讀導(dǎo)出了一些到Inbox中), 回到Obsidian, 通過標(biāo)簽查找等手段來查閱那些需要精讀的文章, 對其進(jìn)行進(jìn)一步加工處理;
11. (有必要的話) 通過Obsidian出色的導(dǎo)出功能, 導(dǎo)出為排版精美的PDF文件以便進(jìn)行分享;
12. 通過Syncthing 這個(gè)開源同步神器, 實(shí)現(xiàn)多端之間的高效同步, 而Obsidian在移動(dòng)端和PC端幾乎毫無差別的筆記編輯體驗(yàn)確保了多端同步之后的工作效率;
13. (有必要的話) 通過Cryptomator 這個(gè)開源文件加密應(yīng)用, 進(jìn)一步保護(hù)你的筆記安全.

▲ 這是通過Live Editor 圈圈改改編輯過的頁面

▲ 簡單三步走, 將一篇需要精讀的資料導(dǎo)入到了Obsidan的庫中

▲通過簡悅導(dǎo)出到Obsidian庫中的markdown文件，可通過Obsidian內(nèi)置導(dǎo)出模塊生成優(yōu)雅的pdf文件

3rd - 后處理 >> AnyTXT

好吧，我承認(rèn)這個(gè)所謂的后處理這一章節(jié)是我硬湊出來的，畢竟前處理和求解器都有了，雖然大部分后處理工作實(shí)際上仍然應(yīng)該是Obsidian的活兒，但是AnyTXT仍然有其妙處... ...

AnyTXT 幾乎能夠所檢索你硬盤內(nèi)存儲(chǔ)的所有文本類內(nèi)容, 使用的學(xué)習(xí)成本為0, 所以操作方面就不多說了. 值得一提的是, 當(dāng)你的本地筆記積累到一定數(shù)量的時(shí)候, 你用AnyTXT進(jìn)行本地關(guān)鍵詞檢索之時(shí), 時(shí)不時(shí)還會(huì)發(fā)現(xiàn)知識(shí)點(diǎn)之間的奇妙聯(lián)系, 比如說對于我來說, 我在檢索vortex methods的時(shí)候, 就發(fā)現(xiàn)了一段以前為飛機(jī)渦格法編寫的代碼(早已被大腦遺忘), 盡管此次我搜索渦方法目的是為了編寫直升機(jī)渦尾跡流場計(jì)算代碼, 但是那一段飛機(jī)渦格代碼卻給我?guī)砹瞬簧俚膮⒖己挽`感, 這大概也算是某種小驚喜了吧.

1. 我用過十幾種筆記App，最后只推薦這個(gè)新來的：flomo/浮墨筆記食用點(diǎn)評(píng)

者：lzg9527

轉(zhuǎn)發(fā)鏈接：https://segmentfault.com/a/1190000022956602