使用Vim掌握CSS和XHTML

Question

請指點我們如何使用Vim掌握（X）HTML，CSS。 我喜歡用手創建網頁，我決定和Vim一起去。

任何有用的插件，提示和技巧，教程，how-tos，書籍，文章？

謝謝！

Answer 1

你將“使用Vim掌握（X）HTML，CSS”，就像你使用任何其他文本編輯器或語言一樣：通過努力工作，閱讀書籍，觀看截屏視頻和跟上新聞。 您選擇的編輯器完全無關緊要。

也就是說，這里有一些本機功能和插件幫助了我很多：

• Omnicompletion是Vim自己的自動完成功能，除了它不是自動的。

  點擊ctrl p或ctrl n以完成文檔中其他位置的單詞。

  按ctrl x ctrl o顯示基於語言的可能完成列表。

  開始編輯

  另一個非常有用的功能是“文件路徑完成”，開始鍵入文件的路徑並點擊<Cx><Cf>以顯示可能完成的菜單。

  此外，上述功能可以使用插件自動化，我使用的是AutoComplPop 。

  結束編輯

• 對象允許您以瘋狂的方式移動，選擇和執行代碼操作。

  假設你有<div>word</div>把光標放在o ，D I T將刪除word ，C I T將刪除word ，並將進行進一步的編輯等標簽之間的光標...

  如果你知道什么是d ， c或v的意思是， i大概的意思是inside和a大概的意思是around那t意味着tag ，你已經有一個非常強大的工具，有。 Vim有其他對象對代碼編輯非常有用： " ， ' ， ( ， [ ， { etc，type :help objects for more。

  對我來說，僅此功能足以證明抓取TextMate是合理的。

• Blockwise Selection完成了它的說法。 :help blockwise-visual獲取更多信息。

• :normalize或:norm對於在一組行之前添加或附加內容也非常有用。

• SnipMate是一個受TextMate的片段系統啟發的插件。 您鍵入form然后單擊選項卡以展開到一個完整的樣板<form>元素，您可以通過進一步按Tab鍵來編輯值和屬性。

• Surround通過在選擇周圍添加標記對，刪除標記對或更改標記對，將對象業務提升到另一個級別。

  如果您采用上面的示例，請點擊c s t <p>以更正確的<p>word</p>更改它。 要為word添加一對標簽，請使用v選擇它，然后按S並鍵入所需的標簽。

Answer 2

Sparkup是一個非常棒的插件。 除此之外，我通常使用snipMate和delimitMate ，盡管這些對於任何語言的編碼都很有用。

Answer 3

TL;博士; 安裝此vim安裝程序https://github.com/jameslai/jvim

James Lai寫了一篇關於Frontend Vim的驚人文章，當我回答這個問題時，這篇文章是404'。 它幫助我從ST2切換到VIM，所以我在這里發布。

---

為什么我使用VIM作為前端開發的首選編輯

詹姆斯賴

我已經使用VIM多年了，我無法擺脫它。 雖然許多人喜歡使用Sublime Text 2，但我不禁鼓勵，如果您想使用可以隨着您的知識擴展的編輯器，VIM應該是您的首選編輯。

輕松編輯標簽內的內容

作為FED，我們不斷編輯標簽內的內容。 VIM通過其“標簽”文本對象使這很簡單 - t。 這是一個常見的場景，您的源代碼如下所示：

<div>Some content within here</div>

在VIM中，要替換該標記內的內容，您只需要按cit。 這將改變內部標記，你將留下這個：

<div></div>

輕松替換HTML屬性

與上面類似，我們一直處理引號內的內容，通常作為HTML中的屬性。 您可能會看到以下內容：

<aside class="one-third author box">

在這種情況下，只需點擊ci“。也許是關於這個技巧的最新部分，如果這是該行上唯一的內容，你甚至不需要你的光標靠近引號本身！VIM足夠聰明，可以簡單地清空報價的內容，無論其在該行中的位置如何，您將留下：

<aside class="">

在您編輯的位置之間跳回和第四

作為美聯儲，我們不斷跳回到我們之前編輯的地方之間的第四位。 VIM維護一個“跳轉列表”，可以通過Ctr + O（跳轉到以前的位置）和Ctr + I（轉發）輕松導航。 這使我們同時編輯許多文件的例程非常輕松。

有關跳躍的更多信息

在Mac上？ 在VIM中，您再次獲得了正確的刪除密鑰

Mac鍵盤沒有正常的“刪除”鍵 - 我們基本上有一個退格鍵，但它標記為刪除。 當然，你可以找到funcdelete，但是這個功能鍵肯定是順便提一下。 相反，點擊x！

像主人一樣移動CSS

通常我需要重構一些CSS並在選擇器之間移動屬性。 使用VIM，我可以通過簡單的方式將內容從各行移動到我的光標位置：

:<linenumber>,<linenumber>m

使用VIM可以輕松實現這些常見操作。

跳到行的結尾或開頭

這在我的工作流程中非常常見 - 需要跳到一行的末尾。 也許我在CSS屬性或Javascript行的末尾忘記了一個分號。 要跳到該行的末尾，只需點擊A，您就會在該行的末尾處於插入模式。 需要在開頭編輯（不計入標簽）？ 使用I.

以思想的速度編輯

VIM的主要概念之一是防止需要觸及鼠標。 當我在我的流程中時，除非它與我正在處理的網頁進行交互，否則我永遠不會觸及鼠標。 熟悉VIM意味着您編輯和操作文本的能力幾乎接近您能夠多快地思考問題。 由於文本對象的概念，思考“我想刪除這一行”變成了一個微不足道的dd，或用daw刪除一個單詞。 當您考慮問題時，您通常不會輕易地向編輯器描述。 在我看來，使用VIM進入流程的能力比大多數其他編輯更高。

輕松拆分窗戶

完全改變我開發方式的東西是學習如何在VIM中真正利用分割窗口。 是的，VIM已拆分窗戶，它們太棒了！ 有些編輯器具有此功能，但使用起來很麻煩，或者難以記住使用。

吐痰是強大的，因為我們經常在許多地方處理相同的項目。 如果您正在尋址元素，那么您通常會想要HTML文件。 如果你正在應用樣式，你會想要CSS，如果你正在應用行為，你也會想要Javascript。 同時看到它們在編輯中給我帶來了無數令人頭痛的問題。 流程感覺非常“自然”，更不用說你的編輯器看起來多么棒了。 通常，我任何時候都會至少有4次分裂。

一個很好的入門方式是鍵入：Vex。 這將打開一個垂直探索窗口。 從這里，您可以瀏覽到您想要的任何文件，該文件將顯示在拆分中。 還有總是色情的：性別命令，它將打開一個水平分裂的瀏覽器窗口。

垂直分割窗口

有關拆分的更多信息

有關文件資源管理器的更多信息

你的設置，任何地方

也許最引人注目的功能之一就是能夠非常快速地進行自定義設置。 我將我的VIM配置保存在GitHub倉庫中 ，這意味着無論我使用的是哪台機器，我都要完成兩個命令。

......甚至在遠程機器上

前端開發人員在某些時候將不可避免地在遠程服務器上工作。 哎呀，我們中的許多人都在VM中復制我們的服務器環境。 你需要一個編輯器，而不是因為不知道如何實際跳舞而在VIM中摸索，或者使用像nano這樣的基本和動力不足的編輯器，擅長VIM客戶端意味着你要去成為主服務器端。

最后的想法

VIM是一個了不起的編輯器，雖然你可能認為它已經過時了，但它實際上不僅僅是今天編輯的任務。 無論新編輯如何進入市場，我都可以嘗試一下，看看有哪些創新，但最后，我總是回到VIM進行編輯，我喜歡它。

Answer 4

我這樣做。 我沒有找到那么多的支持，所以我寫了一些自己的。 我將它保留在Google代碼托管上 。 我還使用嵌入了Python的Vim版本，並使用一些Python來擴展一些功能。 這是在pycopia.vimlib包中。

只有一點，但希望有用的東西。 你可以從那里開始。

Answer 5

埃米特 。 很久以前被稱為zencoding，是一個很好的插件，適用於幾個編輯器（包括vim），它們具有許多功能，使您能夠非常快速地編寫html和css代碼。

例如，您可以鍵入div.some span.other<ctrl+y> ans，您將得到：

<div class="some>
   <span class="other>
      (cursor here) 
   </span>
</div>

Answer 6

1. 安裝CSS3語法插件 。
2. 安裝HTML5語法插件 。
3. 安裝Syntastic語法檢查器插件 。
   1. 您還必須安裝CSS Lint的CLI工具 ，因為語法檢查器使用它。

---

有一些與常規開發相關的插件，你可以在這個網站上散布的幾個問題中找到，但上面的那些專門用於幫助編寫更好的CSS和HTML。

Answer 7

我使用了很多zencoding，所以，如果你使用zen-coding嘗試使用zenCoding插件為Vim 在這里找到它

如果你想了解更多關於zen-coding的信息，你可以閱讀： zen coding vim tutorial