linux vim emmet,emmet-vim

article/2025/9/29 8:14:48

最近啊,我投奔了网页的开发,看了一本《head first HTML and CSS》的书,感觉非常不错,然后又配置了一些vim里面用到的插件,现在我把学习到的东西记录下来!

首先,我不会在这里写emmet 的具体操作方法,你可以去官方自己看教程,如果英语不好的话,那么看这个朋友的博文,他把用到的教程都翻译成了中文http://www.cnblogs.com/matchless/tag/emmet/

如果你试过在一个html文件中插入一个html5的模板,你就发现他的格式如下

ps: 在插入模式输入 html:5  按下默认的快捷键,

a471f558ec383131a6aec44775090f5b.png

是不是感觉非常蛋疼,这个模板出现后,光标默认出现在body 标签之间,看到了吗?

后来我改了一下,变成了如下这个样子

ps:你会发现,上面那个模板是没有给出标题的(title元素里面没有内容,但是光标又在body里面,所以你每次都要把光标移动到title这里,是不是很蛋疼)

我改了一下, 你可以按照我改后的模式输入 html:5{这个填写的是title的内容}

如图所示

29556a80ed0943c0cc3e7dac86c0925a.png

按下默认的快捷键后,当当当当....................

66387a0455ba88f7e50ae31ee6e9f371.png

看到了把,这就是我修改的成果,接下来,给出方法

提醒一下,我个人是不会用vimscript的,但是我看过一点,所以我能多多少少理解用vimscript写成的函数的功能是什么。

而且,如果你想自己动手修改的话,请把emmet相关的文档教程看完,不然你不懂得为什么这样做

官方上给出了一个订制的简单教程,说是用到  xxx.json 之类的文件,在这里我要提醒你,vim是不需要下载这类文件来订制的,他说的估计是sublime text之类的编辑器

那么我们该怎么修改呢?

其实,他的配置文件放在了emmet-vim/autoload/emmet.vim 这个文件里面,用编辑器打开 emmet.vim这个文件,在1420左右看到了 默认的html5模板

37a66c3784c3fa55e7ed59d4ba826175.png

注意,由于我的默认模板被我改了,所以我去github给出了默认的模板

下图是我的修改

edf762063a65f5888e90617cedc488d1.png

你修改的时候要出去 最左边的 符号 ”\“  不能去掉,去掉会出错,然后说一下怎么配置, 符号 ”|“ 这个表示插入模板后光标出现的位置,${child} 这个的意思是 放入相关的内容,

例如 a{xxxx}   ${child} =xxx  html:{xxxxxx}  ${child}=xxxx ,所以你只要在模板里面调整一下${child}的位置,就能很方便的插入标题的名字

ps:原来默认的是插入html5模板只能这么用,而且不是自动插入标题

html:5

我的可以这么用

html:5{标题}

是不是很方便,

最后说一下快捷键的设置

在默认设置中,大部分命令都用到的快捷键是这个

,          他的意思是 按下ctrl 键 和 y键  和  ,键(逗号)

但是我觉得每次都输入那么多很麻烦,所以我写了一个mapping,把改成了 F2,放在.vimrc文件里面

let g:user_emmet_leader_key = '' "设置一下快捷键

为什么是这样设置呢?我在这里就不说了 ,请看一下文档就懂了,

我接下来的目标是学会了vimscript后,就开始写一个函数,让vim检测到文件名是.html的时候自动插入html5模板~!

好了 加油了


http://chatgpt.dhexx.cn/article/ekUHXOqJ.shtml

相关文章

Emmet 语法

Emmet语法前身是Zen coding,来提高html和css的编写速度,vscode内部已经集成该语法了 1、快速生成html结构语法 生成标签: 直接输入标签名,再按TAB键,such as 你打个 div 再按tab,就会直接生成 (这里打不出…

emmet写法

1.写一个递增的img路径 img[srcimage/com/$$.png]*10 效果

6.Emmet 语法与快速格式化代码

Emmet语法可以让我们在写网页的时候速度更快,我当前写网页的工具是pycharm,在pycharm中使用Emmet,我们需要点击File,然后点击Setting 搜索emmet,保证这里是勾选状态 安装后如果不进行其他设置,emmet自动被勾选 目录 …

Emmet语法总结

1 Emmet简介 Emmet是一个Web开发工具,用于加快HTML和CSS代码的编写速度。使用Emmet能够通过简短的表达式生成HTML或CSS代码片段。另外,截至2022年,主流的编辑器工具如Visual Studio Code、WebStorm都已经集成了Emmet工具,无需手动…

Linux 配置全面讲解(安装JDK、Mysql、Nginx)

1 Linux概述 1.1 Linux介绍 Linux是一套免费使用和自由传播的类Unix操作系统,是一个基于POSIX和UNIX的多用户、多任务、支持多线程和多CPU的操作系统。它能运行主要的UNIX工具软件、应用程序和网络协议。它支持32位和64位硬件。Linux继承了Unix以网络为核心的设计思…

【JAVA秒会技术之ConcurrentHashMap】JDK1.7与JDK1.8源码区别

前言 以前写过介绍HashMap的文章,文中提到过HashMap在put的时候,插入的元素超过了容量(由负载因子决定)的范围就会触发扩容操作,就是rehash,这个会重新将原数组的内容重新hash到新的扩容数组中,…

安装笔记--eclipse+jdk+neo4j安装与配置

1.eclipse安装2.JDK安装3.环境变量配置4.在eclipse中创建与导入项目4-1 eclipse导入项目 5.neo4j配置 1.eclipse安装 第一步:下载eclipse,并安装。 下载链接: http://www.eclipse.org/downloads/. 点击 Download Packages; 如图:根据自己的…

JDK7与JDK8中HashMap的实现

JDK7中的HashMap HashMap底层维护一个数组&#xff0c;数组中的每一项都是一个Entry transient Entry<K,V>[] table;我们向 HashMap 中所放置的对象实际上是存储在该数组当中&#xff1b; 而Map中的key&#xff0c;value则以Entry的形式存放在数组中 static class En…

VirtualBox虚拟机安装CentOS,安装jdk

CentOS 安装&#xff0c;安装jdk 1. CentOS 简介 CentOS 是一个基于Red Hat Linux 提供的可自由使用源代码的企业级Linux发行版本。每个版本的 CentOS都会获得十年的支持&#xff08;通过安全更新方式&#xff09;。新版本的 CentOS 大约每两年发行一次&#xff0c;而每个版本…

JDK1.7安装及校验

JDK的全称是JavaSE Development Kit&#xff0c;即java开发工具包&#xff0c;是sun公司提供的一套用于开发java应用程序的开发包&#xff0c;它提供了编译、运行java程序所需的各种工具和资源&#xff0c;包括java编译器、java运行时环境&#xff0c;以及常用的java类库等。 …

JVM调优(jdk8)与垃圾回收器详解

JVM调优与垃圾回收器详解 这张是jdk8的jvm模型&#xff1a; 黄色框的是线程共享区域、蓝色框的是线程私有(也就是每个线程单独一份) jvm模型从大的角度说有&#xff1a;类装载子系统、字节码执行引擎、运行时数据区。我这里主要讲运行时数据区。 一、JVM内存模型 1、名词解释…

下载并安装JDK7

JDK的全称是JavaSE Development Kit&#xff0c;即java开发工具包&#xff0c;是sun公司提供的一套用于开发java应用程序的开发包&#xff0c;它提供了编译、运行java程序所需的各种工具和资源&#xff0c;包括java编译器、java运行时环境&#xff0c;以及常用的java类库等。 …

VMware虚拟机安装以及在虚拟机上安装JDK+Tomcat+MySQL

1. VMware虚拟机安装 注意&#xff1a;最好不要安装在C盘&#xff0c;会使电脑变得很卡。 注意&#xff1a;这里去掉“启动时检查产品更新”&#xff0c;每次启动更新麻烦&#xff0c;影响效率。 下一步&#xff0c;直到&#xff1a; 点击“许可证”&#xff0c;输入许可证…

spark 安装部署与介绍

spark spark 概述一. spark和hadoop二. 应用常景和解决生态系统组件应用场景Spark执行任务流程图 三. Spark安装四. Spark部署模式1、单机本地模式&#xff08;Spark所有进程都运行在一台机器的JVM中&#xff09;2、伪分布式模式 &#xff08;在一台机器中模拟集群运行,相关的…

TLS协议与JDK版本之间微妙的关系

TLS协议与JDK版本之间微妙的关系 首先想知道TLS协议与JDK版本之间微妙的关系&#xff0c;就必须知道什么是TLS协议&#xff1f; 维基百科是这样说的&#xff1a; 传输层安全性协定&#xff08;英语&#xff1a;Transport Layer Security&#xff0c;缩写作TLS&#xff09;&…

linux jdk免安装配置,生产环境免安装jdk的使用方法

以下为《生产环境免安装jdk的使用方法》的无排版文字预览&#xff0c;完整格式请下载 下载前请仔细阅读文字预览以及下方图片预览。图片预览是什么样的&#xff0c;下载的文档就是什么样的。 使用流程 一、概述 医院的生产环境可能已经安装过jdk&#xff0c;如果jdk的版本不是1…

jdk1.8的安装教程

1、下载java1.8 URL: http://www.oracle.com/technetwork/java/javase/downloads/jdk8-downloads-2133151.html 下载eclipse URL: http://www.onlinedown.net/soft/558304.htm 下载并安装maven地址&#xff1a; http://maven.apache.org/download.html 先选择Accept&…

在linux上安装jdk

1. 概述 此篇主要向你介绍如何一步一步的在linux环境上面安装jdk&#xff0c;包括jdk的下载、安装、和环境变量的配置。 2. 概念 2.1.JDK(Java Development Kit) 它是 Java 语言的软件开发工具包(SDK)。 JDK包含的基本组件包括&#xff1a; javac – 编译器&#xff0c;…

JDK下载安装配置环境变量

下载并安装JDK8 JDK的全称是JavaSE Development Kit&#xff0c;即java开发工具包&#xff0c;是sun公司提供 的一套用于开 发java应用程序的开发包&#xff0c;它提供了编译、运行java程 所需的各种工具和资源&#xff0c;包括java编译器、java运行时环境&#xff0c;以及常…

下载并安装JDK7 教程

下载并安装JDK7 JDK的全称是JavaSE Development Kit&#xff0c;即java开发工具包&#xff0c;是sun公司提供的一套用于开发java应用程序的开发包&#xff0c;它提供了编译、运行java程序所需的各种工具和资源&#xff0c;包括java编译器、java运行时环境&#xff0c;以及常用…