来自 澳门威尼斯人平台 2019-12-29 05:22 的文章
当前位置: 澳门威尼斯人平台 > 澳门威尼斯人平台 > 正文

前端开发工具(插件)

Vim常用插件——前端开发工具系列

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

原文出处: AlloyTeam   

作为一名开发者,应该对编辑器之神Vim)与神之编辑器Emacs有所耳闻吧。编辑器之战的具体细节有兴趣的童鞋可以google之。

Vim最大的特点是打开速度快,功能强大,一旦掌握了其中的命令,编程过程双手就不需要离开键盘了。

用习惯了Vim的另一个好处是在linux下可以很轻松地用vi来处理文件,当然emacs也可以做默认编辑器,但是不是每台机器都有安装Emacs。

今天主要给大家介绍Vim在前端领域的一些常用插件:

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>

  

  使用方法详见官网链接:    中文全汉化网站:

 

1. Vim插件管理工具Vundle

虽然拥有大量的插件,却缺少一个 确之有效的插件管理器。所幸,Vundle的出现解决了这个问题。
Vundle可以让你在配置文件中管理插件,并且非常方便的查找、安装、更新或者删除插件。 还可以帮你自动配置插件的执行路径和生成帮助文件。相对于另外一个管理工具pathogen, 可以说有着巨大的优势。

vundle 安装和配置
git clone ~/.vim/bundle/Vundle.vim

" 将下面配置文件加入到.vimrc文件中
set nocompatible " 必须
filetype off     " 必须

" 将Vundle加入运行时路径中(Runtime path)
set rtp+=~/.vim/bundle/Vundle.vim
call vundle#begin()

" 使用Vundle管理插件,必须
Plugin 'VundleVim/Vundle.vim'

"
" 其他插件
"

call vundle#end() " 必须
filetype plugin indent on " 必须

最后,你只需要执行安装命令,即可以安装好所需的插件。

# 在vim中
:PluginInstall

# 在终端
vim +PluginInstall +qall

1.mark.vim

mark.vim主要的功能是变量的高亮。

选中要高亮的词,使用 m 来使其高亮,多个词的高亮会显示为不同的颜色,在不需要查找的时候以及代码review的时候使用效果还是挺不错的,

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

更多详情可以点击插件主页了解。

ps: 查找单词可以使用 * 这个命令来进行快速搜索

FontAwesome

  FontAwesome是一个拥有海量图标的网站,虽然Bootstrap中已经有非常多的图标供我们使用,但仍有捉襟见肘的时刻,FontAwesome可以很好的帮助我们解决图标不够用的问题。同理使用前需下载好文件并进行导入

  FontAwesome中文网:

 

2. 常用的Vim插件

1.TagList 是一个用于显示定位程序中各种符号的插件

2.NERDTree 是一个用于浏览文件系统的树形资源管理外挂

3.NerdCommenter 可以快速的注释/取消注释多行代码,同时在行尾追加注释并自动进入Insert模式可以方便的进行行内注释。

4.Ctrlp 主要的功能是对文件进行模糊的查找

5.Vundle 插件管理工具

6.YouCompleteMe 自动补全代码,关于YouCompleteMe插件安装,参考YouCompleteMe自动插件补全

2.zencoding.vim

zencoding.vim 后来改名为Emmet.vim,主要功能是实现代码的快速编写。

具体教程可以参见官方的网站

个人感受是做页面重构的时候用得比较多,通过命令可以快速生成html的结构,提高了前端开发的生产力。

SweetAlert系列

  SweetAlert是一项对原生JS中的alert加以美化的工具,有SweetAlert2和SweetAlert22两个版本。

  现在多用SweetAlert2,下载及教程地址:

*  SweetAlert 到 SweetAlert2 升级指南*

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

 

 

本文由澳门威尼斯人平台发布于澳门威尼斯人平台,转载请注明出处:前端开发工具(插件)

关键词: