查看原文
其他

Web 开发中使用了 Vim 作为主编辑器之后......

Fide IT服务圈儿 2022-09-11

IT服务圈儿

有温度、有态度的IT自媒体平台


在选择编辑器时,想必很多人对 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开发项目的主编辑器时,做出的一些能够提高效率的定制。

01

Web开发的Vim插件


作为Web程序员,大部分时间都在编写HTML、CSS和JavaScript文件,根据个人喜好或项目需要,你可能还会使用一些框架(如Angular、Vue或React)以及babel、webpack、grunt等各种工具。

我个人会尽可能减少插件的使用,仅在插件能带来非常大的好处,而且能真正改进工作流程的时候才会使用。

目前我安装的插件如下: 

  • Emmet.vim

  • indentline和vim-jsx-pretty

  • vim-commentary

  • ALE(eslint和prettier)

02

Emmet.vim


Emmet是高速输入和编辑代码的绝佳工具,只需要输入一行代码就可以创建一整段复杂的HTML。

03

indentline和vim-jsx-pretty


这两个插件可以改进Vim的视觉样式。indentline可以添加竖线来显示缩进级别,vim-jsx-pretty能给JSX代码添加高亮,很适合编写ReactJS等代码时使用。

04

vim-commentary


这个插件可以方便地注释掉一段代码或者取消注释,只需选中代码并键入<g-c>即可。

05

ALE(eslint和prettier)


ALE(Asynchronous Lint Engine)可以调用linter和代码修整工具,极大地提高工作效率,属于那种不用不知道,用了绝对不后悔的插件。我使用ALE主要是为了调用prettier。

06

实时预览(热重载)


实时查看修改的效果能够极大地改善工作流程。很多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 翻译,转载请注明来源出处。 




*版权声明:转载文章和图片均来自公开网络,版权归作者本人所有,推送文章除非无法确认,我们都会注明作者和来源。如果出处有误或侵犯到原作者权益,请与我们联系删除或授权事宜。

您可能也对以下帖子感兴趣

文章有问题?点此查看未经处理的缓存