将vim配置成网页制作的IDE

Vim、Emacs配置和使用
回复
harder
帖子: 30
注册时间: 2007-12-01 10:04

将vim配置成网页制作的IDE

#1

帖子 harder » 2009-11-19 17:11

原帖地址:我的博客 http://www.p-harder.cn/2009/11/134

参考:http://bbs.blueidea.com/thread-2938273-1-1.html


先上图:
语法高亮:
screenshot_008.png
代码提示:
screenshot_009.png
需要的Vim插件:

autocomplpop.vim
snipMate
Template.vim(这款插件作者的介绍及下载
javascript.vim (下载)


装好vim 还有各插件还有字典

PS:可以按照参考的帖子下载和安装插件,不过那些插件都是基于win下的。如果你和我一样是Linux用户,要自己安装好基于Linux的Vim,那三个插件中的两个是可以直接用的,就是Template.vim要经行转编码。
在终端用命令:

代码: 全选

dos2unix /usr/share/vim/vimfiles/plugin/Template.vim
(我的vim安装在/usr/share下)。

安装javascript.vim:
该插件安装在~/.vim/syntax/目录下。下载后需要修改一个地方,一般javascript编程,折叠层数不需要太深,我自己设置为1,即: setlocal foldlevel=1。
需要在.vimrc中加入:

代码: 全选

" 打开javascript折叠 
let b:javascript_fold=1 
" 打开javascript对dom、html和css的支持 
let javascript_enable_domhtmlcss=1


安装字典(用于代码提示):

在vim\vim72下新建dict目录;在dict目录下建立字典文件,文本即可;
引入方式:如php字典

代码: 全选

autocmd FileType php set dictionary=/usr/share/vim/vim72/dict/php.dict
可以开始写配置文件了。下面是我个人的vimrc配置:

代码: 全选

"""""""""""""""""""""""""""""""""""""""""""""""""""""""""""""""
" => 文件编码选项
"""""""""""""""""""""""""""""""""""""""""""""""""""""""""""""""
set encoding=utf-8
set fileencodings=ucs-bom,utf-8,chinese,prc,taiwan,latin-1
set fileencoding=utf-8
set encoding=utf8
set ffs=unix,dos,mac "设置换行符格式
set ff=unix "设置缓冲区换行符格式
set nobomb "BOM(字节顺序标记)
"中文提示信息
"set langmenu=none
"""""""""""""""""""""""""""""""""""""""""""""""""""""""""""""""
" => 常规选项
"""""""""""""""""""""""""""""""""""""""""""""""""""""""""""""""
set nocompatible "兼容VI模式
set history=400 "设置记录历史命令选项
set autoread "自动载入,用于不同编辑器处理同一文件时.
set mouse=a "启用鼠标选项,a为所有模式启用鼠标
set nu "开启行号
set helplang=cn "设置帮助为中文
set guioptions-=T "隐藏工具栏
"""""""""""""""""""""""""""""""""""""""""""""""""""""""""""""""
" => 编辑选项
"""""""""""""""""""""""""""""""""""""""""""""""""""""""""""""""
set expandtab
set shiftwidth=4
set tabstop=4
set linebreak
set formatoptions=tcoqmM
""""""""""""""""""""""""""""""
" => 语法选项 
""""""""""""""""""""""""""""""
filetype plugin on "开启支持文件类型的插件
filetype indent on "开启支持文件类型的缩进
set autoindent
set smartindent
set cindent
set wrap
"""""""""""""""""""""""""""""""""""""""""""""""""""""""""""""""
" => 文件备份选项
"""""""""""""""""""""""""""""""""""""""""""""""""""""""""""""""
set nobackup "关闭备份
set nowb
set noswapfile
"""""""""""""""""""""""""""""""""""""""""""""""""""""""""""""""
" => 编辑选项
"""""""""""""""""""""""""""""""""""""""""""""""""""""""""""""""
set expandtab
set shiftwidth=4
set tabstop=4
set linebreak
set formatoptions=tcoqmM
""""""""""""""""""""""""""""""
" => 语法选项 
""""""""""""""""""""""""""""""
filetype plugin on "开启支持文件类型的插件
filetype indent on "开启支持文件类型的缩进
set autoindent
set smartindent
set cindent
set wrap
"""""""""""""""""""""""""""""""""""""""""""""""""""""""""""""""
" =>设置 javascript.vim
"""""""""""""""""""""""""""""""""""""""""""""""""""""""""""""""
let b:javascript_fold=1
let javascript_enable_domhtmlcss=1
"""""""""""""""""""""""""""""""""""""""""""""""""""""""""""""""
" =>设置 各字典
"""""""""""""""""""""""""""""""""""""""""""""""""""""""""""""""
autocmd FileType javascript set dictionary=/usr/share/vim/vim72/dict/javascript.dict
autocmd FileType css set dictionary=/usr/share/vim/vim72/dict/css.dict
autocmd FileType html set dictionary=/usr/share/vim/vim72/dict/html.dict
autocmd FileType php set dictionary=/usr/share/vim/vim72/dict/php.dict
"""""""""""""""""""""""""""""""""""""""""""""""""""""""""""""""
" => 模板选项
"""""""""""""""""""""""""""""""""""""""""""""""""""""""""""""""
map nx :NewTemplateTab xhtml " 新建 XHTML 的快捷键
map np :NewTemplateTab php " 新建 php 的快捷键
map nj :NewTemplateTab javascript " 新建 javascript 的快捷键
map nc :NewTemplateTab css " 新建 CSS 的快捷键
上次由 harder 在 2009-11-19 19:21,总共编辑 1 次。
头像
dxcqcv
帖子: 47
注册时间: 2009-05-31 17:54

Re: 将vim配置成网页制作的IDE

#2

帖子 dxcqcv » 2011-09-10 9:58

请教,如何用VIM写CSS的background{url}的时候能出现选择框
头像
lilydjwg
论坛版主
帖子: 4258
注册时间: 2009-04-11 23:46
系统: Arch Linux
联系:

Re: 将vim配置成网页制作的IDE

#3

帖子 lilydjwg » 2011-09-13 17:09

dxcqcv 写了:请教,如何用VIM写CSS的background{url}的时候能出现选择框
那个并不好用。非要这样做的话,可参考我的 colorpicker 的做法。
回复