前端进阶之旅前端进阶之旅
基础篇
进阶篇
高频篇
精选篇
手写篇
原理篇
面经篇
自检篇
每日一题
  • 综合

    • 综合题型
    • 其他问题
    • 设计模式
    • 思维导图
    • 学习路线
  • 前端基础

    • HTTP
    • 浏览器
    • 计算机基础
  • 进阶学习

    • NPM工作流
    • Docker
    • Canvas
    • Node学习指南
    • 前端综合文章
  • 其他

    • Handbook
    • 职场话题
    • CSS可视化
  • 框架文档

    • React
    • Vue3
    • Vite
    • Svelte
    • Angular
    • NodeJS
    • Egg
    • Nest
    • Koa
    • Express
    • Electron
    • Ionic
    • Taro
    • Uniapp
    • React Native
    • Webpack
    • Rollup
    • Jquery API
    • Bootstrap
    • Axios
    • Lodash
    • RXJS
    • Sequelize
    • TypeORM
    • Mongoose
    • GraphQL
    • Puppeteer
    • Sass
    • Less
    • Umi4
    • Miniprogram
  • 文档教程

    • Cheatsheets
    • Devdocs有可能是全球最全的文档库
    • Overapi
    • JavaScript 标准参考教程
    • ES6 入门教程
    • MDN在线文档
    • Typscript中文文档
    • JavaScript Promise迷你书(中文版)
    • Canvas API中文
    • Git中文手册
    • 云开发Cloudbase
    • Serverless中文文档
  • UI组件

    • Ant Design React
    • Ant Design Vue
    • Ant Design Pro
    • ProComponents
    • 腾讯Tdesign
    • NutUI京东风格的轻量级移动端 Vue 组件库
    • Semantic UI Vue
    • Cube UI Vue滴滴
    • Iview UI
    • 有赞Vant Vue3
    • 有赞Vant 小程序
    • Element UI Vue3
  • 可视化

    • Antv
    • Bizcharts
    • Threejs
    • D3js
    • Highcharts
    • Echarts
  • 配置相关

    • ESLint
    • Babel
    • Nginx中文文档
    • Github Action中文
    • Docker官方文档
    • Jenkins官方文档
  • 后端相关

    • Spring官方文档中文版
    • Spring Boot官方文档
    • Spring Cloud官方文档
    • Java8官方文档
    • maven官方文档
    • Tomcat 8官方文档
    • Kafka中文文档
    • MyBatis中文文档
    • RabbitMQ中文文档
    • Dubbo中文文档
    • Netty官方文档
    • Elasticsearch官方文档
    • K8S官方文档
  • 实用工具

    • 在线正则表达式调试工具
    • 在线正则表达式可视化
    • 常用正则表达式大全
    • 可以在线看代码流程的网站:loupe
    • 在线MD5编码工具
    • 在线JWT解码工具
    • 在线JSON解析
    • 在线文本比对
    • 在线JS代码格式化
    • 在线SQL压缩格式化
    • 在线XML压缩格式化
    • 在线时间戳转化工具
    • 在线RGB颜色转化工具
    • 在线HTTP在线接口测试工具
    • 在线IP地址查询
    • 在线菜鸟综合导航工具
  • 在线编程

    • MipCode快速的在线代码创作工具
    • Codepen
    • Jsbin
    • CodeSandBox在线快速学习React/Vue
    • Vue SFC Playground
    • Vue3 模板在线解析查看编译结果
    • Svelte Playground
    • 在线尝试Babel编译
    • Typescript在线编译
    • AST可视化编辑
    • 在线尝试Rollup打包
    • Prettier Playground
    • Stackblitz基于VSCODE的WEBIDE
    • NPM Runkit在浏览器中快速学习及尝试Node.js模块
    • Play with Docker在线体验
  • CSS相关

    • 用来帮助大家查找CSS的相关属性的语法,以及使用方法
    • 提供了CSS相关属性的浏览器兼容表,同时提供了对应属性资源
    • Flex在线动态练习
    • 贝塞尔曲线生成工具
    • SCSS在线转CSS
    • Clip-path在线生成器
    • Animate.css动画效果
    • 按需定制CSS动画效果
    • 一份清单,按字母表顺序列出了每个CSS属性
    • CSS按钮生成器
    • Css3按钮动画
    • CSS3渐变样式生成器,类似Photoshop中的渐变界面
    • CSS3 Maker可在线演示渐变阴影旋转动画并生成代码
    • CSS3 Tool非常方便的生成背景渐变、阴影、旋转和边框圆角效果
    • SVG背景生成
    • 多张图片合成雪碧图
    • 汇集了实现各种加载效果的CSS代码片段
    • SVG滤镜
    • HTML5 元素标签含义大全(元素周期表)
    • HTML语义化
    • KakaCss快速生成Css样式,在任意网站复制内容,再到本页面Ctrl+V
    • CSS参考手册
    • 各种各样的loading效果
    • CSS shadow generator
    • 通过拖拽的形式生成需要的border radius
    • 花式半径生成器-通过拖拽的形式生成需要的border radius
    • cssgrid-generator
  • 综合

    • 可视化学习算法网站
    • 在线Nginx配置
    • React生命周期查看网站
    • CodeFun设计稿智能生成源代码
    • Imgcook由设计稿一键智能生成代码的大厨
  • 创作必备

    • 在线画图processon
    • Draw.io免费的流行的流程图工具
    • 在线思维导图mindline
    • 在线字数统计
    • 在线mardown排版
    • 在线免费图床
    • 在线代码截图carbon
    • 在线短链生成
    • 在线文本替换
    • 在线文件压缩
    • 在线多媒体转换器
    • 在线PDF转化工具SmallPdf
    • 在线任意文件的格式转换Convertio
    • 在线PS工具
    • 在线抠图工具
    • LOGO在线制作
    • 在线制作海报设计工具
    • Open source icons
    • 表情包在线网站
    • 图片智能放大工具
    • ICO图标在线生成
    • 视频转GIF工具
    • 音频在线处理
    • 多图合成GIF工具
    • 在线图片压缩工具
    • Pixabay图片素材库
    • Unsplash图片素材库
    • Pexels图片素材库
小程序题库
公众号动态
博客动态
前端导航
基础篇
进阶篇
高频篇
精选篇
手写篇
原理篇
面经篇
自检篇
每日一题
  • 综合

    • 综合题型
    • 其他问题
    • 设计模式
    • 思维导图
    • 学习路线
  • 前端基础

    • HTTP
    • 浏览器
    • 计算机基础
  • 进阶学习

    • NPM工作流
    • Docker
    • Canvas
    • Node学习指南
    • 前端综合文章
  • 其他

    • Handbook
    • 职场话题
    • CSS可视化
  • 框架文档

    • React
    • Vue3
    • Vite
    • Svelte
    • Angular
    • NodeJS
    • Egg
    • Nest
    • Koa
    • Express
    • Electron
    • Ionic
    • Taro
    • Uniapp
    • React Native
    • Webpack
    • Rollup
    • Jquery API
    • Bootstrap
    • Axios
    • Lodash
    • RXJS
    • Sequelize
    • TypeORM
    • Mongoose
    • GraphQL
    • Puppeteer
    • Sass
    • Less
    • Umi4
    • Miniprogram
  • 文档教程

    • Cheatsheets
    • Devdocs有可能是全球最全的文档库
    • Overapi
    • JavaScript 标准参考教程
    • ES6 入门教程
    • MDN在线文档
    • Typscript中文文档
    • JavaScript Promise迷你书(中文版)
    • Canvas API中文
    • Git中文手册
    • 云开发Cloudbase
    • Serverless中文文档
  • UI组件

    • Ant Design React
    • Ant Design Vue
    • Ant Design Pro
    • ProComponents
    • 腾讯Tdesign
    • NutUI京东风格的轻量级移动端 Vue 组件库
    • Semantic UI Vue
    • Cube UI Vue滴滴
    • Iview UI
    • 有赞Vant Vue3
    • 有赞Vant 小程序
    • Element UI Vue3
  • 可视化

    • Antv
    • Bizcharts
    • Threejs
    • D3js
    • Highcharts
    • Echarts
  • 配置相关

    • ESLint
    • Babel
    • Nginx中文文档
    • Github Action中文
    • Docker官方文档
    • Jenkins官方文档
  • 后端相关

    • Spring官方文档中文版
    • Spring Boot官方文档
    • Spring Cloud官方文档
    • Java8官方文档
    • maven官方文档
    • Tomcat 8官方文档
    • Kafka中文文档
    • MyBatis中文文档
    • RabbitMQ中文文档
    • Dubbo中文文档
    • Netty官方文档
    • Elasticsearch官方文档
    • K8S官方文档
  • 实用工具

    • 在线正则表达式调试工具
    • 在线正则表达式可视化
    • 常用正则表达式大全
    • 可以在线看代码流程的网站:loupe
    • 在线MD5编码工具
    • 在线JWT解码工具
    • 在线JSON解析
    • 在线文本比对
    • 在线JS代码格式化
    • 在线SQL压缩格式化
    • 在线XML压缩格式化
    • 在线时间戳转化工具
    • 在线RGB颜色转化工具
    • 在线HTTP在线接口测试工具
    • 在线IP地址查询
    • 在线菜鸟综合导航工具
  • 在线编程

    • MipCode快速的在线代码创作工具
    • Codepen
    • Jsbin
    • CodeSandBox在线快速学习React/Vue
    • Vue SFC Playground
    • Vue3 模板在线解析查看编译结果
    • Svelte Playground
    • 在线尝试Babel编译
    • Typescript在线编译
    • AST可视化编辑
    • 在线尝试Rollup打包
    • Prettier Playground
    • Stackblitz基于VSCODE的WEBIDE
    • NPM Runkit在浏览器中快速学习及尝试Node.js模块
    • Play with Docker在线体验
  • CSS相关

    • 用来帮助大家查找CSS的相关属性的语法,以及使用方法
    • 提供了CSS相关属性的浏览器兼容表,同时提供了对应属性资源
    • Flex在线动态练习
    • 贝塞尔曲线生成工具
    • SCSS在线转CSS
    • Clip-path在线生成器
    • Animate.css动画效果
    • 按需定制CSS动画效果
    • 一份清单,按字母表顺序列出了每个CSS属性
    • CSS按钮生成器
    • Css3按钮动画
    • CSS3渐变样式生成器,类似Photoshop中的渐变界面
    • CSS3 Maker可在线演示渐变阴影旋转动画并生成代码
    • CSS3 Tool非常方便的生成背景渐变、阴影、旋转和边框圆角效果
    • SVG背景生成
    • 多张图片合成雪碧图
    • 汇集了实现各种加载效果的CSS代码片段
    • SVG滤镜
    • HTML5 元素标签含义大全(元素周期表)
    • HTML语义化
    • KakaCss快速生成Css样式,在任意网站复制内容,再到本页面Ctrl+V
    • CSS参考手册
    • 各种各样的loading效果
    • CSS shadow generator
    • 通过拖拽的形式生成需要的border radius
    • 花式半径生成器-通过拖拽的形式生成需要的border radius
    • cssgrid-generator
  • 综合

    • 可视化学习算法网站
    • 在线Nginx配置
    • React生命周期查看网站
    • CodeFun设计稿智能生成源代码
    • Imgcook由设计稿一键智能生成代码的大厨
  • 创作必备

    • 在线画图processon
    • Draw.io免费的流行的流程图工具
    • 在线思维导图mindline
    • 在线字数统计
    • 在线mardown排版
    • 在线免费图床
    • 在线代码截图carbon
    • 在线短链生成
    • 在线文本替换
    • 在线文件压缩
    • 在线多媒体转换器
    • 在线PDF转化工具SmallPdf
    • 在线任意文件的格式转换Convertio
    • 在线PS工具
    • 在线抠图工具
    • LOGO在线制作
    • 在线制作海报设计工具
    • Open source icons
    • 表情包在线网站
    • 图片智能放大工具
    • ICO图标在线生成
    • 视频转GIF工具
    • 音频在线处理
    • 多图合成GIF工具
    • 在线图片压缩工具
    • Pixabay图片素材库
    • Unsplash图片素材库
    • Pexels图片素材库
小程序题库
公众号动态
博客动态
前端导航
Vim使用摘要笔记
首页
2016-03-19 09:04:38
工欲善其事必先利其器
Vim

# 插入模式和退出VIM的方法

VIM 具有 6 种基本模式和 5 种派生模式。

基本模式:普通模式、插入模式、可视模式、选择模式、命令行模式和 Ex 模式;

派生模式:操作符等待模式、插入普通模式、插入可视模式、插入选择模式和替换模式


此处输入图片的描述

此处输入图片的描述


# 删除命令、数字的奥义、撤销和恢复命令

此处输入图片的描述

此处输入图片的描述

此处输入图片的描述


# 粘贴命令、替换命令、替换模式和修改命令

  • 粘贴命令 使用 p 命令可以将最后一次删除的内容粘贴到光标之后。(大写的 P 则是粘贴到光标之前)

**这里需要注意的是:**如果你需要粘贴的是整行为单位,那么 p 命令将在光标的下一行开始粘贴;如果你拷贝的是非整行的局部字符串,那么 p 命令将在光标后开始粘贴。

  • 拷贝命令

其实我们用的最多的还是拷贝粘贴,VIM 用 y 命令实现拷贝。语法跟删除的 d 命令一样:d motion

其中的 motion 同样是用来表示操作范围的指令,即 yy 表示拷贝当前行,3yy 则表示拷贝 3 行;y$ 表示从光标所在的位置拷贝到行尾的所有字符;yG 则表示从光标所在行拷贝到文件末尾行的所有字符

拷贝完成之后同样使用 p 命令进行粘贴

  • 替换命令

VIM 还提供了一个简单的替换命令:r 命令

r 用于替换光标所在的字符,做法是先将光标移动到需要替换的字符处,按一下 r 键,然后输入新的字符。注意,全程无需进入插入模式,也不会进入插入模式

  • 替换模式

对于需要替换多个字符,更好的方案是直接进入替换模式。按下大写的 R 键,屏幕左下角出现 – REPLACE – 字样,说明你已经处于替换模式。此时输入字符可以连续替换光标及其后边的内容。

  • 修改命令

修改跟替换是不一样的! 修改跟替换是不一样的!

修改会进入插入模式,替换不会进入插入模式! 修改会进入插入模式,替换不会进入插入模式!

修改命令我们使用 c 键来启动,格式是:c [number] motion

motion 依然表示范围,[数字]依然拥有奥义,同样是可选的,加上数字表示重复执行多次 motion 范围…

此处输入图片的描述

事实上,修改 == 删除 + 进入插入模式


# 文件信息、跳转、定位括号和缩进

有时候,你可能需要知道当前的文件信息,比如文件名,文件状态,文件的总行数,以及光标所在的相对位置

快捷键 ctrl + g 可以解决你的需求:

此处输入图片的描述

  • 跳转

在 VIM 有两种方式可以将光标跳转到指定的位置:

  • 行号 + G
  • 行号

比如将光标跳转到第 333 行的位置,你就输入数字 333,再输入大写字母 G 即可见证奇迹;或者输入冒号(:)进入命令行模式,再输入数字 333,最后回车,也可以跳转到目的地

如果单独输入 G 键(前边没有输入数字),那么光标是直接去到文件的最后一行;如果输入两个小写 g,即 gg,则将光标跳转到文件的第一行。

  • 定位括号

VIM 有个按键可以帮你快速定位到另一半括号,就是 % 键。将光标移动到 (),[],{},中的任何一半括号上,按下 % 键,便可看到此时光标已经跳转到另外一半的括号上了

  • 缩进

在编写代码的时候我们经常需要对代码进行缩进,VIM 可以使用尖括号(< 或 >)来控制缩进,我们常用的就是两个同方向的尖括号表示将光标所在的语句进行缩进和反缩进操作。很明显 >> 表示缩进,而 << 则表示反缩进

不过行数一多……到底要缩进多少行就成了一个问题……这时,你可以按一下 v 进入可视模式(左下角出现 -- VISUAL -- 字样),然后通过 h、j、k、l 或 其他 motion 来移动你的光标,此时光标所到之处必被一道亮光所包围(表示被选中),选择好需要缩进的目标后,只需按一下 > 即可完成任务

此处输入图片的描述


# 搜索命令和替换命令

  • 搜索命令

此处输入图片的描述

最后提个醒:在搜索命令中,.、*、[、]、^、%、/、?、~ 和 $ 这 10 个字符有着特殊意义,所以在使用这些字符的时候要在前面加上一个反斜杠(\),比如你要搜索问号,则输入 /\?

  • 替换命令

搜索在很多情况下都是为了替换

通过搜索功能,我们将光标定位到目标位置,如果你确定这个目标是可恶的,需要被替换的,你可以输入 :s/old/new,这样即可将光标所在行的第一个 old 替换为 new;你如果输入的是 :s/old/new/g,则表示将光标所在行的所有 old 替换为 new。

输入 : %s/old/new/g 表示替换整个文件中每个匹配的字符串 输入 : %s/old/new/gc 替换提示信息 输入 : 5,13s/old/new/g 替换第 5 行到第 13 行之间的所有 XX

# 执行shell命令、文件另存为、合并文件和打开多个文件

  • 执行shell命令

想知道当前 / 下边有哪些目录和文件,在 VIM 中你可以输入 :!ls

在输入冒号(:)进入命令行模式,输入感叹号(!),在其后便可以加上 shell 命令。此后 VIM 将临时跳转回 shell,并执行命令。再次按下 Enter 键回到 VIM

  • 文件另存为

输入 :w 新文件名 文件另存为

如:输入 :w test2 该命令会以 test2 为文件名拷贝保存整个 test 文件

  • 局部内容另存为

言下之意就是,VIM 可以将文件中的局部文本另存为一个新的文件

fe
Preview
  • 插入模式和退出VIM的方法
  • 删除命令、数字的奥义、撤销和恢复命令
  • 粘贴命令、替换命令、替换模式和修改命令
  • 文件信息、跳转、定位括号和缩进
  • 搜索命令和替换命令
  • 执行shell命令、文件另存为、合并文件和打开多个文件
  • 其他总结
  • vim 使用tip
  • 附录

← 简明 Vim 练级攻略CSS块级元素和行内元素 →