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的根底上进展了更上一层楼本性化的周密,产生一套本人独有的网址风格,并合营超过51%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>

  

  使用办法详见官方网站链接: 
  汉语全汉化网址:

 

名称 功能
Auto Close Tag 自动闭合HTML标签
Auto Import Typescript 自动import提示
Auto Rename Tag 修改HTML标签时,自动修改匹配的标签
Beautify css/sass/scss/less css/sass/less格式化
Better Comments 编写更加人性化的注释
Bookmarks 添加行书签
Can I Use HTML5、CSS3、SVG的浏览器兼容性检查
Code Runner 运行选中代码段(支持大量语言,包括Node)
Code Spellchecker 单词拼写检查
CodeBing 在VSCode中弹出浏览器并搜索,可编辑搜索引擎
Color Highlight 颜色值在代码中高亮显示
Color Info 小窗口显示颜色值,rgb,hsl,cmyk,hex等等
Color Picker 拾色器
Document This 注释文档生成
ESLint ESLint插件,高亮提示
EditorConfig for VS Code EditorConfig插件
Emoji 在代码中输入emoji
File Peek 根据路径字符串,快速定位到文件
Font-awesome codes for html FontAwesome提示代码段
Git Blame 在状态栏显示当前行的Git信息
Git History(git log) 查看git log
GitLens 显示文件最近的commit和作者,显示当前行commit信息
Guides 高亮缩进基准线
Gulp Snippets Gulp代码段
HTML CSS Class Completion CSS class提示
HTML CSS Support css提示(支持vue)
HTMLHint HTML格式提示
Indenticator 缩进高亮
IntelliSense for css class names css class输入提示
JavaScript (ES6) code snippets ES6语法代码段
JavaScript Standard Style Standard风格
Less IntelliSense less变量与混合提示
Lodash Lodash代码段
MochaSnippets Mocha代码段
Node modules resolve 快速导航到Node模块
Code Outline 展示代码结构树
Output Colorizer 彩色输出信息
Partial Diff 对比两段代码或文件
Path Autocomplete 路径完成提示
Path Intellisense 另一个路径完成提示
PostCss Sorting css排序
Prettify JSON 格式化JSON
Project Manager 快速切换项目
Quokka.js 不需要手动运行,行内显示变量结果
REST Client 发送REST风格的HTTP请求
React Native Storybooks storybook预览插件,支持react
React Playground 为编辑器提供一个react组件运行环境,方便调试
React Standard Style code snippets react standar风格代码块
Sass sass插件
Settings Sync VSCode设置同步到Gist
Sort Typescript Imports typescript的import排序
Sort lines 排序选中行
String Manipulation 字符串转换处理(驼峰、大写开头、下划线等等)
Syncing vscode 设置同步到gist
TODO Parser Todo管理
TS/JS postfix completion ts/js前缀提示
TSLint TypeScript语法检查
Test Spec Generator 测试用例生成(支持chai、should、jasmine)
TypeScript Import TS自动import
TypeSearch TS声明文件搜索
Types auto installer 自动安装@types声明依赖
VSCode Great Icons 文件图标拓展
Version Lens package.json文件显示模块当前版本和最新版本
View Node Package 快速打开选中模块的主页和代码仓库
VueHelper Vue2代码段(包括Vue2 api、vue-router2、vuex2)
filesize 状态栏显示当前文件大小
ftp-sync 同步文件到ftp
gitignore .gitignore文件语法
htmltagwrap 快捷包裹html标签
language-stylus Stylus语法高亮和提示
markdownlint Markdown格式提示
npm Intellisense 导入模块时,提示已安装模块名称
npm 运行npm命令
stylelint css/sass/less代码风格
vetur 目前比较好的Vue语法高亮
vscode-database 操作数据库,支持mysql和postgres
vscode-icons 文件图标,方便定位文件
vscode-random 随机字符串生成器
vscode-styled-components styled-components高亮支持
vscode-styled-jsx styled-jsx高亮支持

http://blog.csdn.net/borishuai/article/details/8510306

1.mark.vim

mark.vim重在的效率是变量的高亮。

当选要高亮的词,使用 \m
来使其高亮,多个词的高亮交易会示为差异的颜料,在没有须要寻觅的时候以致代码review的时候使用效率依然挺不错的,

使用\n能够去除所选的词的高亮。

越来越多实际情况可以点击插件主页掌握。

ps: 查找单词能够行使 * 那个命令来扩充快捷寻找

FontAwesome

  FontAwesome是贰个装有海量Logo的网址,固然Bootstrap中一度有充裕多的图标供我们选拔,但仍有衣不蔽体的随即,FontAwesome能够很好的扶植我们缓和Logo远远不够用的难题。同理使用前需下载好文件并进行导入

  FontAwesome中文网:

 

转自:

2.zencoding.vim

zencoding.vim 新兴改名叫Emmet.vim,重要功能是落到实处代码的飞速编写。

实际科目能够参见合法的网址

个人感受是做页面重构的时候用得相当多,通过命令能够快捷生成html的构造,提升了前端开采的生产力。

SweetAlert系列

  SweetAlert是一项对原生JS中的alert加以美化的工具,有斯威特Alert2和SweetAlert22三个本子。

  今后多用SweetAlert2,下载及学科地址:

*  SweetAlert 到 SweetAlert2
晋级指南*

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

 

 

3.ctrlp.vim

ctrlp.vim重中之重意义是对文本以致buffer进行模糊查询,神速张开文件。

操作实举个例子下图所示:

金沙国际官网 1

金沙国际官网 2

在明白文书名的状态下,使用ctrl +
p张开此插件,输入文件名,实则是文本名开头多少个字母就能够高速展开文件。

ps:假如当前的文书已经保存好,那么会一贯替换到找寻到的文本,若无保存的,交易会开窗口的相间类似与sp的命令。

为此在自己检查自纠文件的境况下本人平日会用vsp来划分窗口恐怕tabnew三个新的tab,再张开新的文书。

只要供给查别的目录或许忘记了文本名的话,就足以利用上面包车型客车插件NE812 SuperfastD_tree了。

Toastr通知

 

*        Toastr*

 

4.NERD_tree.vim

NERD_tree.vim主要功用是一款文件浏览器,能够查看文件目录结构展开相应的文本。

切实演示如下图所示:

金沙国际官网 3

本身是使用绑定的快捷键F4来开垦文件浏览器,光标在文件浏览器中得以用jk来运动,回车键能够张开文件,按q能够脱离文件浏览器。

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>

 

5.neocomplcache.vim

neocomplcache.vim主要作用是张开代码补全,

优点是对上下文举办索引,结果保存到缓存中,自动补全的作用相比较高,别的相配的也相比较精准。

补全效果如下图呈现:

金沙国际官网 6

金沙国际官网 7

im中的代码补全插件较多,常常补全的智能性重视于插件的字典,变量缓存机制。

从那一点看neocomplcache也是挺不错的,别的智能读读取路线的效应也是挺赞的。

管制后台模板

     
  Metronic

 

6.multiple_cursors.vim

multiple_cursors.vim的主要功效是多光标多行编辑。

重在职能能够见下边包车型客车图片:

金沙国际官网 8

金沙国际官网 9

在平昔不这款插件前,原生命令平时是实行块操作,在可视格局下对多行进行操作。步骤相比冗长,也便于失误,

那款插件可真谓利器啊,同有的时候候它还帮忙正则的操作呢。

Highcharts图像分析

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

 

7.commentary.vim

commentary.vim重在职能是能够批量讲明单行或多行以至去除注释;

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

 

终极,六款插件都以在前端开采中有时应用的,还大概有众多功能,原生的有的下令依然得以做的,

其他用Vim还会有三个功利是从写C到写PHP再到写JS,都得以用同一个编辑器,依然挺方便的。

飞快键神马的温馨在vimrc中布署就能够,

制作家组织和的IDE的经过即使折腾,可是随后采用的历程照旧挺爽的啊~~~~

1 赞 5 收藏
评论

金沙国际官网 10

发表评论

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

网站地图xml地图