者 | 良許
責編 | 郭芮
相信大家在使用各種各樣強大的 IDE 寫代碼時都會注意到,代碼中各種類型的關鍵字會用獨特的顏色標記出來,然后形成一套語法高亮規則。這樣不僅美觀,而且方便代碼的閱讀。
而在上古神器 Vim 中,我們通常看到的是黑底白字,沒有任何其它顏色。難道我們的 Vim 就這么枯燥乏味嗎?當然不是,Vim 隱藏了非常多非常實用的功能與技巧,不是老司機根本就不知道。下面來詳細介紹。
在開始之前,我們要先檢查一下系統中是否安裝了 Vim 編輯器。一般來說 Ubuntu 系統是默認自帶的,沒有的小伙伴請先自行安裝。
$ sudo apt-get install vim
然后我們運行以下命令來查看安裝好的 Vim 編輯器的版本。
$ vim -version
接下來,我們就可以為 Vim 編輯器添加配色方案。為了能看出效果,我們準備了一個名為 login.sh 的 bash 文件,它的內容如下:
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
啟用/禁用語法高亮顯示
有些發行版的 Vim 編輯器已經幫你默認啟用語法高亮,而有些發行版卻沒有。如果沒有默認打開語法高亮,那么我們就需要自行打開。
打開的方法其實也很簡單。在 Vim 編輯器中打開 login.sh 文件后,按 ESC 鍵并鍵入 :syntax on ,語法高亮顯示就打開了,非常方便。
同樣,關閉語法高亮也很簡單,只需按 ESC 鍵并鍵入 :syntax off即可。
永久啟用或禁用語法高亮顯示
剛剛那種打開語法高亮的方法只是暫時性的,一旦當前文件關閉,下次打開文件就需要重新打開語法高亮。
如果想要永久啟用或禁用語法高亮顯示,就需要修改 .vimrc 文件。首先,我們使用 Vim 打開 .vimrc 文件。
$ sudo vim ~ / .vimrc
然后,在打開的文件中添加一句 syntax on 命令,代表永久啟用語法高亮顯示。最后再輸入 :wq 保存并關閉文件。
如果想要永久禁用語法高亮,則添加 syntax off 命令即可。
改變配色方案
在默認情況下,打開語法高亮后 Vim 為你應用了一套默認的配色方案,而實際上 Vim 還有很多套配色方案可供我們使用,我們可以自行去修改。
安裝 Vim 后,顏色方案文件位于 /usr/share/vim/vim*/colors/中。我們可以運行以下命令來查看 Vim 配色方案文件的列表。
$ ls -l /usr/share/vim/vim*/colors/
可以看出 Vim 為我們提供了非常多的配色方案,我們可以根據自己的需要自由選擇。假設,我們有一個 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 ,這樣我們就更改了文件當前的顏色方案。
應用新顏色方案后,效果如下圖顯示。但這種更改依然是暫時的,關閉編輯器后配色方案將被重置。
如果想要永久設置特定的配色方案及背景,那么我們需要再次打開 .vimrc 文件并添加以下命令文本。下面配置的是夜晚配色方案,會將背景顏色設置為深色。
color evening
set background=dark
之后再重新打開剛才的文件,效果就會變成如下圖所示。
根據語言選擇配色方案
Vim 編輯器支持多種語言的語法,例如 PHP,Perl,Python,awk 等。根據不同語言,它會應用一套相應語言的配色方案。
比如現在有一個名為 average.py 的 Python 文件,我們用 Vim 編輯器打開它。通過 Vim 編輯器的默認配色方案,文件的顯示效果如下圖所示。
這是一個 Python 文件,但如果我們想以 Perl 的語法風格來顯示,要怎么操作?我們只需輸入 :set syntax=perl ,按 Enter 鍵就可以了,效果如下圖所示。
:set syntax=perl
自定義配色方案
前面所介紹的那些配色方案,其實都是系統自帶的,我們只是選擇一下而已。如果我們想要個性化一點,自定義一套配色方案,要怎么操作?強大的 Vim 也是支持你這個需求的!
一般而言,語法需要高亮的無非就是 變量、注釋、常量 之類的,Vim 編輯器支持的語法高亮組有如下 9 個:
Group Name | Description |
Identifier | 變量 |
Statement | 關鍵字,例如 if,else,do,while等 |
Comment | 注釋 |
Type | 數據類型,如 int、double、string等 |
PreProc | 預處理器語句,比如 #include |
Constant | 常量,如數字、帶引號的字符串、真/假等 |
Special | 特殊符號,如“\t”、“\n”等 |
Underlined | 帶下劃線的文本 |
Error | 錯誤 |
下面舉個例子。在 Vim 編輯器中打開名為 leap.py 的 Python 腳本文件。默認情況下,該文件的語法高亮顯示如下圖所示。
如果我們想把關鍵字變為紅色,該怎么操作?只需輸入 :hi Statement ctermfg=red 即可。這時,if 和 else 的顏色將變為紅色。
:hi Statement ctermfg=red
當然,對于注釋、常量、數據類型,我們也可以使用同樣的方法來改變顏色。這樣一來,你就會形成一套自己的配色方案,感覺是不是很酸爽?
作者:良許,目前就職于一家世界500強外企,專注于Linux應用開發。本文首發于個人公眾號「良許Linux」主要分享Linux方面干貨,歡迎關注。
聲明:本文為作者投稿,版權歸其個人所有。
【END】
篇文章介紹一些 vim 使用技巧:
在 vim 中,可以使用 :r !cmd 命令執行 shell 中的 cmd 命令,并把該命令的打印結果寫入到當前光標的下一行。
例如,:r !date 命令執行 shell 的 date 命令,打印當前的時間,把這個打印結果寫入到當前光標的下一行。
也可以在 r 命令的前面加上數字指定要寫入到哪一行之后,而不是寫入到當前光標的下一行。
例如,:2r !date 命令是把打印結果寫入到第二行的后面,也就是寫入到第三行,原先第三行會挪到第四行,后面的內容依此類推。
注意:如果不加感嘆號 ‘!’,那么后面跟著的參數會被認為是文件名,如果存在該文件,會讀取該文件內容,寫入到當前光標的下一行。如果該文件不存在,則報錯提示找不到文件。例如, :r date 命令是讀取名為 date 的文件內容,寫入到當前光標的下一行。
這里的 :r 是 :read 命令的縮寫。
在 vim 中,用 :help :r 命令查看 :r !cmd 和 :r name 命令的幫助說明。部分關鍵說明如下:
: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 中,可以使用 :TOhtml 命令來將當前文件轉換出 html 格式文件。注意這個命令的大小寫,不能寫為 :tohtml 的形式。
:TOhtml 命令基于整個文件內容轉成一個新的 html 文件,拆分新的 vim 水平窗口顯示轉換后的 html 文件內容。如有需要,可以自行修改文件內容做一些調整。最后,保存該 html 文件即可。
注意:這個 html 文件需要在 vim 中保存后才會生成本地文件,:TOhtml 命令并沒有直接生成本地的 html 文件,也不會修改原有文件本身的內容,而是生成新的 html 文件。
如果只是需要轉某幾行代碼(例如30行到42行),則執行 :30,42TOhtml 命令。
如果當前 vim 配置成顯示行號,所轉換出來的 html 文件中也會帶有行號。不想帶有行號的話,可以在轉換之前,先執行 :set nonu 命令設置為不顯示行號。
選擇編輯器時,想必很多人對 vim 嗤之以鼻,但實際上,從一定角度來看,你也能發現別樣的風采。本文的目的并不在于強推薦大家使用 vim,而是通過作者將 Vim 作為 Web 開發項目的主編輯器案例中,讓我們發現一些不同之處。
作者 | Fidel Sanchez-Bueno
譯者 | 彎月,責編 | 屠敏
出品 | CSDN(ID:CSDNnews)
以下為譯文:
在學習編程的過程中,選擇最適合自己的編輯器或IDE(下文的編輯器指代兩者)是每個程序員都會經歷的過程。對于我而言,大約從9年前開始學習Python,我還記得當時每周都會換一種編輯器,一開始是IDLE,后來我記得還試過Boa Constructor、Komodo和Notepad++等。
在尋找最佳編輯器的過程中,你會了解到程序員之間的編輯器之戰,并且會對那些Vim和Emacs的笑話會心一笑。
也就是在這個時候,你會嘗試學習Vim或者Emacs,從此就開始了愛麗絲的探險之旅。
從這篇文章的標題就可以看出來,我選擇的編輯器是Vim,但我并沒打算向你推薦Vim,也不會去說服你花費無數時間,改變自己的開發環境來使用Vim。
這篇文章的目的是分享我在使用Vim作為Web開發項目的主編輯器時,做出的一些能夠提高效率的定制。
Web開發的Vim插件
作為Web程序員,大部分時間都在編寫HTML、CSS和JavaScript文件,根據個人喜好或項目需要,你可能還會使用一些框架(如Angular、Vue或React)以及babel、webpack、grunt等各種工具。
我個人會盡可能減少插件的使用,僅在插件能帶來非常大的好處,而且能真正改進工作流程的時候才會使用。
目前我安裝的插件如下:
Emmet.vim
indentline和vim-jsx-pretty
vim-commentary
ALE(eslint和prettier)
Emmet.vim
Emmet是高速輸入和編輯代碼的絕佳工具,只需要輸入一行代碼就可以創建一整段復雜的HTML。
indentline和vim-jsx-pretty
這兩個插件可以改進Vim的視覺樣式。indentline可以添加豎線來顯示縮進級別,vim-jsx-pretty能給JSX代碼添加高亮,很適合編寫ReactJS等代碼時使用。
vim-commentary
這個插件可以方便地注釋掉一段代碼或者取消注釋,只需選中代碼并鍵入<g-c>即可。
ALE(eslint和prettier)
ALE(Asynchronous Lint Engine)可以調用linter和代碼修整工具,極大地提高工作效率,屬于那種不用不知道,用了絕對不后悔的插件。我使用ALE主要是為了調用prettier。
實時預覽(熱重載)
實時查看修改的效果能夠極大地改善工作流程。很多React或Gatsby等項目已經內置了該功能,但如果僅僅是創建一個簡單的網頁(HTML、CSS和JavaScript),那么Atom、Brackets或VSCode等編輯器可以把編輯中的頁面的實時預覽并列顯示在另一個窗口中。
像我這種愛鉆牛角尖的人很希望在Vim中也使用該功能。盡管有幾個插件能實現,但我決定選擇另一種方式。
我決定實現一個不依賴于編輯器的方案。基本思路就是,運行一個本地服務器,監視文件的改動,每當文件更新時就刷新服務器上的頁面。
聽起來似乎很復雜,但實際上非常簡單,只需要在項目文件夾中安裝并運行browser-sync即可。
我假設你已經安裝了nodejs,所以只需要在全局安裝browser-sync。
npm install -g browser-sync
安裝完browser-sync之后,就能在任何文件夾中運行,創建一個本地服務器,然后自動顯示文件夾內的index.html。
browser-sync start --server --files .
如果你使用的是Linux,bane可以創建一個別名來簡化啟動服務器的過程。打開主目錄下的.bashrc文件,添加如下內容:
# Command line alias to start the browser-sync server
alias serve="browser-sync start --server --files ."
我更進一步,允許局域網內的其他機器訪問我的服務器,這樣就能在別的設備上進行測試:
# 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,化學工程師,自學成才的程序員。
本文為 CSDN 翻譯,轉載請注明來源出處。
【End】
*請認真填寫需求信息,我們會在24小時內與您取得聯系。