左手's Blog

NERDTree插件API小记

之前因为vim上的TFS插件一直不好使，自己写了一个简单的插件在vim上签出TFS源文件。为了在NERDTree上面集成了菜单功能，研究了下NERDTree插件。年底忙里偷闲整理了一些关于NERDTree的知识点，分享出来。

1. 添加NERDTree文件菜单
在vim插件目录创建一个nerdtree_plugin文件夹，在其中新建vim脚本文件，使用NERDTreeAddMenuItem函数添加一项按钮项。参数格式：
{'text': 'menu text', 'shortcut': 'short key', 'callback':'callback function name'}
示例：
call NERDTreeAddMenuItem({ 'text': 'TFS Check (o)ut', 'shortcut': 'o', callback': 'TFSCheckoutCallback' })

2. 获取当前文件节点
let currentNode = g:NERDTreeFileNode.GetSelected()

3.获取文件路径
let currentFile = currentNode.path._strForGlob()

4.更新文件状态
cal currentNode.path.refresh()
cal NERDTreeRender()
# 当我们通过currentNode.path.refresh() 可以刷新文件节点，之后通过NERDTreeRender重绘获得更新。当通过操作修改了文件的属性后需要通过此操作更新文件状态。

附插件git地址：https://github.com/thinkjs/TFSCheckout
NERDTree FileNode参考:https://github.com/scrooloose/nerdtree/blob/5.0.0/lib/nerdtree/tree_file_node.vim
NERDTree Pathp参考:https://github.com/scrooloose/nerdtree/blob/5.0.0/lib/nerdtree/path.vim
NERDTree Public API参考:https://github.com/scrooloose/nerdtree/blob/5.0.0/plugin/NERD_tree.vim#L164

[锋利web前端开发]vim用autocommand插件编译coffee

锋利web前端为一个系列文章，分享利用python、vimscript等语言，整合haml、sass、coffee等实现快速前端开发。

可以到 [锋利web前端开发]索引贴查看当前系列的所有文章

本篇主要讲解使用vim插件autocommand编译coffee并调用uglifyjs进行压缩。

自己为了提升工作效率而写的一个插件，以整合coffee开发为例子。列举一下使用方式。

1.安装：
插件地址：https://github.com/thinkjs/autocommand （目前没有发布到vim.org上面），用git获取以后，将plugin目录中的autocommand.vim复制到vim的plugin目录即可。
依赖：python2.x

2.npm相关插件安装
通过调用外部命令来实现功能，需要安装cofee和uglify。安装命令npm install coffee-script uglify-js -g。

3.创建项目及配置
vim打开项目路径，我这里是E:\project\test。创建js文件夹，用来放转换后的js代码。创建_source文件夹，用来存放源代码及配置文件。vim切换路径到_source文件夹。pwd一下，应该显示的是E:\project\test\_source，输入:AcmdInitConfig命令，按y创建配置文件。刷新_source文件夹，此时可以看到_config的配置文件。在_source下面创建coffee文件夹，用来放coffee源代码。这时整个目录应该是这样：

E:/project/test/

|~_source/

| |coffee/

| `-_config

|~js/

4.修改配置项
修改配置文件中的 coffee/ 相关配置项里 command 数组中添加一行 , "uglifyjs -mo ../js/#{$fileName}.min.js ../js/#{$fileName}.js"，修改后整个配置文件内容如下：

{
  "jade/": {
    "path": "~",
    "jade": {
      "command": [
        "jade -PO ../ jade/#{$fileName}.jade"
      ]
    }
  },
  "sass/": {
    "path": "~",
    "sass": {
      "command": [
        "sass --style compact sass/#{$fileName}.sass ../css/#{$fileName}.css"
         /* , "cp -fp ../css/#{$fileName}.css ../../public/css" */
      ]
    }
  },
  "coffee/": {
    "path": "~",
    "coffee": {
      "command":[
        "coffee -bp coffee/#{$fileName}.coffee>../js/#{$fileName}.js"
        , "uglifyjs -mo ../js/#{$fileName}.min.js ../js/#{$fileName}.js"
         /* , "cp -fp ../js/#{$fileName}.js ../../public/js" */
      ]
    }
  }
}
/* vim:ft=javascript ts=2 sts=2 sw=2 et
*/

配置是一个json格式的文件。jade和sass的如果不用，可以删除。

5.编写代码文件
在_coffee文件夹下创建main.coffee文件，敲入一段coffee代码：

# Assignment:
number   = 42
opposite = true

# Conditions:
number = -42 if opposite

# Functions:
square = (x) -> x * x

# Arrays:
list = [1, 2, 3, 4, 5]

# Objects:
math =
  root:   Math.sqrt
  square: square
  cube:   (x) -> x * square x

# Splats:
race = (winner, runners...) ->
  print winner, runners

# Existence:
alert "I knew it!" if elvis?

# Array comprehensions:
cubes = (math.cube num for num in list)

vim执行:Acmd命令，如果执行正确，VIM底部会出现一串类似 19：44：29 execute coffee 这样的提示，表示执行成功。如果报错，会把错误显示出来。这时刷新E:/project/test/js文件夹，应该有main.js和main.min.js两个文件，main.js是main.coffee生成的js文件，main.min.js是用uglifyjs压缩后的js文件。

相关链接：
coffeescript: http://coffeescript.org/
uglifyjs: https://github.com/mishoo/UglifyJS2
autocommand使用说明：https://github.com/thinkjs/autocommand/wiki/quickref03

相关截图：
配置

执行成功的提示

报错提示

vim让代码整齐美观的小技巧

一、空格和Tab相关

空格和Tab是两种常见的排版缩进的字符，常见项目中的风格问题往往由此而起。vim可以很容易的处理好这些问题。首先我们要把这两个字符显示出来，默认这两个字符都是白的。使用如下方法设置：

" 显示tab和空格
set list
" 设置tab和空格样式
set lcs=tab:\|\ ,nbsp:%,trail:-
" 设定行首tab为灰色
highlight LeaderTab guifg=#666666
" 匹配行首tab
match LeaderTab /^\t/

上面的设置将Tab显示为|(竖线)，将行尾的空格显示为-(减号)。原本看起来好象还挺整齐的代码，这下原形毕露了。如下图：

列举几种常见tab和空格编码问题：
1. 代码中Tab和空格混排
需求：将空格转为Tab或Tab转为空格
解决方法：先设置自己的缩进设置，例如我是用4个空格缩进:set ts=4 sts=4 sw=4 et，然后敲入:ret可将代码中原有的Tab转成4个空格。后续编辑中，Tab键自动生成4个空格，你删除的时候，按一个删除键，删除的也是4个空格。如果你是用4个空格宽度的Tab缩进的，使用:set ts=4 sts=4 sw=4 noet，然后敲入:ret即可。

2. 行尾多余的空格和Tab
需求：删除多余空格
解决方法：输入:%s/\s*$//ge，将行尾多余空格删除。

二、换行相关

因为开发人员工具设置不同，导致两个文件换行符不同，或者同一个文件中出现多种换行符。
1. 转换文件换行方式
解决方法：设置fileformat属性，:set ff=dos (\r\n win换行) :set ff=unix (\n unix/linux换行) :set ff=mac (\r Mac换行)

2. 换行符混排（常见的情况是Win换行和Unix换行混排，VIM中会将文件识别为unix换行，在行尾显示^M）
需求：统一换行符
解决方法：输入:%s/\r//ge,将多余\r去掉，这时全部剩下\n换行然后保存。如果需要保存为win换行设置:set ff=dos再保存即可。

三、缩进对齐

类似Python的编码风格以缩进代表层级。这种情况将缩进层次多了，有时候很难确定这一段代码是否和上一段代码在同一缩进水平上。自己写了一个简单的函数，通过设置cc的值，来显示一条纵向的线作参考线。效果如下：

代码如下:快捷键Alt+o向左、Alt+u向左移动参考线

" --------------------------------------------------
" [参考线切换] {{{
" --------------------------------------------------
fu! ReferenceLine(t)
	let ccnum = &cc
	if ccnum == '' | let ccnum = 0 | en
	let csw = &sw
	if a:t == 'add'
		let ccnum = ccnum + csw
		exec "setl cc=".ccnum
	elsei a:t == 'sub'
		let ccnum = ccnum - csw
		if ccnum >= 0 | exec "setl cc=".ccnum | en
	en
endf
nn <silent> <A-u> :call ReferenceLine('sub')<CR>
nn <silent> <A-o> :call ReferenceLine('add')<CR>
" }}}

四、赋值符号对齐

有时候我们可能希望我们一段的赋值代码都用=号对齐，象下图这样：

解决方法：安装Tabular插件，选中要对齐的代码，输入:Tab/= 让代码通过=两边对齐。

我的vim配置分割方案

初学vim的时候在网上找过很多vim配置，大多是把所有内容放在 .vimrc 文件中。单个文件内容太多，查找及维护也比较麻烦，不方便多个配置方案的切换。自己抽时间整理了一个方案，共享一下。

1.入口配置文件

.vimrc作为配置的入口。只放简单的配置加载函数。内容如下：

" load lcc {{{
" 如果你不想加载lcc,请取消下面这一行的注释
" let g:lcc_loaded = 1
" 设置配置文件加载方式
let g:lcc_runtime=1
let s:lcc_path=expand('<sfile>:h').'/.lcc'
fu! LoadLCC()
	let g:lcc_loaded=1
	if !exists('$VIMFILES')
		" 根据配置文件判断加载目录
		if g:lcc_runtime == 0
			let $VIMFILES=filereadable(split(&rtp, ',')[0].'/conf/main.vim') ? split(&rtp, ',')[0] :
						\ filereadable(split(&rtp, ',')[1].'/conf/main.vim') ? split(&rtp, ',')[1] :
						\ ''
		" 针对自定义目录
		elsei g:lcc_runtime == 4
			let $VIMFILES=s:lcc_path
			exe 'se rtp+='.escape(s:lcc_path.','.s:lcc_path.'/after', ' ')
		en
	en
	" 加载主配置文件
	" filereadable
	so $VIMFILES/conf/main.vim
endf
" start lcc happy viming!
if !exists('g:lcc_loaded') | cal LoadLCC() | en
" }}}

lcc_runtime为1时，自动查找rtp的第1个路径和第2个路径，根据是否存在主配置文件来设定配置文件的路径，配置文件可以放在$HOME或者$VIM下面，可同时兼容linux和win。lcc_runtime为4时，根据lcc_path的值指定一个runtime，并加载这个runtime中的配置。

2.主配置文件

$VIMFILES/conf/main.vim文件做为主配置文件，在其中加载各项分割配置文件，定义一些特殊功能等。内容如下：

" --------------------------------------------------
" [分配置文件加载] {{{1
" --------------------------------------------------
" 加载设置选项 访问命令 \es
so <sfile>:p:h/set.vim
" 加载插件配置,插件对应热键定义在内 访问命令 \ed
so <sfile>:p:h/plugin.vim
" 加载自定义函数 访问命令 \ef
so <sfile>:p:h/function.vim
" 加载按热键配置 访问命令 \eg
so <sfile>:p:h/keyboard.vim
" 加载自定义命令 访问命令 \ec
so <sfile>:p:h/command.vim
" 加载项目配置文件 访问命令 \ep
ru conf/project.vim
" 1}}}

project.vim存放当前开发项目的一些特殊配置，使用ru命令不存在该文件时忽略错误。

vim：NERDTree打开当前文件所在目录

自己使用vim编辑文件的时候，经常有需求将NERDTree定位到当前文件的目录，用了一点时间映射了一个组合快捷键，分享一下。
代码如下：

nn <silent><F2> :exec("NERDTree ".expand('%:h'))<CR>

vim添加coffee和jade支持

vim默认不带coffee和jade的支持，我们编辑该类型的文件时，无法实现高亮缩进等功能，在vim官网下载对应的插件即可。

coffee http://www.vim.org/scripts/script.php?script_id=3590
jade http://www.vim.org/scripts/script.php?script_id=3192

可以到http://jashkenas.github.com/coffee-script/查看coffee-script的相关信息
可以到https://github.com/visionmedia/jade查看关于jade的相关信息

[锋利web前端开发]使用vim插件autocommand进行整合开发

锋利web前端为一个系列文章，分享利用python、vimscript等语言，整合haml、sass、coffee等实现快速前端开发。

可以到 [锋利web前端开发]索引贴查看当前系列的所有文章

本篇主要讲解使用vim插件autocommand进行整合开发

更新：
2016/11/26：更新插件地址到 https://github.com/lccf/autocommand

准备工作

下载vim、git、python等软件

gvim下载地址 ftp://ftp.vim.org/pub/vim/pc/gvim73_46.exe 鉴于国内网络情况，本人推荐到 http://www.xiazaiba.com/html/3347.html 下载
git下载地址 http://code.google.com/p/msysgit/downloads/list 我选择的是 Git-1.7.11-preview20120704.exe 这个安装包。

继续阅读

[锋利web前端开发]索引贴

锋利web前端为一个系列文章，分享利用python、vimscript等语言，整合haml、sass、coffee等实现快速前端开发。

我是左手，行走在路上!

左手

分类

最新评论

最新留言

链接

RSS

功能

NERDTree插件API小记

[锋利web前端开发]vim用autocommand插件编译coffee

vim让代码整齐美观的小技巧

我的vim配置分割方案

vim：NERDTree打开当前文件所在目录

vim添加coffee和jade支持

[锋利web前端开发]使用vim插件autocommand进行整合开发

[锋利web前端开发]索引贴