菜单

Vim常用插件——前端开发工具连串

2019年3月14日 - jQuery

6.multiple_cursors.vim

multiple_cursors.vim的关键功用是多光标多行编辑。

首要功效能够见上边包车型客车图样:

图片 1

图片 2

在没有那款插件前,原生命令一般是进行块操作,在可视情势下对多行进行操作。步骤相比冗长,也易于失误,

这款插件可真谓利器啊,同时它还援助正则的操作呢。

治本后台模板

     
  Metronic

 

1.mark.vim

mark.vim重中之重的意义是变量的高亮。

当选要高亮的词,使用 \m
来使其高亮,四个词的高亮会议及展览示为不相同的水彩,在不要求寻找的时候以及代码review的时候利用效率依旧挺不错的,

使用\n可以去除所选的词的高亮。

越来越多详情能够点击插件主页驾驭。

ps: 查找单词可以运用 * 这些命令来进展高效搜索

FontAwesome

  FontAwesome是一个享有海量图标的网站,纵然Bootstrap中曾经有十三分多的图标供大家使用,但仍有捉襟见肘的随时,FontAwesome可以很好的佑助大家解决图标不够用的难题。同理使用前需下载好文件并拓展导入

  FontAwesome中文网:http://www.fontawesome.com.cn/faicons/

 

4.NERD_tree.vim

NERD_tree.vim主要成效是一款文件浏览器,能够查阅文件目录结构打开相应的文书。

具体演示如下图所示:

图片 3

自家是应用绑定的神速键F4来开辟文件浏览器,光标在文书浏览器中得以用jk来移动,回车键能够打开文件,按q能够退出文件浏览器。

Toastr通知

 

*        Toastr*

 

2.zencoding.vim

zencoding.vim 新兴改名为Emmet.vim,首要成效是贯彻代码的快捷编写。

切切实实科目能够参见合法的网站

私家感受是做页面重构的时候用得比较多,通过命令能够高快速生成成html的结构,升高了前端开发的生产力。

jQueryLazyload懒加载

以身作则代码:

<!DOCTYPE html>
<html lang="zh-CN">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="x-ua-compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title>懒加载示例</title>
</head>
<body>
<div>
  <div><img src="img/0.jpg" alt="图片 4" class="lazy" data-original="img/5.jpg" width="600px" height="400px"></div>
  ...
  <div><img src="img/0.jpg" alt="图片 5" class="lazy" data-original="img/6.jpg" width="600px" height="400px"></div>

</div>
<script src="https://cdn.bootcss.com/jquery/3.2.1/jquery.min.js"></script>
<script src="jquery.lazyload.min.js"></script>
<script>
  $("img.lazy").lazyload({
    effect: "fadeIn",
    event: "click"
  })
</script>
</body>
</html>

 

3.ctrlp.vim

ctrlp.vim重中之重意义是对文本以及buffer实行模糊查询,快捷打开文件。

操作实例如下图所示:

图片 6

图片 7

在领略文书名的情状下,使用ctrl +
p打开此插件,输入文件名,实则是文件名开端多少个假名就足以急忙打开文件。

ps:若是当前的文书已经保存好,那么会直接替换来搜索到的文本,要是没有保留的,会议及展览开窗口的相间类似与sp的下令。

为此在自己检查自纠文件的情事下自身一般会用vsp来划分窗口大概tabnew三个新的tab,再打开新的文书。

假使供给查别的目录可能忘记了文本名的话,就足以行使上边包车型大巴插件NELANDD_tree了。

Bootstrap

  在许多插件中,Bootstrap是用得最多、成效最强大的。Bootstrap是当前很受欢迎的前端框架。Bootstrap
是基于 HTML、CSS、JavaScript 的,它简洁利落,使得 Web
开发尤其火速。Bootstrap是根据HTML5和CSS3支出的,它在jQuery的底蕴上举行了越发本性化的周密,形成一套自个儿独有的网站风格,并同盟超过八分之四jQuery插件。

  使用时索要在HTML代码的<head></head>标签中程导弹入    
文件路径/bootstrap-3.3.7-dist/css/bootstrap.min.css

<head>
    <meta charset="UTF-8">
    <title>title</title>
    <link rel="stylesheet" href="bootstrap-3.3.7-dist/css/bootstrap.css">
</head>

  

  使用方法详见官网链接:http://v3.bootcss.com/ 
  普通话全汉化网站:http://www.bootcss.com/

 

5.neocomplcache.vim

neocomplcache.vim重庆大学成效是拓展代码补全,

优点是对上下文举办索引,结果保存到缓存中,自动补全的频率比较高,此外匹配的也正如精准。

补全效果如下图展现:

图片 8

图片 9

im中的代码补全插件相比较多,一般补全的智能性信赖于插件的字典,变量缓存机制。

从这一点看neocomplcache也是挺不错的,别的智能读读取路径的效用也是挺赞的。

Highcharts图像分析

  网址:https://www.hcharts.cn/demo/highcharts

 

Vim常用插件——前端开发工具连串

2015/08/16 · HTML5 ·
vim,
插件

初稿出处:
AlloyTeam   

作为一名开发者,应该对编辑器之神Vim)与神之编辑器Emacs有着耳闻吧。编辑器之战的现实细节有趣味的童鞋能够google之。

Vim最大的本性是打开速度快,功用强大,一旦明白了里面包车型大巴通令,编制程序进度单臂就不必要离开键盘了。

用习惯了Vim的另3个好处是在linux下能够很轻松地用vi来拍卖文件,当然emacs也得以做暗中认可编辑器,可是或不是每台机器都有安装Emacs。

今天任重(Ren Zhong)而道远给我们介绍Vim在前者领域的某些常用插件:

SweetAlert系列

  斯威特Alert是一项对原生JS中的alert加以美化的工具,有SweetAlert2和SweetAlert22多个版本。

  今后多用斯威特Alert2,下载及教程地址:https://sweetalert2.github.io/

*  SweetAlert 到 SweetAlert2
升级指南
*

  使用前记得引入<script
src=”sweetalert2/sweetalert2.js”></script>

 

 

7.commentary.vim

commentary.vim一言九鼎效用是足以批量注解单行或多行以及去除注释;

绑定退格键,选择多行能够直接以/**/的款式注释代码

 

最后,七款插件都以在前端开发中平常利用的,还有许多效益,原生的局地发令还是得以做的,

别的用Vim还有一个好处是从写C到写PHP再到写JS,都足以用同贰个编辑器,依旧挺方便的。

飞快键神马的友善在vimrc中布局即可,

营造自个儿的IDE的历程固然折腾,不过之后采取的长河可能挺爽的啊~~~~

1 赞 5 收藏
评论

图片 10

相关文章

发表评论

电子邮件地址不会被公开。 必填项已用*标注

网站地图xml地图