vim 下web开发html css js插件

Vim下的Web开发之html,CSS,javascript插件

HTML

下载HTML.zip

解压HTML.zip,然后将里面的所有文件copy到C:\Program Files\Vim\vimfiles目录下
首先,你应该把“ filetype plugin on ”写入你的vimrc。
重启vim。
新建一个test.html文件。用gvim打开按 ";html"看看会有什么结果!注意";html"是英文的分号(;)


css

似乎很久没有关注 Vim 的动向了,在 Vim 脚本列表中找到个非常好的 CSS 颜色显示插件。

这个插件可以很直观的显示 CSS 文件中定义的颜色,如下图所示。这样我们就不用一边用 Vim 写 CSS ,一边查那该死的色表了。

http://files.gracecode.com/2009_11_05/327435209e1d.jpg

安装这个插件非常简单(继续戳这里下载),只要将这个文件拷贝到

$VIMRUNTIME/after/syntax/

目录下就可以了(没有的话新建一个)。这样说可能不怎么直观,那么 Windows 用户拷贝到

C:\Program Files\Vim\vimfiles\after\syntax\

这个目录下(如果你是默认安装 Vim 的话);而 *ix 系统用户则拷贝到

$HOME/.vim/after/syntax/

这里目录下就可以了。

而代码提示插件用的是AutoComplPop,还在使用DW或者aptana等一些工具的朋友们肯定对代码弹出提示情有独钟,这款插件的功能可以说是有 过之而无不及啊,当然如果你不喜欢这种自动的代码提示的话可以不用装。需要的朋友还是戳这里下载。

 

Javascript

转载:http://panweizeng.com/archives/359

如果你喜欢vim,平时也写写javascript,那么这篇文章就是为你而写的:)如果你喜欢javascript,但是还没有找到合适的编辑器,那么请give vim a try。

以下假定你对vim已经有所了解,另外所有插件在gnome-terminal中都测试过,在其他终端中应该不会有太大问题。

  1. 语法高亮-javascript.vim
    http://www.vim.org/scripts/script.php?script_id=1491
    该插件安装在~/.vim/syntax/目录下。下载后需要修改一个地方,一般javascript编程,折叠层数不需要太深,我自己设置为1,即:
    setlocal foldlevel=1。
    需要在.vimrc中加入
    1. " 打开javascript折叠
    2. let b:javascript_fold=1
    3. " 打开javascript对dom、html和css的支持
    4. let javascript_enable_domhtmlcss=1

    截屏(点击可查看大图)

  2. 变量标记和检查-mark.vim

    http://www.vim.org/scripts/script.php?script_id=1238
    该插件安装到~/.vim/plugin/目录。在对变量进行检查和跟踪的时候会很有用,同时还可以防止变量名拼写错误。打开/关闭变量标记的默认快捷键是m。也可以使用v选中一段进行标记。
    截屏(点击可查看大图)

    字典补全-javascript.dict

    http://lazy-people.org/browser/project/dotfiles/users/dann/.vim/dict/javascript.dict?rev=122
    该字典可以放在任意目录,我一般放在~/.vim/dict/目录中。使用字典补全需要在插入模式下,快捷键是Ctrl+X,然后Ctrl+K。有些javascript内置函数名超长,经常记不住,这时候字典就比较有用。字典其实就是一个普通文件,里面是关键词的列表,一行一个,所以你也可以加入一些你在项目中经常使用的函数。
    另外需要在.vimrc中加入

    1. "设置字典 ~/.vim/dict/javascript.dict是字典文件的路径
    2. autocmd FileType javascript set dictionary=~/.vim/dict/javascript.dict

    截屏(点击可查看大图)

    YUI自动补全

    待续…

  3. 运行代码片段-spidermonkey

    http://www.mozilla.org/js/spidermonkey/
    有时想测试一个小东西,没有必要写一个html然后到浏览器去运行,spidermonkey能帮你忙,而且spidermonkey还能作一些很 geek的事情。ubuntu系统安装很简单,sudo apt-get install spidermonkey-bin,其他系统请参考网站的文档。安装完毕后,输入js,则会进入一个js shell,和python类似。输入help()回车,会看到一个简单的帮助。
    vim编写javascript代码后,输入!js %即可执行当前文件的代码。也可以选中一段代码然后执行:’<,'>!js,这样会插入执行结果到当前文件。
    截屏(点击可查看大图)

    语法检查和快速调试-javascriptlint

    http://www.javascriptlint.com/
    这个工具的代码基于Douglas Crockford’s的jslint,在代码检查方面很强大,可以说非常苛刻。如果从头开始写代码,建议经常用它来检查代码,能明显提高代码的质量。下载时不要从代码库check out最新版本,而是下载稳定的0.3.0版本。
    $ cd jsl-0.3.0/src/ #这里的jsl-0.3.0是解压缩目录
    $ make -f Makefile.ref all
    $ cd Linux_All_DBG.OBJ/
    $ cp jsl jscpucfg /home/xp/bin/js/ #/home/xp/bin/js/要拷贝到的目录,可以任意位置
    $ cd /home/xp/bin/js/
    $ jsl -help:conf > jsl.conf #生成默认配置文件
    另外需要在.vimrc中加入

    1. "设置javascriptlint
    2. autocmd FileType javascript set makeprg=/home/xp/bin/js/jsl -nologo -nofilelisting -nosummary -nocontext -conf '/home/xp/bin/js/jsl.conf' -process %
    3. autocmd FileType javascript set errorformat=%f(%l): %m
    4. autocmd FileType javascript inoremap <silent> <F9> <C-O>:make<CR>
    5. autocmd FileType javascript map <silent> <F9> :make<CR>

    使用时使用:make命令即可,或者使用F9快捷键。还需要理解的是quickfix,输入命令help quickfix看以下文档,主要涉及的命令有:cw :cn :cp等。
    截屏(点击可查看大图)

    其他常用插件

  4. 虽然我不怎么用,但是可能对你有一些帮助
    winmanager 类似资源管理器,如果从editplus或者其他图形编辑器转过来的朋友,这个可能很有用。
    截屏(点击可查看大图)

  5. minibufexplorer 类似标签页,管理当前打开的文件
    Tlist可以显示代码结构
为了您的安全,请只打开来源可靠的网址

打开网站    取消

来自: http://hi.baidu.com/515314237/blog/item/189fbe0b317c181495ca6b8d.html

转载于:https://www.cnblogs.com/Jason-Damon/archive/2011/10/31/2229692.html

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/news/392332.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

为什么用scrum_为什么Scrum糟糕于数据科学

为什么用scrumScrum is a popular methodology for PM in software engineering and recently the trend has carried over to data science. While the utility of Scrum in standard software engineering may remain up for debate, here I will detail why it has unquesti…

Android_Event Bus 的基本用法

1 //事件总线分发2 public class MainActivity extends ActionBarActivity {3 Button button;4 TextView text;5 6 Override7 protected void onCreate(Bundle savedInstanceState) {8 super.onCreate(savedInstanceState);9 setContentView(R…

leetcode 1203. 项目管理(拓扑排序)

公司共有 n 个项目和 m 个小组&#xff0c;每个项目要不无人接手&#xff0c;要不就由 m 个小组之一负责。 group[i] 表示第 i 个项目所属的小组&#xff0c;如果这个项目目前无人接手&#xff0c;那么 group[i] 就等于 -1。&#xff08;项目和小组都是从零开始编号的&#xf…

谷歌cloud_通过使用Google Cloud ML大规模提供机器学习模型,我们学到了什么

谷歌cloudby Daitan通过大潭 通过使用Google Cloud ML大规模提供机器学习模型&#xff0c;我们学到了什么 (What we learned by serving machine learning models at scale using Google Cloud ML) By Bruno Schionato, Diego Domingos, Fernando Moraes, Gustavo Rozato, Isa…

php企业黄页源码,PHPCMS 企业黄页模块 v9 GBK 正式版

PHPCMS V9采用OOP(面向对象)方式进行基础运行框架搭建。模块化开发方式做为功能开发形式。框架易于功能扩展&#xff0c;代码维护&#xff0c;优秀的二次开发能力&#xff0c;可满足所有网站的应用需求。PHPCMS V9企业黄页主要特色1、模型自定义&#xff0c;支持模型添加、修改…

跨域配置

SpringBoot跨域配置 我们的后端使用Spring Boot。Spring Boot跨域非常简单&#xff0c;只需书写以下代码即可。 Configuration public class CustomCORSConfiguration {private CorsConfiguration buildConfig() {CorsConfiguration corsConfiguration new CorsConfiguration(…

fromEvent

fromEvent(selector,Event) 实际效果图 这个功能和cad 3dmax里面的鼠标定位功能一致吧&#xff0c;是不是有点小成就&#xff1f; 转载于:https://www.cnblogs.com/xiongwei2017/p/7074180.html

java开发第一天上班_从第一天开始,如何成为一名优秀的团队合作伙伴,成为初级开发人员

java开发第一天上班One of the many things you might be asking yourself when starting your software development career is:在开始软件开发职业时&#xff0c;您可能会问自己很多事情之一&#xff1a; “How do I REALLY contribute to my new team?”“我如何真正为我的…

java虚拟机编译文件,理解Java虚拟机(1)之一个.java文件编译成.class文件发生了什么...

理解Java虚拟机(1)之一个.java文件编译成.class文件发生了什么最近在看《深入理解Java虚拟机》弄明白了很多java的底层知识&#xff0c;决定分几部分总结下&#xff0c;从.java文件编译&#xff0c;到类加载机制&#xff0c;内存分配垃圾回收机制&#xff0c;线程并发&#xff…

leetcode 684. 冗余连接()

在本问题中, 树指的是一个连通且无环的无向图。 输入一个图&#xff0c;该图由一个有着N个节点 (节点值不重复1, 2, …, N) 的树及一条附加的边构成。附加的边的两个顶点包含在1到N中间&#xff0c;这条附加的边不属于树中已存在的边。 结果图是一个以边组成的二维数组。每一…

Go-如何读取yaml,json,ini等配置文件

1. json使用 JSON 应该比较熟悉&#xff0c;它是一种轻量级的数据交换格式。层次结构简洁清晰 &#xff0c;易于阅读和编写&#xff0c;同时也易于机器解析和生成。 创建 conf.json&#xff1a;{"enabled": true,"path": "/usr/local" }新建conf…

SQL转化为MapReduce的过程

转载&#xff1a;http://www.cnblogs.com/yaojingang/p/5446310.html 在了解了MapReduce实现SQL基本操作之后&#xff0c;我们来看看Hive是如何将SQL转化为MapReduce任务的&#xff0c;整个编译过程分为六个阶段&#xff1a; Antlr定义SQL的语法规则&#xff0c;完成SQL词法&am…

使用集合映射和关联关系映射_使用R进行基因ID映射

使用集合映射和关联关系映射Inter-conversion of gene ID’s is the most important aspect enabling genomic and proteomic data analysis. There are multiple tools available each with its own drawbacks. While performing enrichment analysis on Mass Spectrometry da…

leetcode 1018. 可被 5 整除的二进制前缀

给定由若干 0 和 1 组成的数组 A。我们定义 N_i&#xff1a;从 A[0] 到 A[i] 的第 i 个子数组被解释为一个二进制数&#xff08;从最高有效位到最低有效位&#xff09;。 返回布尔值列表 answer&#xff0c;只有当 N_i 可以被 5 整除时&#xff0c;答案 answer[i] 为 true&…

纯java应用搭建,16、BoneCp纯java项目使用

2、代码实现 package com.study;import com.jolbox.bonecp.BoneCP;import com.jolbox.bonecp.BoneCPConfig;import com.jolbox.bonecp.BoneCPDataSource;import org.slf4j.Logger;import org.slf4j.LoggerFactory;import java.sql.*;/*** Boncp 纯java处理* CreateTime 2018/3/…

数据结构与算法深入学习_我最喜欢的免费课程,用于深入学习数据结构和算法...

数据结构与算法深入学习by javinpaul由javinpaul Data structures and algorithms are some of the most essential topics for programmers, both to get a job and to do well on a job. Good knowledge of data structures and algorithms is the foundation of writing go…

RabbitMQ学习系列(一): 介绍

1、介绍 RabbitMQ是一个由erlang开发的基于AMQP&#xff08;Advanced Message Queue &#xff09;协议的开源实现。用于在分布式系统中存储转发消息&#xff0c;在易用性、扩展性、高可用性等方面都非常的优秀。是当前最主流的消息中间件之一。 RabbitMQ的官网&#xff1a;http…

详尽kmp_详尽的分步指南,用于数据准备

详尽kmp表中的内容 (Table of Content) Introduction 介绍 What is Data Preparation 什么是数据准备 Exploratory Data Analysis (EDA) 探索性数据分析(EDA) Data Preprocessing 数据预处理 Data Splitting 数据分割 介绍 (Introduction) Before we get into this, I want to …

leetcode 947. 移除最多的同行或同列石头(dfs)

n 块石头放置在二维平面中的一些整数坐标点上。每个坐标点上最多只能有一块石头。 如果一块石头的 同行或者同列 上有其他石头存在&#xff0c;那么就可以移除这块石头。 给你一个长度为 n 的数组 stones &#xff0c;其中 stones[i] [xi, yi] 表示第 i 块石头的位置&#x…

matlab距离保护程序,基于MATLAB的距离保护仿真.doc

基于MATLAB的距离保护仿真摘要&#xff1a;本文阐述了如何利用Matlab中的Simulink及SPS工具箱建立线路的距离保护仿真模型&#xff0c;并用S函数编制相间距离保护和接地距离保护算法程序&#xff0c;构建相应的保护模块&#xff0c;实现了三段式距离保护。仿真结果表明&#xf…