谁说 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 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 使用技巧：

把外部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】

在线咨询

上一篇：Delphi基础教程图文版之泛型容器
下一篇：前端读者｜百度前端编码规范-JS（干货满满，收藏不看

您的项目需求

*请认真填写需求信息，我们会在24小时内与您取得联系。

整合营销服务商

谁说 Vim 不好用？

把外部shell命令的执行结果写入文件

使用vim将文件转出html格式

您的项目需求