誰說 Vim 不好用？

者 | 良許

責(zé)編 | 郭芮

相信大家在使用各種各樣強大的 IDE 寫代碼時都會注意到，代碼中各種類型的關(guān)鍵字會用獨特的顏色標(biāo)記出來，然后形成一套語法高亮規(guī)則。這樣不僅美觀，而且方便代碼的閱讀。

而在上古神器 Vim 中，我們通常看到的是黑底白字，沒有任何其它顏色。難道我們的 Vim 就這么枯燥乏味嗎？當(dāng)然不是，Vim 隱藏了非常多非常實用的功能與技巧，不是老司機根本就不知道。下面來詳細(xì)介紹。

在開始之前，我們要先檢查一下系統(tǒng)中是否安裝了 Vim 編輯器。一般來說 Ubuntu 系統(tǒng)是默認(rèn)自帶的，沒有的小伙伴請先自行安裝。

$ sudo apt-get install vim

然后我們運行以下命令來查看安裝好的 Vim 編輯器的版本。

$ vim -version

接下來，我們就可以為 Vim 編輯器添加配色方案。為了能看出效果，我們準(zhǔn)備了一個名為 login.sh 的 bash 文件，它的內(nèi)容如下：

login.sh

!/bin/bash

echo "Type your username"
read username
echo "Type your password"
read password

if [[ ( $username=="admin" && $password=="secret" ) ]]; then
echo "Authorized user"
else
echo "Unauthorized user"
fi

!/bin/bash

$ vim login.sh

運行以下命令使用 Vim 編輯器打開該文件：

$ vim login.sh

啟用/禁用語法高亮顯示

有些發(fā)行版的 Vim 編輯器已經(jīng)幫你默認(rèn)啟用語法高亮，而有些發(fā)行版卻沒有。如果沒有默認(rèn)打開語法高亮，那么我們就需要自行打開。

打開的方法其實也很簡單。在 Vim 編輯器中打開 login.sh 文件后，按 ESC 鍵并鍵入 :syntax on ，語法高亮顯示就打開了，非常方便。

同樣，關(guān)閉語法高亮也很簡單，只需按 ESC 鍵并鍵入 :syntax off即可。

永久啟用或禁用語法高亮顯示

剛剛那種打開語法高亮的方法只是暫時性的，一旦當(dāng)前文件關(guān)閉，下次打開文件就需要重新打開語法高亮。

如果想要永久啟用或禁用語法高亮顯示，就需要修改 .vimrc 文件。首先，我們使用 Vim 打開 .vimrc 文件。

$ sudo vim ~ / .vimrc

然后，在打開的文件中添加一句 syntax on 命令，代表永久啟用語法高亮顯示。最后再輸入 :wq 保存并關(guān)閉文件。

如果想要永久禁用語法高亮，則添加 syntax off 命令即可。

改變配色方案

在默認(rèn)情況下，打開語法高亮后 Vim 為你應(yīng)用了一套默認(rèn)的配色方案，而實際上 Vim 還有很多套配色方案可供我們使用，我們可以自行去修改。

安裝 Vim 后，顏色方案文件位于 /usr/share/vim/vim*/colors/中。我們可以運行以下命令來查看 Vim 配色方案文件的列表。

$ ls -l /usr/share/vim/vim*/colors/

可以看出 Vim 為我們提供了非常多的配色方案，我們可以根據(jù)自己的需要自由選擇。假設(shè)，我們有一個 hello.html 的 html 文件，我們想要將它的的配色方案改為 morning 類型。

hello.html

<html>
<head>
<title> Welcome </title>
</head>
<body>
<p> Hello Everybody, Welcome to our site </p>
</body>
</html>

我們首先運行以下命令在 Vim 中打開這個 html 文件。

$ vim hello.html

按 ESC 并鍵入 :colorscheme morning ，這樣我們就更改了文件當(dāng)前的顏色方案。

應(yīng)用新顏色方案后，效果如下圖顯示。但這種更改依然是暫時的，關(guān)閉編輯器后配色方案將被重置。

如果想要永久設(shè)置特定的配色方案及背景，那么我們需要再次打開 .vimrc 文件并添加以下命令文本。下面配置的是夜晚配色方案，會將背景顏色設(shè)置為深色。

color evening
set background=dark

之后再重新打開剛才的文件，效果就會變成如下圖所示。

根據(jù)語言選擇配色方案

Vim 編輯器支持多種語言的語法，例如 PHP，Perl，Python，awk 等。根據(jù)不同語言，它會應(yīng)用一套相應(yīng)語言的配色方案。

比如現(xiàn)在有一個名為 average.py 的 Python 文件，我們用 Vim 編輯器打開它。通過 Vim 編輯器的默認(rèn)配色方案，文件的顯示效果如下圖所示。

這是一個 Python 文件，但如果我們想以 Perl 的語法風(fēng)格來顯示，要怎么操作？我們只需輸入 :set syntax=perl ，按 Enter 鍵就可以了，效果如下圖所示。

:set syntax=perl

自定義配色方案

前面所介紹的那些配色方案，其實都是系統(tǒng)自帶的，我們只是選擇一下而已。如果我們想要個性化一點，自定義一套配色方案，要怎么操作？強大的 Vim 也是支持你這個需求的！

一般而言，語法需要高亮的無非就是變量、注釋、常量之類的，Vim 編輯器支持的語法高亮組有如下 9 個：

Group Name	Description
Identifier	變量
Statement	關(guān)鍵字，例如 if，else，do，while等
Comment	注釋
Type	數(shù)據(jù)類型，如 int、double、string等
PreProc	預(yù)處理器語句，比如 #include
Constant	常量，如數(shù)字、帶引號的字符串、真/假等
Special	特殊符號，如“\t”、“\n”等
Underlined	帶下劃線的文本
Error	錯誤

下面舉個例子。在 Vim 編輯器中打開名為 leap.py 的 Python 腳本文件。默認(rèn)情況下，該文件的語法高亮顯示如下圖所示。

如果我們想把關(guān)鍵字變?yōu)榧t色，該怎么操作？只需輸入 :hi Statement ctermfg=red 即可。這時，if 和 else 的顏色將變?yōu)榧t色。

:hi Statement ctermfg=red

當(dāng)然，對于注釋、常量、數(shù)據(jù)類型，我們也可以使用同樣的方法來改變顏色。這樣一來，你就會形成一套自己的配色方案，感覺是不是很酸爽？

作者：良許，目前就職于一家世界500強外企，專注于Linux應(yīng)用開發(fā)。本文首發(fā)于個人公眾號「良許Linux」主要分享Linux方面干貨，歡迎關(guān)注。

聲明：本文為作者投稿，版權(quán)歸其個人所有。

【END】

篇文章介紹一些 vim 使用技巧：

把外部shell命令的執(zhí)行結(jié)果寫入文件
使用vim將文件轉(zhuǎn)出html格式

把外部shell命令的執(zhí)行結(jié)果寫入文件

在 vim 中，可以使用 :r !cmd 命令執(zhí)行 shell 中的 cmd 命令，并把該命令的打印結(jié)果寫入到當(dāng)前光標(biāo)的下一行。

例如，:r !date 命令執(zhí)行 shell 的 date 命令，打印當(dāng)前的時間，把這個打印結(jié)果寫入到當(dāng)前光標(biāo)的下一行。

也可以在 r 命令的前面加上數(shù)字指定要寫入到哪一行之后，而不是寫入到當(dāng)前光標(biāo)的下一行。

例如，:2r !date 命令是把打印結(jié)果寫入到第二行的后面，也就是寫入到第三行，原先第三行會挪到第四行，后面的內(nèi)容依此類推。

注意：如果不加感嘆號 ‘!’，那么后面跟著的參數(shù)會被認(rèn)為是文件名，如果存在該文件，會讀取該文件內(nèi)容，寫入到當(dāng)前光標(biāo)的下一行。如果該文件不存在，則報錯提示找不到文件。例如， :r date 命令是讀取名為 date 的文件內(nèi)容，寫入到當(dāng)前光標(biāo)的下一行。

這里的 :r 是 :read 命令的縮寫。

在 vim 中，用 :help :r 命令查看 :r !cmd 和 :r name 命令的幫助說明。部分關(guān)鍵說明如下：

:r[ead] [++opt] [name]
Insert the file [name] (default: current file) below the cursor.

:{range}r[ead] [++opt] [name]
Insert the file [name] (default: current file) below the specified line.

:[range]r[ead] !{cmd}
Execute {cmd} and insert its standard output below the cursor or the specified line.

使用vim將文件轉(zhuǎn)出html格式

在 vim 中，可以使用 :TOhtml 命令來將當(dāng)前文件轉(zhuǎn)換出 html 格式文件。注意這個命令的大小寫，不能寫為 :tohtml 的形式。

:TOhtml 命令基于整個文件內(nèi)容轉(zhuǎn)成一個新的 html 文件，拆分新的 vim 水平窗口顯示轉(zhuǎn)換后的 html 文件內(nèi)容。如有需要，可以自行修改文件內(nèi)容做一些調(diào)整。最后，保存該 html 文件即可。

注意：這個 html 文件需要在 vim 中保存后才會生成本地文件，:TOhtml 命令并沒有直接生成本地的 html 文件，也不會修改原有文件本身的內(nèi)容，而是生成新的 html 文件。

如果只是需要轉(zhuǎn)某幾行代碼（例如30行到42行），則執(zhí)行 :30,42TOhtml 命令。

如果當(dāng)前 vim 配置成顯示行號，所轉(zhuǎn)換出來的 html 文件中也會帶有行號。不想帶有行號的話，可以在轉(zhuǎn)換之前，先執(zhí)行 :set nonu 命令設(shè)置為不顯示行號。

選擇編輯器時，想必很多人對 vim 嗤之以鼻，但實際上，從一定角度來看，你也能發(fā)現(xiàn)別樣的風(fēng)采。本文的目的并不在于強推薦大家使用 vim，而是通過作者將 Vim 作為 Web 開發(fā)項目的主編輯器案例中，讓我們發(fā)現(xiàn)一些不同之處。

作者 | Fidel Sanchez-Bueno

譯者 | 彎月，責(zé)編 | 屠敏

出品 | CSDN（ID：CSDNnews）

以下為譯文：

在學(xué)習(xí)編程的過程中，選擇最適合自己的編輯器或IDE（下文的編輯器指代兩者）是每個程序員都會經(jīng)歷的過程。對于我而言，大約從9年前開始學(xué)習(xí)Python，我還記得當(dāng)時每周都會換一種編輯器，一開始是IDLE，后來我記得還試過Boa Constructor、Komodo和Notepad++等。

在尋找最佳編輯器的過程中，你會了解到程序員之間的編輯器之戰(zhàn)，并且會對那些Vim和Emacs的笑話會心一笑。

也就是在這個時候，你會嘗試學(xué)習(xí)Vim或者Emacs，從此就開始了愛麗絲的探險之旅。

從這篇文章的標(biāo)題就可以看出來，我選擇的編輯器是Vim，但我并沒打算向你推薦Vim，也不會去說服你花費無數(shù)時間，改變自己的開發(fā)環(huán)境來使用Vim。

這篇文章的目的是分享我在使用Vim作為Web開發(fā)項目的主編輯器時，做出的一些能夠提高效率的定制。

Web開發(fā)的Vim插件

作為Web程序員，大部分時間都在編寫HTML、CSS和JavaScript文件，根據(jù)個人喜好或項目需要，你可能還會使用一些框架（如Angular、Vue或React）以及babel、webpack、grunt等各種工具。

我個人會盡可能減少插件的使用，僅在插件能帶來非常大的好處，而且能真正改進工作流程的時候才會使用。

目前我安裝的插件如下：

Emmet.vim
indentline和vim-jsx-pretty
vim-commentary
ALE（eslint和prettier）

Emmet.vim

Emmet是高速輸入和編輯代碼的絕佳工具，只需要輸入一行代碼就可以創(chuàng)建一整段復(fù)雜的HTML。

indentline和vim-jsx-pretty

這兩個插件可以改進Vim的視覺樣式。indentline可以添加豎線來顯示縮進級別，vim-jsx-pretty能給JSX代碼添加高亮，很適合編寫ReactJS等代碼時使用。

vim-commentary

這個插件可以方便地注釋掉一段代碼或者取消注釋，只需選中代碼并鍵入<g-c>即可。

ALE（eslint和prettier）

ALE（Asynchronous Lint Engine）可以調(diào)用linter和代碼修整工具，極大地提高工作效率，屬于那種不用不知道，用了絕對不后悔的插件。我使用ALE主要是為了調(diào)用prettier。

實時預(yù)覽（熱重載）

實時查看修改的效果能夠極大地改善工作流程。很多React或Gatsby等項目已經(jīng)內(nèi)置了該功能，但如果僅僅是創(chuàng)建一個簡單的網(wǎng)頁（HTML、CSS和JavaScript），那么Atom、Brackets或VSCode等編輯器可以把編輯中的頁面的實時預(yù)覽并列顯示在另一個窗口中。

像我這種愛鉆牛角尖的人很希望在Vim中也使用該功能。盡管有幾個插件能實現(xiàn)，但我決定選擇另一種方式。

我決定實現(xiàn)一個不依賴于編輯器的方案。基本思路就是，運行一個本地服務(wù)器，監(jiān)視文件的改動，每當(dāng)文件更新時就刷新服務(wù)器上的頁面。

聽起來似乎很復(fù)雜，但實際上非常簡單，只需要在項目文件夾中安裝并運行browser-sync即可。

我假設(shè)你已經(jīng)安裝了nodejs，所以只需要在全局安裝browser-sync。

npm install -g browser-sync

安裝完browser-sync之后，就能在任何文件夾中運行，創(chuàng)建一個本地服務(wù)器，然后自動顯示文件夾內(nèi)的index.html。

browser-sync start --server --files .

如果你使用的是Linux，bane可以創(chuàng)建一個別名來簡化啟動服務(wù)器的過程。打開主目錄下的.bashrc文件，添加如下內(nèi)容：

# Command line alias to start the browser-sync server
alias serve="browser-sync start --server --files ."

我更進一步，允許局域網(wǎng)內(nèi)的其他機器訪問我的服務(wù)器，這樣就能在別的設(shè)備上進行測試：

# browser-sync config
# Get the current local IP address
export SERVER_IP=`hostname -I`

# The command alias to start the browser-sync server
alias serve="browser-sync start --server --files . --no-notify --host $SERVER_IP --port 9000"

感謝閱讀！

原文：https://dev.to/fidelve/using-vim-as-your-main-editor-for-web-development-5a73

作者：Fidel Sanchez-Bueno，化學(xué)工程師，自學(xué)成才的程序員。

本文為 CSDN 翻譯，轉(zhuǎn)載請注明來源出處。

【End】

在線咨詢

上一篇：Delphi基礎(chǔ)教程圖文版之泛型容器
下一篇：前端讀者｜百度前端編碼規(guī)范-JS（干貨滿滿，收藏不看

您的項目需求

*請認(rèn)真填寫需求信息，我們會在24小時內(nèi)與您取得聯(lián)系。

整合營銷服務(wù)商

誰說 Vim 不好用？

把外部shell命令的執(zhí)行結(jié)果寫入文件

使用vim將文件轉(zhuǎn)出html格式

您的項目需求