在选择编辑器时,想必很多人对 vim 嗤之以鼻,但实际上,从一定角度来看,你也能发现别样的风采。本文的目的并不在于强推荐大家使用 vim,而是通过作者将 Vim 作为 Web 开发项目的主编辑器案例中,让我们发现一些不同之处。
![7a4e6e2912c0f14b8901ba89d401b7c1.png](https://i-blog.csdnimg.cn/blog_migrate/7d6a10dfab71f604fef4ef8d74201ae4.jpeg)
作者 | Fidel Sanchez-Bueno
译者 | 弯月,责编 | 屠敏
出品 | CSDN(ID:CSDNnews)
以下为译文:
在学习编程的过程中,选择最适合自己的编辑器或IDE(下文的编辑器指代两者)是每个程序员都会经历的过程。对于我而言,大约从9年前开始学习Python,我还记得当时每周都会换一种编辑器,一开始是IDLE,后来我记得还试过Boa Constructor、Komodo和Notepad++等。
![61ce5ed11975fe6e7a877b433a68f434.png](https://i-blog.csdnimg.cn/blog_migrate/a783962baf463d04554e7f9517ea2c64.jpeg)
在寻找最佳编辑器的过程中,你会了解到程序员之间的编辑器之战,并且会对那些Vim和Emacs的笑话会心一笑。
![bd6568f869a36e7afad071223ec59f6e.png](https://i-blog.csdnimg.cn/blog_migrate/c77fd22b5d8ab081dc9b01ead4549644.jpeg)
也就是在这个时候,你会尝试学习Vim或者Emacs,从此就开始了爱丽丝的探险之旅。
从这篇文章的标题就可以看出来,我选择的编辑器是Vim,但我并没打算向你推荐Vim,也不会去说服你花费无数时间,改变自己的开发环境来使用Vim。
这篇文章的目的是分享我在使用Vim作为Web开发项目的主编辑器时,做出的一些能够提高效率的定制。
![86f90a411bd77e1de87b5623968958f7.png](https://i-blog.csdnimg.cn/blog_migrate/5d1df44b6c8cdf34e5b4b7f60a4acd90.jpeg)
Web开发的Vim插件
作为Web程序员,大部分时间都在编写HTML、CSS和JavaScript文件,根据个人喜好或项目需要,你可能还会使用一些框架(如Angular、Vue或React)以及babel、webpack、grunt等各种工具。
我个人会尽可能减少插件的使用,仅在插件能带来非常大的好处,而且能真正改进工作流程的时候才会使用。
目前我安装的插件如下:
Emmet.vim
indentline和vim-jsx-pretty
vim-commentary
ALE(eslint和prettier)
![062ebd17e21d89deaabbdcde73c4d227.png](https://i-blog.csdnimg.cn/blog_migrate/8681c718ca7068a43d7fd2a9c5c7f013.jpeg)
Emmet.vim
Emmet是高速输入和编辑代码的绝佳工具,只需要输入一行代码就可以创建一整段复杂的HTML。
![99c96abf878effe764f4402b32baaf34.png](https://i-blog.csdnimg.cn/blog_migrate/b998dec1d25f9ebd756bd1721bbac876.jpeg)
![0322417b7d9f756085f1429d35f50f0f.png](https://i-blog.csdnimg.cn/blog_migrate/0b0bd5c7412f182ed73848997e3093c0.jpeg)
indentline和vim-jsx-pretty
这两个插件可以改进Vim的视觉样式。indentline可以添加竖线来显示缩进级别,vim-jsx-pretty能给JSX代码添加高亮,很适合编写ReactJS等代码时使用。
![d62954a6d427569144e66bf900852c29.png](https://i-blog.csdnimg.cn/blog_migrate/0181af2971520c7d9382cd063fd26f6b.jpeg)
![a2a78efe9781c15d96def11f6e66f9d9.png](https://i-blog.csdnimg.cn/blog_migrate/6a25f1c3f71bea80cad3b3a3d4fd4a82.jpeg)
vim-commentary
这个插件可以方便地注释掉一段代码或者取消注释,只需选中代码并键入即可。
![2b603ccb17b66efffb0c62531a28d3a2.gif](https://i-blog.csdnimg.cn/blog_migrate/cd0a3afa6222a9a193f5cce3a8d4ddc5.gif)
![aa315e414d18adec31ddf05a81882473.png](https://i-blog.csdnimg.cn/blog_migrate/b603772e982ac2fedd3f18bd10651a17.jpeg)
ALE(eslint和prettier)
ALE(Asynchronous Lint Engine)可以调用linter和代码修整工具,极大地提高工作效率,属于那种不用不知道,用了绝对不后悔的插件。我使用ALE主要是为了调用prettier。
![0474aa8f85eadbbf34b0d8419cc905bf.gif](https://i-blog.csdnimg.cn/blog_migrate/18f28a20cf54787f0bdd8fd7ec180649.gif)
![90f8759960a6179ec65a74caf9c79085.png](https://i-blog.csdnimg.cn/blog_migrate/f8c90b77567f424f7f1d4c3866a61ccf.jpeg)
实时预览(热重载)
实时查看修改的效果能够极大地改善工作流程。很多React或Gatsby等项目已经内置了该功能,但如果仅仅是创建一个简单的网页(HTML、CSS和JavaScript),那么Atom、Brackets或VSCode等编辑器可以把编辑中的页面的实时预览并列显示在另一个窗口中。
![f23611a1a631a9c99d8bd5dd29f9bbe9.png](https://i-blog.csdnimg.cn/blog_migrate/5b0afe3ed04061b5d48f6fb96a9ec104.jpeg)
像我这种爱钻牛角尖的人很希望在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】