整合營銷服務商

          電腦端+手機端+微信端=數據同步管理

          免費咨詢熱線:

          誰說 Vim 不好用?

          誰說 Vim 不好用?

          者 | 良許

          責編 | 郭芮

          相信大家在使用各種各樣強大的 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 NameDescription

          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 使用技巧:

          • 把外部shell命令的執行結果寫入文件
          • 使用vim將文件轉出html格式

          把外部shell命令的執行結果寫入文件

          在 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將文件轉出html格式

          在 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】


          主站蜘蛛池模板: 国产欧美一区二区精品仙草咪| 亚洲成AV人片一区二区密柚| 色狠狠一区二区三区香蕉| 日韩精品无码人妻一区二区三区 | 精品视频一区二区三三区四区| 久久久精品人妻一区亚美研究所| 亚洲夜夜欢A∨一区二区三区| 亚洲中文字幕久久久一区| 欧洲精品一区二区三区在线观看 | 波多野结衣精品一区二区三区 | 亚洲一区精彩视频| 国产一区麻豆剧传媒果冻精品| 99久久精品国产一区二区成人| 国产一区二区在线|播放| 日本不卡一区二区视频a| 人成精品视频三区二区一区| 在线播放国产一区二区三区 | 国产精品小黄鸭一区二区三区| 91久久精品午夜一区二区| 91精品一区国产高清在线| 久久精品国内一区二区三区| 射精专区一区二区朝鲜| 亚洲综合国产一区二区三区| 加勒比精品久久一区二区三区| 精品香蕉一区二区三区| 亚洲欧美日韩一区二区三区| 一区二区三区免费在线视频 | 精品视频一区二区三区免费| 亚洲国产成人久久一区WWW | 国产亚洲一区二区手机在线观看| 国产视频一区二区在线观看| 亚洲av无一区二区三区| 亚洲Av永久无码精品一区二区| 亚洲一区免费视频| 国产麻豆精品一区二区三区| 国产一区二区三区小向美奈子| 日韩毛片一区视频免费| 亚洲AV综合色区无码一区| 精品一区二区三区在线播放视频| 国产精品一区二区资源| 国产在线一区二区在线视频|