整合營銷服務商
電腦端+手機端+微信端=數據同步管理
免費咨詢熱線：
電腦端+手機端+微信端=數據同步管理
免費咨詢熱線：
者 | 良許
責編 | 郭芮
相信大家在使用各種各樣強大的 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小時內與您取得聯系。
