持续创作，加速成长！这是我参与「掘金日新计划 · 6 月更文挑战」的第21天，点击查看活动详情

前言

身为一个前端小菜鸟，总是有一个飞高飞远的梦想，因此，每点小成长，我都想要让它变得更有意义，为了自己，也为了更多值得的人

开开心心学技术大法~~

来了来了，他真的来了~

正文

vim安装使用

安装

vscode的插件市场搜索vim安装即可

使用

终端按照你的vscode选择键入以下命令

$ defaults write com.microsoft.VSCode ApplePressAndHoldEnabled -bool false              # For VS Code
$ defaults write com.microsoft.VSCodeInsiders ApplePressAndHoldEnabled -bool false      # For VS Code Insider
$ defaults write com.visualstudio.code.oss ApplePressAndHoldEnabled -bool false         # For VS Codium
$ defaults write com.microsoft.VSCodeExploration ApplePressAndHoldEnabled -bool false   # For VS Codium Exploration users
$ defaults delete -g ApplePressAndHoldEnabled                                           # If necessary, reset global default

比如我用的是vscode的基础编辑器，所以就是用第一个，通常我们都选择第一个即可

在vscode的setting.json中贴上默认的vim配置

{
  "vim.easymotion": true,
  "vim.incsearch": true,
  "vim.useSystemClipboard": true,
  "vim.useCtrlKeys": true,
  "vim.hlsearch": true,
  "vim.insertModeKeyBindings": [
    {
      "before": ["j", "j"],
      "after": ["<Esc>"]
    }
  ],
  "vim.normalModeKeyBindingsNonRecursive": [
    {
      "before": ["<leader>", "d"],
      "after": ["d", "d"]
    },
    {
      "before": ["<C-n>"],
      "commands": [":nohl"]
    },
    {
      "before": ["K"],
      "commands": ["lineBreakInsert"],
      "silent": true
    }
  ],
  "vim.leader": "<space>",
  "vim.handleKeys": {
    "<C-a>": false,
    "<C-f>": false
  }
}

完成以上两步，基本就可以在vscode中来尝试vim的编辑使用啦。

更多详情可以去vim的插件市场查看详细内容

如果你上手之后想要返回原来的使用方式，只需要依据你之前设置的设置回来即可，比如：

$ defaults write com.microsoft.VSCode ApplePressAndHoldEnabled -bool true

当然，最好连vim插件和配置也一并删除。

vim基础概念

我们这里先讲vim的两个基础模式

更多vim模式如下图：

normal模式与insert模式

normal模式用来快速筛选定位光标所在

insert模式是编辑时需要进入的模式

vim配置好之后默认是normal模式，光标是这个样子的

vim插入模式是这样的

我们在使用vim的过程中需要在normal模式下筛选定位光标，选中所需内容，然后进入insert模式下进行编辑或替换内容

vim常见按键控制

光标控制
- 光标单词操作
  - w跳转到下个单词开头
  - b跳转到本单词或上个单词开头
  - e跳转到本地次或下个单词结尾
  - ge跳转到上个单词结尾
- 光标上下左右
  - h、j、k、l
  - 代替方向键，分别是左、下、上、右
- 光标行操作
  - 0 跳转到行首
  - ^跳转到行首开始的第一个非空字符
  - $跳转到行位
  - gg跳转到第一行
  - G跳转到最后一行
  - 行间字母跳转
    - f {char}，char是可以是本行内的任一个字母，表示将光标定位到向右查找的第一个{char}上
    - F {char}表示将光标定位到向左查找的第一个{char}上
    - t {char}表示将光标跳转到下个字符为{char}的前一个字符上
    - T {char}表示将光标跳转到下个字符为{char}的后一个字符上
    - ; 表示正向查找，基于上一个f {char}、F {char}或f {char}、T {char}
    - , 表示反向查找，基于上一个f {char}、F {char}或f {char}、T {char}
选中
- 选中关键key是v
- 选中需与光标配合使用，或者更加高级的用法需要牵扯到vim中的motion，也就是动作的意思
- v与光标配合使用
  - v+光标配合，比如v l就是选择光标与邻近的向右的字符，vh就是选中光标与邻近的向左的字符，v w就是选中从光标位置选中到单词结尾，等等其他与光标的配合使用可以类比。
- v与motion配合使用
  - motion分为i（inner）和a（around）
    - 他们都有通用的选择规则，这里以i举例，a也是同样的用法
    - iw，选中当前单词，w即是word
    - i"，选中""内部的内容
    - i'，选中''内部的内容
    - i(，选中()内部的内容
    - 更多的还有i[、i{、i<等类似成对出现的
    - a相对于i来说，连成对的标识也被包含，比如a"表示选中"xxx"的全部内容（""内部的内容 + ""），更详细的例子：比如光标在"nam|e"的m后面，这个时候a"选中"name"，而i"选中name
  - 使用场景就是，当光标要在''内，然后vi'即为选中光标所在的''内部的内容，vi(就是选中光标说在的()内的内容，其他类似的选中可以类比。
编辑
- vim中编辑依靠前面的光标控制与选中，例如在光标处编辑与选中之后编辑替换
- 基于光标编辑
  - i光标前插入
    - 与motion的i不同，motion的i需要搭配v或其他关键key使用，即前面需要要关键key，如vi(，而编辑中的i需要单独使用
  - I选中单词首部插入，如果没有选中则为行首插入
  - a光标后插入
  - A选中单词尾部插入，如果没有选中则为行尾插入
  - o新起下一行编辑
  - O新起上一行编辑
- 基于选中编辑
  - 选中之后需要键入c来触发插入模式，键入c之后删除选中内容并可以进行编辑
操作
- d删除，可配合motion使用，例如di"就是删除""内部的内容
- c编辑，就是上面说的c，可配合motion使用，例如ci"就是删除""内部的内容在""内触发插入模式可以进行编辑
- y复制
- p粘贴
- u撤回
- v（visual）进入visual模式
其他
- 切换大小写
  - 不需要进入插入模式手动输入对应字母的大小写
  - ~ 将光标下的字母改变大小写
  - 3~ 从光标开始位置之后三个转变大小写
  - g~~ 转变当前行字母的大小写
  - gUU 将当前行字母改成大写
  - guu 将当前行的字母改变成小写
  - gUaw 将光标下的单词转变为大写
  - guaw 将光标下的单词转变为小写
- 跟函数交互
  - gd模拟鼠标command + 鼠标左键，跳转到光标所在函数的定义处
  - gh模拟鼠标hover，提示出来函数的入参以及出参等信息
  - gb多光标，基于鼠标所在单词处创建多光标，通常配合前面说到的I和A将光标跳到选中单词首部或结尾处并进入insert模式进行编辑-
- 跟编辑器交互
  - command 0进入到编辑器左边文件管理界面，然后可以通过hjkl来操作文件
  - command 1、2、3、4...是如果你开了编辑器分栏的话，定位到指定分栏
  - gt向右切换tab
  - gT向左切换tab
  - 1、2、3、4gt切换指定tab

享受vscode+vim的极致编码体验

当然，基于vim插件，还可以解锁更多轻便操作方式，还请期待vscode+vim开启你的极致编码体验：深入篇

结语

往期好文推荐「我不推荐下，大家可能就错过了史上最牛逼vscode插件集合啦！！！(嘎嘎嘎~)😄」

vscode+vim开启你的极致编码体验：入门篇

前言

正文

vim安装使用

vim基础概念

vim常见按键控制

享受vscode+vim的极致编码体验

结语