Vim是伟大的：多年来我一直在使用不同的文本编辑器和集成开发环境，而Vim陪伴我度过了所有的艰难困苦和快乐时光。也许是因为我投入了很多时间来学习和微调它以满足我的需要，所以它有点成为我的一部分:
我喜欢Vim:它并不容易使用。反正我爱Vim。
马克辛豆蔻
随着这几句话，YouTube上最好的Vim讲座之一开始了。 而且它非常有意义。我记得当时我很沮丧，问为什么有人会在我学习Vim的时候使用它。但所有这些都付出了挣扎的代价。如果你害怕Vim的学习曲线，我发现了这个伟大的帖子，宣称你可以在30分钟内学会Vim!
我使用Vim作为编辑器的主要原因之一是速度。我指的不是写代码的速度，这也是很好的。我想到的是代码的阅读速度。你知道吗，阅读与编写代码的比例是10比1。 这意味着你经常阅读旧的代码来编写新的代码。 而使用Vim，阅读和寻找旧的代码对我来说是最容易和最快的
我将在另一篇博文中解释我使用了哪些插件和快捷方式，所以一定要订阅通讯。
VSCode vs. Vim
很多人都在使用Visual Studio Code进行开发。我不怪他们。我曾经使用过VSCode和Visual Studio，它是微软推出的最好的软件之一:
当人们要求我推荐一个文本编辑器时pic.twitter.com/ZCbU54tJTb
- Tim Pope（@tpope）2019年9月14日
最近，我一直在使用VSCode来编写（和阅读）TypeScript代码。你会问为什么？好吧，在我做一个终极的Vim TypeScript设置之前，我不得不使用VSCode。我使用VSCode的唯一原因，是Vim对于编辑TypeScript文件来说太慢了。
幸运的是，我已经将Vim升级到了8.2版本，它又开始变得非常快了。我抛弃了VSCode，转而回到Vim和我的.vimrc。
如果你正在考虑这两个问题，我会说使用Vim，但我可能有偏见。VSCodeVim让你结合两个世界的最好的东西，这就是我在Visual Studio Code设置中使用的。
升级到新的Vim版本意味着我终于可以品尝到Vim和TypeScript生态系统的甜蜜果实插件。
Vim和TypeScript
为了让你开始一起使用TypeScript和Vim，我将展示用于语法高亮的插件:
- pangloss/vim-javascript为JavaScript提供了语法高亮和缩进的一般功能。
- leafgarland/typescript-vim为TypeScript提供语法高亮。
- maxmellon/vim-jsx-对JSX高亮的漂亮支持
这三个将满足你所有的需求。如果你使用GraphQL，有一个vim-graphql，对我来说很好用。
在你添加了所有这些插件之后，一个React组件就是这个样子了:
我使用vim-plug来安装插件，但在新的Vim 8.2中，你可以像vimhelp.org中描述的那样将插件添加到~/.vim/pack/some-package/ 。
要在你的.vimrc ，使用vim-plug添加这些插件，你可以这样做:
Plug 'pangloss/vim-javascript' " JavaScript support
Plug 'leafgarland/typescript-vim' " TypeScript syntax
Plug 'maxmellon/vim-jsx-pretty' " JS and JSX syntax
Plug 'jparise/vim-graphql' " GraphQL syntax
然后，用:PlugInstall 安装这些插件，或者使用我使用的这个快捷方式:
" Source Vim configuration file and install plugins
nnoremap <silent><leader>1 :source ~/.vimrc \| :PlugInstall<CR>
然后，你可以按你的领导键和数字1来安装并在你的.vimrc 中应用所有的变化。
现在，到了最酷的部分!
代码补全
在Visual Studio Code中编码是非常好的，我已经习惯了在我打字的时候有建议。 幸运的是，Vim也有同样的东西！一个叫做coc.nvim的插件。一个叫做coc.nvim的插件让我的开发体验好了很多!Conquer of Completion，简称CoC，类似于YouCompleteMe和deoplete插件，但我发现它更容易配置。
这的CoC是Vim插件中的一把瑞士军刀。它的灵感主要来自于VSCode，并且有完整的语言服务器协议支持。我们可以把语言服务器协议或LSP想象成语言工具和代码编辑器之间的一个中间人。换句话说，你只需要为TypeScript编写一个协议，并让它在不同的编辑器中重复使用。我从下面的图表中最能理解这个想法。
要设置coc.nvim 插件，你需要在你的.vimrc 中包含该插件:
Plug 'neoclide/coc.nvim', {'branch': 'release'}
拥有插件本身并不足以实现TypeScript的全面VSCode体验。为了让TypeScript的代码完成显示出来，你需要安装coc-tsserver。这样做的原因是CoC与扩展一起工作。有很多你可以使用的扩展，更多关于为什么需要扩展的信息在CoC Wiki中。
在我们的例子中，我们将使用coc-tsserver 扩展，我们可以用:CocInstall coc-tsserver 来安装。或者，你可以把这一行放在你的.vimrc ，我觉得这样更好:
" CoC extensions
let g:coc_global_extensions = ['coc-tsserver']
在这一点上，你应该开始看到语言服务器的错误，在沟槽中突出显示相关的图标，在错误上光标会显示错误或警告信息。
不仅如此，你还可以进行自动完成，并得到代码修复的建议。与VSCode类似。在下面的GIF中，我将尝试在我的博客的404页面上添加一个有风格的容器。
我还在GIF的左下角显示了我正在按哪些键，这样你就能感觉到Vim中正在发生的事情。总而言之，我创建了一个Container 变量，它使用了styled.div 。之后，我在我的代码中包括了<Container> ，但TS服务器抱怨说找不到styled 。然后，我在用快捷方式查看代码修复，我选择导入styled。
我从coc.nvim repo的Vim配置实例中提取了一些技巧，你一定要去看看!
我在上面的GIF中使用的一个快捷方式是领导键+ac:
" Remap keys for applying codeAction to the current line.
nmap <leader>ac <Plug>(coc-codeaction)
" Apply AutoFix to problem on the current line.
nmap <leader>qf <Plug>(coc-fix-current)
最后一个是按领导键+qf，可以立即应用快速修复。 除此之外，我的配置非常简单。我还使用了以下内容:
" GoTo code navigation.
nmap <silent> gd <Plug>(coc-definition)
nmap <silent> gy <Plug>(coc-type-definition)
nmap <silent> gi <Plug>(coc-implementation)
nmap <silent> gr <Plug>(coc-references)
gd,gy,gi,gr 当在代码中跳来跳去试图弄清代码被定义和引用的地方时，它很有用。这就是我喜欢Vim的原因，它让我在编写和阅读代码时速度很快为了更好地说明问题，这里有一个在SEO组件的定义和它被引用的地方之间跳跃的GIF。
就这样了，伙计们!如果你想了解更多关于Vim和我的设置，请订阅新闻通讯，以获得最新的博客文章。另外，我的.vimrc ，可在我的dotfiles repo中找到。
