Web 开发中使用了 Vim 作为主编辑器之后......
在选择编辑器时,想必很多人对 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】
刚出炉的Python学习项目,快来围观!
https://edu.csdn.net/topic/python115?utm_source=csdn_bw
热 文 推 荐
☞HUAWEI HiAI 3.0 分布式,瑜伽、开车还能这么玩......
☞@程序员,你真的了解内存吗?
☞用 Go 重构 C 语言系统,这个抗住春晚红包的百度转发引擎承接了万亿流量
☞小米 9 年,雷军开启 AIoT 与 5G 超级互联网时代!
☞程序员正在消失?
☞5G套餐到底该不该换?看完你就明白啦!
☞他的公司1年令比特币暴跌数次,上榜福布斯捐10亿美元的跨界传奇
点击阅读原文,立即加入中国开发者现状调查!
你点的每个“在看”,我都认真当成了喜欢
Web 开发中使用了 Vim 作为主编辑器之后......相关推荐
- 小小base标签在web开发中的大作用
稍微上点规模的项目,通常都会为不同模块或功能的页面,js,css等资源建立不同的路径,或者对不同的servlet等配置不同的虚拟路径.这时,关于各种路径的包含和转向问题长期困扰开发人员. ...
- 【笔记-node】《imooc-nodejs入门到企业web开发中的应用》
目录 课程名 备注 入门必学 nodejs入门到企业web开发中的应用 框架与工具 node.js+koa2+mysql打造前后端分离精品项目<旧岛> 项目实战 20190317-2020 ...
- 038——VUE中组件之WEB开发中组件使用场景与定义组件的方式
<!DOCTYPE html> <html lang="en"> <head><meta charset="UTF-8" ...
- 谈谈WEB开发中的苦大难字符集问题
记得刚做javaweb开发的时候被这个编码问题搞得晕头转向,经常稀里糊涂的编码正常了一会编码又乱了.那个时候迫于项目进度大多都是知其然不知其所以然.后来有时间就把整个体系搞了个遍,终于摸通了来龙去脉. ...
- Web开发中的相对路径和绝对路径
在学习HTML的时候一定会遇到引入文件和链接跳转页面,比如:JS文件.CSS文件.Image图片.我们就会考虑是相对路径和绝对路径的问题.下面PHP程序员雷雪松就详细讲解下Web开发中的相对路径和绝对 ...
- web开发中目录路径问题的解决
web开发中目录路径问题的解决 参考文章: (1)web开发中目录路径问题的解决 (2)https://www.cnblogs.com/freeweb/p/4751403.html 备忘一下.
- java sessionstate_在Java Web开发中自定义Session
Session在存储安全性要求较高的会话信息方面是必不可少的,对于分布式Web应用自定义Session支持独立的状态服务器或集群是必须的.本文就来教大家如何在Java Web开发中自定义Session ...
- web开发中的缓存问题的研究(一)
web开发中的缓存问题的研究(一) web开发中的缓存问题的研究(二) web开发中的缓存问题的研究(三) 一般情况下,浏览器都会缓存已经访问过的页面内容,关于如何禁止浏览器缓存的介绍,在网上到处都有 ...
- Web 开发中很实用的10个效果【附源码下载】
在工作中,我们可能会用到各种交互效果.而这些效果在平常翻看文章的时候碰到很多,但是一时半会又想不起来在哪,所以养成知识整理的习惯是很有必要的.这篇文章给大家推荐10个在 Web 开发中很有用的效果,记 ...
最新文章
- 微信公众号开发小记——4.两种邀请用户的方式 扫码链接
- PHPsession工作机制以及销毁session
- 5.sql2008分组与嵌套
- springboot工厂模式_最新整理138道阿里、快手等大厂面试题解析:基础+Spring+并发+JVM+设计模式+缓存...
- java 解决汉诺塔问题
- 数字滤波器(四)--模拟滤波器转化为数字滤波器
- java未释放资源_DruidDataSource关闭资源未释放
- 2015年第46周五
- 用USBasp下载程序
- frft雷达信号处理 论文
- MySQL 查询题型总结
- java find 方法,findOne方法是findOne(Example
- MySQL高级篇知识点——锁
- 利用python实现外星人入侵大战小游戏(带源代码)
- 根文件系统与文件系统的区别
- 统计输入字符串中大写字母、小写字母、阿拉伯数字个数和特殊符号的个数
- opengl剪裁空间和视口空间中不遵从右手定则,而是遵从左手定则
- Chrome HTTPS 您的连接不是私密连接 解决办法
- stata回归表格输出
- java jdom 更新xml_用JDOM完成Java更新XML文件
热门文章
- sqlite 中出现的database table is locked 解决办法
- Ambari--告警管理
- 如何把网页添加到服务器,如何把一个网页放到云服务器
- 如何在矩池云上查看cudnn版本
- 按下组合键 可以迅速锁定计算机,Win7锁定计算机快捷键是什么?Win7使用锁定计算机快捷键的方法...
- atlas 200 远程图形化桌面
- Unity实现发射子弹的功能
- 中国烤箱盘行业市场供需与战略研究报告
- 小米手机不弹出usb连接设置_安卓手机数据备份教程(华为、小米、oppo、vivo)...
- matlab除fread外,Matlab中fread函数的高级使用方法及其帮助文档中容易引起歧义的地方...