選定好自己喜愛的開發環境後，就是來好好調整。今天就來介紹Emacs下對於網頁開發，超級有用的package。
在Emacs生態環境下，有兩個主要的package倉庫，一個是預設的ELPA。另一個是MELPA。今天不會說怎麼設定，主要試說說有哪些套件，其又有什麼功能與作用，如此可以嘗試在自己喜愛的編輯器內，尋找類似的功能。
Emmet-mode，是之前提到的emmet在Emacs裡的模式，其還可以搭配ac-emmet或是helm-emmet等關於自動補全的外掛。值得一提的是，在VSCode裡的Emmet外掛，更支援展開成Pug的語法。相關作用之前也已經提過，今天就不多說。
Pug-mode。在Emacs下，編輯主要是看在什麼模式下，又分成主要模式與輔助模式(不過Emacser有另外的說法，但這麼說應該比較好懂)。Pug-mode是Emacs下的一個主要模式，雖然經驗上馬馬虎虎，但是如果在編寫Pug，這還是值得安裝的模式。(相對來說VSCode好像自己會辨識Pug文件)
multiple-cursors算得上是殺手級的外掛工具，看看Emacs Rocks!就知道有多酷！許多現代編輯器也支援類似功能，Notepad++、Sublime Text、Atom和VSCode都有，不過我個人感覺沒到Emacs裡那麼好用。(絕大部分用滑鼠增加新的cursor，好像很少看到2:22示範的功能)。
一個對於網頁的Live Mode。所有在編輯器編輯的動作，都會即時更新到網頁上。在Cloud 9編輯也有類似功能，Parcel的server mode也會即時反應到瀏覽器顯示，只是Parcel的會需要先儲存，而Emacs裡的impation mode監視的是編輯中的buffer，無需儲存也會即時反應。
impation mode會需要配合simple-httpd發揮效果比較大(實際impation mode依賴simple-httpd，所以在開起impation mode後，最好也調整一下simple-httpd的讀取位置)。
不過Parcel的server mode或是Webpack的DevWebServer我認爲也很足夠用了。
sgml-mode應該是emacs直接內建的模式之一了。實際上HTML也是SGML的一個衍生，使用sgml-mode也就沒什麼奇怪，像是補全結尾標籤(只帶有斜線的標籤，像是</closed-tag>)，比如在<body>內使用相關命令，就會自動補足</body>。
其他還有highlight-blocks、highlight-indentation等等值得一試的工具。其中我覺得最重要的還是高亮上色、自動排版、自動補全和Server mode了，不妨在自己喜愛的編輯器裡找找看看。不過其實很多針對網頁的編輯器早就都開箱即用了，像是在Atom裡，按下Ctrl-Shift-M就會開起一個preview的標籤頁，甚至支援Markdown的語法。
iThome鐵人賽
看影片追技術